background preloader

An inline lightbox alternative with slideshow

An inline lightbox alternative with slideshow
x Note: To see the full potential of CSS3 styling (shadows, gradients, rounded corners, alpha transparency), please view this page in a modern webkit or mozilla browser (Firefox 3.5+, Safari 4, Opera 10.50, Chrome 4). Other browsers will degrade gracefully. Except for IE6, though, which I didn't bother to include. Feel free to come up with your own solution ;-) Example 1 The first popeye-box uses the standard options: it floats to the left and opens to the right, its navigation and caption show on mouseover. By placing the navigation inside the stage area (where the image is displayed), we can get it to hover above the image. No need to read this, just dummy text ;-) Vivamus ut nisi id libero interdum pretium. View HTML code used in this example Example 2 The navigation stays fixed to the right of the image. There is no enlarge button, but a click on the image enlaregs and shrinks it nevertheless. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. View HTML code used in this example Related:  JQUERY PLUGINSnewSite

Photobox - CSS3 image gallery modal viewer A lightweight image gallery modal window script which uses only CSS3 for silky-smooth animations and transitions, utilizes GPU rending, which can be completely controlled and themed directly from the CSS. Lightweight! jquery.photobox.js is only 5kb (gziped & minified) Hardware accelerated, CSS3 transitions and animations Mobile friendly Support videos via iframe embedding Stunning UI and user-friendly UX Images & videos can be zoomed using mousewheel Thumbnails can be zoomed using mousewheel Keyboard & mouse navigation. Even using mousewheel left/right ;-) Exposed UX control up to 99%. No need to mess with the source code Observes DOM changes (if images were added/removed) Event-delegation on all thumbnails events (obviously...) Supports: Firefox, Chrome and IE8+ (This plugin has nothing to do with Flickr) Github project page

Checking if an element is visible on-screen using jQuery by Sam Sehnert Download jQuery VisibleView Demo We recently built a little jQuery plugin which allows us to quickly check if an element is within the browsers visual viewport, regardless of the scroll position. If a user can see this element, the function will return true. ? This method differs from the jQuery :visible selector in that visible checks to see whether the element is hidden using css (basically if offsetWidth or offsetHeight is 0). Usage In its simplest form, the element can be used as follows: $('#element').visible() This method will return true if the entire element is visible (I.e., it will return false if any part of that element is outside the viewport.Passing true to the ‘visible’ method, will tell the plugin to return true if ANY part of the element is visible on the users screen. $('#element').visible( true ) Limitations The plugin ignores the elements visibility (E.g., display:none; visibility: hidden; offsetWidth or offsetHeight is 0). $('#element:visible').visible()

least.js is a Random & Responsive jQuery, HTML 5 & CSS3 Gallery with LazyLoad Monday, 14th April 2093: sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Monday, 14th April 2093: sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Monday, 14th April 2093: sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

jquery - hiding an element on click of anything else on the page 50 Amazing jQuery Plugins That You Should Start Using Right Now Martin Angelov jQuery has a wonderful community of programmers that create incredible things. However, it may become difficult to sift through everything that is released and find the gems that are absolute must-haves. This is why, in this post, you will find a collection of 50 new jQuery plugins and JavaScript libraries that, when applied with good measure, can make your sites a joy to use. The plugins are organized into categories for easier browsing. Enjoy! Dialogs The browser’s built-in dialogs are easy to use but are ugly and non-customizable. 1. Alertify (github) is small library for presenting beautiful dialog windows and notifications. alertify.alert("Message"); alertify.confirm("Message", function (e) { if (e) { } else { } }); Alertify.js 2. jQuery Avgrund jQuery Avgrund (github) is another cool dialog solution. jQuery Avgrund Forms Forms are tedious and boring. 3. iCheck iCheck (github) is a jQuery plugin that enhances your form controls. iCheck 4. Long Press 5. jQuery File Upload 6. 8.

Kick-Start Your Project: A Collection of Handy CSS Snippets Don't start your project with an empty style sheet: there are many great snippets that can make your life easier and speed up web development. We are going to show you some handy snippets that you might find useful for kick-starting your next project. In one of the previous articles “Basic Ready-to-Use CSS Styles”, we saw how we could create a suite of classes to help the design process while making a website. I hope you made your own set of patterns! Today we are going to see how we can continue this exercise with some things a little bit more technical. Indeed, isn’t there some properties or CSS tricks you always have to check the syntax for, every single time you want to use them? Of course you do my friends! Before we go, let me tell you how I divided this article: Shorthand classes Let’s begin with shorthand classes, which are a very common things. The best example is probably the one where you have some text and an image you want to include on the left side of the text. Miscellaneous

Packery Some Useful JavaScript & jQuery Snippets - Part 3 How to hide all children div except a specific one with jQuery? $('#target div:not(#exclude)').hide(); //or $('#target').children().filter(':not(#exclude)').hide(); Detecting when a div’s height changes using jQuery $('element').bind('resize', function(){ alert( 'Height changed to' + $(this).height() ); } Delete all table rows except first $('someTableSelector').find('tr:gt(0)').remove(); Selecting root element of a certain level in the document 1 level: $('*:not(* *)'); […] How to hide all children div except a specific one with jQuery? Detecting when a div’s height changes using jQuery Delete all table rows except first Selecting root element of a certain level in the document Searching a string in jQuery Get the distance scrolled from top Select all elements except the ones with a given classAdd a row to a table How to convert decimal to hexadecimal? Filtering By More Than One Attribute in JQuery How to expire a cookie in x minutes Selecting the first x items with jQuery

clueTip Plugin Demo clueTip Plugin Demo Below are quite a few examples of how you can add a clueTip to your page, using a wide range of options. Keep in mind that there is nothing magical about the HTML markup. You can use any jQuery selector you want to attach your clueTips. Default Style jTip Theme Rounded Corners Theme this is the local content to load when the 'local' parameter is set to true.

Visual thesaurus using arbor.js Wow, I can’t believe we are at the end of January – one twelfth of the year gone already! I’ve been so busy this month I’ve barely had time to sit down and work on any personal projects. Thankfully I had a spare few hours over the weekend to work on a project I’ve been meaning to finish for a couple of weeks: a visual thesaurus using JavaScript. Visual thesaurus representation of the word 'clean'. You may (or may not) know of the Visual Thesaurus by Thinkmap; very useful but it’s a paid for service, I use it so infrequently I can’t justify paying for it (there is a free trial though). Arbor.js took a little getting used to as it uses a mixture jQuery, canvas and its own methods; but there’s a fairly extensive set of documentation and a set of usage examples. So to the demo; I’ve tried to keep it very simple to use. Any suggestions, comments or feature improvements please leave a comment below!

Related: