This is a major rewrite which fixed the known issue of not being able to change slides instantly via pagination clicks.

The new version also adds automatic photo caption display.

Enjoy! :)

Related posts

• Release: [jQuery Plugin] Slideshow Lite (61)
• Release: [jQuery Plugin] Endless Scroll (66)
• WordPress Plugins Recommendation List (2)
• Release: [WordPress Plugin] SyntaxHighlighter Plus (185)
• Rails, jQuery, Dating, etc (0)

A few days ago I was asked to make a simple slideshow. My initial thought was, there must be a ton of solutions available for jQuery. I could easily draw inspiration from them.

I was wrong. Whilst there are a few nicely done slideshow plugins for jQuery, the majority of them are either poorly written or far too complicated.

So, I decided to code my own plugin from the ground up. Meet Slideshow Lite!

The plugin is only tested with jQuery 1.3, but it should also work on jQuery 1.2.

Features

• Unobtrusive JavaScript, simply load it and that’s it
• Clean, semantic HTML structure
• Easy to use
• Customisable
• Free to use or to modify (GPL/MIT dual license)!

Plugin Options

• pauseSeconds (float) – number of seconds between each photo to be displayed
• fadeSpeed (float) – number of seconds for the fading transition, the value should not exceed ‘pauseSeconds’
• width (integer) – width of the slideshow, in pixels
• height (integer) – height of the slideshow, in pixels
• caption (boolean) – display photo caption?
• cssClass (string) – name of the CSS class, defaults to ‘slideshowlite’

Usage

$(document).ready(function(){
	// with default options
	$("#slideshow").slideshow();

	// with custom options
	$("#slideshow2").slideshow({
		pauseSeconds: 4,
		height: 200
	});
});

Please checkout the demo for the HTML required.

Demo

Click here for a simple demo.

Download / Source Code
Please check for the latest version on Github!

Changelog

v0.5.3 [2009-09-24]

• Added ‘fadeSpeed’ for setting the transition speed.

v0.5.2 [2009-09-06]

• Repackaged to remove an unnecessary .htaccess file.

v0.5.1 [2009-08-30]

• Fixed some typo.

v0.5 [2009-08-29]

• Major rewrite: slides can now be clicked freely (as opposed to waiting for one to finish showing before it can be clicked again).
• Added automatic photo caption.

v0.4 [2009-08-05]

• Code clean up.
• Added transparency effects to the navigation, to indicate when it is clickable.
• Added inline configuration documentation.

v0.3 [2009-08-04]

• Smoother animation.

v0.2 [2009-08-04]

• Fixed a navigation bug where the clicks no longer work after clicking on the current slideshow.

v0.1 [2009-08-04]

• Initial release.

Related posts

• jQuery Slideshow Lite Plugin Updated (Major Rewrite) (0)
• Release: [jQuery Plugin] Endless Scroll (66)
• WordPress Plugins Recommendation List (2)
• Release: [WordPress Plugin] SyntaxHighlighter Plus (185)
• Rails, jQuery, Dating, etc (0)

A bug caused by ‘fireDelay‘ is fixed.

Please head over to the release post or the jQuery plugin site for the download link.

Related posts

• Release: [jQuery Plugin] Endless Scroll (66)
• Release: [jQuery Plugin] Slideshow Lite (61)
• Rails, jQuery, Dating, etc (0)
• jQuery.slideDown() issues in IE: quick fixes (18)
• jQuery Slideshow Lite Plugin Updated (Major Rewrite) (0)

I’ve come across two issues on Internet Explorer 7 while developing a website containing some slideDown() effects, and found some quick fixes for them. :)

Issue 1: slideDown() does not actually slide, the target HTML element appears the same way as show().

After messing around with the JavaScript and HTML, I’ve finally nailed down the issue. It occurs when there are absolutely positioned elements in the target HTML.

Typically when we have absolutely positioned elements, we would want to have a relatively positioned wrapper element to control the position of the elements on the page. It makes perfect sense to simply trigger the slideDown() effect on the wrapper.

The HTML schema would look something like this:

Wrapper A (the element that contains Wrapper B, it makes an AJAX call to retrieve Wrapper B)
…. Wrapper B (the relatively positioned target element that is assigned to the slideDown() event)
…. …. Element C (absolutely positioned)

