jQuery.popeye is an advanced image gallery script useful to save space when displaying a collection of images. It is designed as an alternative to often-seen jQuery Modal Window scripts. The JavaScript Image Lightbox employs a modal window to display the large images, thus disrupting the workflow of the users interacting with a web page.

This jQuery-powered Script takes a different approach: it allows for browsing all thumbnails as well as the large images in a single image space and respects the page flow, staying anchored and rooted in the web page at all times. This way it gives a less disruptive user experience than modal windows.

Sponsor Flip Wall With jQuery & CSS is a tutorial shared by Tutorialzine, that intends to fit a lot of information and organize it clearly, so that the emphasis is put on your sponsors, and not on other elements of your design. They are using PHP, CSS and jQuery with the jQuery Flip plug-in, to do just that. You can use the resulting code to showcase your sponsors, clients or portfolio projects.

For this script you need: the jQuery and the jQuery UI files, the jQuery Flip plug-in, the Flip Wall JavaScript code and the CSS code. The data for the wall is read from an array. Therefore, you can easily modify it to work with any kind of database or storage.

Bring interactivity to your site’s pages!

Coin Slider is a lightweight (8 kb) jQuery Image Slider plugin with Unique Transition Effects such as swirl, rain and straight. This plugin has lot of options to helping you set slider as you want. For instance you can customize it to have a 900px wide slider, without navigation and with 5sec delay between images.

This image slider is cross-browser compatible with Internet Explorer 6+, Firefox 2+, Safari 2+, Google Chrome 3+, Opera 9+ and requires 3 files to be included in the web page: jQuery file, Coin Slider JavaScript file and CSS file.

• Unique transition effects
• Valid markup
• Flexible configuration
• Auto slide
• Navigation box
• Linking images
• Fully customizable using CSS

Accordion is a UI pattern made up of a series of containers for your content, all of which are closed when the new panel opens and reveals itself. Chris Coyier came up with Grid Accordion (powered by jQuery and CSS). It works with the same theory as most other accordions. Only one cell is opened at a time. The big thing is that the column of the current open cell expands to a reasonable reading width. The effect is really awesome as it offers you a handy alternative to classical accordions, by adding all the data you need in a single table.

One way to look at an accordion is like a collapsed single column of a table. I was recently building a page for a client site, where the information that they provided really made sense to present as a table. But it was too much information to view all at once. I thought it would have been overwhelming visually. I also thought that it was most likely that people visiting this page would know what they needed right away, so having them click once to get it seemed pretty reasonable. So, a table of accordions!

jConfirmAction is a jQuery plugin that aims to replace those boring default confirmation boxes with cute ones. This plugin generates a flying bubble confirmation box upside your action link. basically, jConfirmAction creates a DIV element that contains confirmation box after you clicked on the element (either link or button), then it will appear with fading in and disappear with fading out. The confirmation box’s style can be customized via CSS.

jConfirmAction has three arguments that aims to customize language for the confirmation box:

• question : A text for your question (default : Are You Sure?).
• yesAnswer : A text for Yes answer (default : Yes).
• cancelAnswer : a text for Cancel/No answer (default : No).

jsPlumb is a jQuery plugin that provides a way to “plumb” elements of a UI together. It is much the same way you may have seen on Yahoo Pipes. It uses Canvas in modern browsers and Google’s ExplorerCanvas script for stone-age browsers.

The plugin relies on jQuery 1.3.x or jQuery 1.4.x (tested on 1.3.2 and 1.4.2), and also jQuery UI 1.7.2 (if you want to support dragging). Full transparent support for jQuery dragging is included, the API is super simple, and the compressed version of the script is just 11K.

Nivo Slider is a simple and lightweight (weights only 5kb packed) JQuery Image Slider Plugin that supports up to 9 unique transition effects: sliceDown, sliceDownLeft, sliceUp, sliceUpLeft, sliceUpDown, sliceUpDownLeft, fold, fade, random. You can add your own custom style to the slider including: next/prev arrows, nav bullets, stylesheet. The slider is available for download in 2 versions: Production (5kb Packed) and Development (10kb Uncompressed).

Features include:

• 9 unique transition effects
• Simple clean & valid markup
• Loads of settings to tweak
• Built in directional and control navigation

How to call the plugin?

<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider({
        effect: 'random',
        slices: 15,
        animSpeed: 500,
        pauseTime: 3000,
        directionNav: true, // Next & Prev
        directionNavHide: true, // Only show on hover
        controlNav: true, // 1,2,3...
        beforeChange: function(){},
        afterChange: function(){}
    });
});
</script>

The jQuery plugin is free of charge while the WordPress plugin starts from $19.

Famspam is sharing Facebox, a Facebook-style Lightbox useful to display images, DIVs, or entire remote pages using AJAX. The download package comes with the JavaScript and CSS files, a loading image, a close label, four corners, and solid border images.

Implementation Example

1) Load Dependencies – First, you need to load jQuery before Facebox.

<script src="jquery.js" type="text/javascript"></script>
<link href="facebox.css" media="screen" rel="stylesheet" type="text/css"/>
<script src="facebox.js" type="text/javascript"></script>

Read more from this entry…

jQuery Blinds is a simple, effective, and customizable slideshow plugin shared by Little Web Things. It is very easy to install. You just have to put the list (UL) with the images (each LI containg the IMG tag with the right SRC attribute) inside a main class (.slideshow) then call the plugin:

HTML Code

<div class="slideshow">
   <ul>
      <li><img src="lemons/1.jpg" alt="lemon" /></li>
      <li><img src="lemons/2.jpg" alt="lemon tea" /></li>
      <li><img src="lemons/3.jpg" alt="splashing lemon" /></li>
      <li><img src="lemons/4.jpg" alt="salad with lemon" /></li>
      <li><img src="lemons/5.jpg" alt="lemonade!" /></li>
      <li><img src="lemons/6.jpg" alt="sliced lemon" /></li>
      <li><img src="lemons/7.jpg" alt="dripping lemon" /></li>
   </ul>
</div>

Read more from this entry…