Both Firefox and Safari don’t have any problems with that, but Internet Explorer does. On IE 7 (I haven’t tested IE 6), the targeted HTML (Wrapper B) will simply appear without the sliding effect, resulting the same effect as calling show().

The fix is simple, make the parent element (Wrapper A) relatively positioned too.

Issue 2: slideDown() animates, then the element vanishes immediately afterwards.

The problematic JavaScript looks something like this:

var data = 'Some HTML retrieved from an AJAX call.';
$("div#wrapper_b").hide().html(data).slideDown();

The fix is quick and simple:

var data = 'Some HTML retrieved from an AJAX call.';
$("div#wrapper_b").hide().html(data).slideDown().show(function(){
	$(this).html(data).show();
});

Of course, depending on the HTML markup, your mileage may vary.

Related posts

• jQuery problems in IE? It could be SWFObjects. (5)
• Release: [jQuery Plugin] Slideshow Lite (61)
• Release: [jQuery Plugin] Endless Scroll (66)
• Rails, jQuery, Dating, etc (0)
• jQuery Slideshow Lite Plugin Updated (Major Rewrite) (0)

If you don’t already know, endless scroll (or infinite scrolling) is a popular technique among web 2.0 sites such as Google Reader and Live Image Search, where instead of paging through items using the traditional pagination technique, the page just keeps loading with new items attached to the end.

I have developed a jQuery plugin to easily achieve this.

Requirement: jQuery 1.2+

The plugin is tested with jQuery 1.2.6, 1.3 and 1.4.

There are a few options to customise the behaviour of this plugin:

• bottomPixels (integer) – the number of pixels from the bottom of the page that triggers the event
• fireOnce (boolean) – only fire once until the execution of the current event is completed
• fireDelay (integer) – delay the subsequent firing, in milliseconds. 0 or false to disable delay.
• loader (string) – HTML loader
• data (string) – plain HTML data
• insertAfter (string) – jQuery selector syntax: where to put the loader as well as the plain HTML data
• callback (function) – callback function, accepets one argument: fire sequence (the number of times the event triggered during the current page session)
• resetCounter (function) – resets the fire sequence counter if the function returns true, this function could also perform hook actions since it is applied at the start of the event

In a typical scenario, you won’t be using the ‘data’ option, but rather the ‘callback’ option. You may use it to trigger an AJAX call and updates/inserts your page content.

Usage

// using default options
$(document).endlessScroll();
// using some custom options
$(document).endlessScroll({
	fireOnce: false,
	fireDelay: false,
	loader: "<div class="loading"><div>",
	callback: function(p){
		alert("test");
	}
});

Demo

Click here for a simple demo.

Download / Source Code

Changelog

v1.4.2 [2011-01-08]

• Fixed a bug where calling the script on $(document) would fail.

v1.4.1 [2010-06-18]

• Fixed a bug where the callback fires when the inner wrap hasn’t been created.

v1.4 [2010-06-18]

• Endless Scroll now works with any elements, not just $(document)!

v1.3 [2009-04-20]

• Fixed a bug caused by ‘fireDelay‘.

v1.2 [2009-01-16]

• Added ‘resetCounter‘ option.

v1.1 [2009-01-15]

• Added ‘fireDelay‘ option.

v1.0 [2009-01-15]

• Initial release.

Related posts

• jQuery Endless Scroll Updated (0)
• Release: [jQuery Plugin] Slideshow Lite (61)
• jQuery Slideshow Lite Plugin Updated (Major Rewrite) (0)
• Oh, where did my theme go? (1)
• jQuery problems in IE? It could be SWFObjects. (5)

<script type="text/javascript">
    $(document).ready(function(){
        var so = new SWFObject("movie.swf", "mymovie", "400", "100%", "8", "#336699");
        so.addParam("quality", "low");
        so.addParam("wmode", "transparent");
        so.addParam("salign", "t");
        so.write("flashcontent");
    });
</script>

The only downside to this is that if you have some alternate HTML to show when Flash isn’t present, this text will be shown until the document is fully loaded and the player(s) start to render (even if the user does in fact have Flash installed).

Related posts

• Release: [jQuery Plugin] Endless Scroll (66)
• jQuery.slideDown() issues in IE: quick fixes (18)
• Release: [jQuery Plugin] Slideshow Lite (61)
• Rails, jQuery, Dating, etc (0)
• Oh, where did my theme go? (1)