I had this dream that I would be able to get some vague slideshow system worked out using only the stock WordPress system and some jQuery magic. Long story short, the dream came true, though it could probably use some further work for production use.

The motivation starts with WordPress attachments. Combined with Gallery Shortcode, this system can function reasonably well for a no-frills image gallery. All I needed for a slideshow, then, was a bit of sprucing up via jQuery.

First step: Gallery Shortcode

[gallery columns="0" size="medium" link="file" itemtag="div" icontag="span" captiontag="p"]

The above can be inserted in any post, and provides a stock arrangement of the images attached to the given page. It uses a “medium” size of the image (original sized images only pared down via CSS style resizing; not an ultimate solution, but reasonable if you remember to resize before uploading), and utilizes div‘s, span‘s, and p‘s rather than the default definition list tags. For an extra bit of flash, we can improve upon this via the second step:

Second step: using jQuery to transform this into a slideshow

function advanceSlide(item_class, display_id)
{
var items = $('.' + item_class);
var newIndex = Math.floor(Math.random() * items.length);

var display = $('#' + display_id);
display.empty();
display.append(items.eq(newIndex).clone());
display.children('.' + item_class).fadeIn();
}

$(document).ready(function()
{
var item_class = 'gallery-item';
var display_id = 'gallery-display';
$('#gallery-1').before('<div id="' + display_id + '">&nbsp;</div>');
$('#' + display_id).attr('style','height:450px');
$('.' + item_class).hide();
advanceSlide(item_class, display_id);
setInterval("advanceSlide('" + item_class + "','" + display_id + "')", 6000);
});

The above code is a first pass, though it seems to work rather well. For those who don’t want to parse the code alone, here’s essentially what I’m doing:

• a new div with id gallery-display is created above the gallery-1 div which the Gallery Shortcode creates.
• all images within gallery-1 are hidden.
• every six seconds, one image is selected at random, and its div is cloned into gallery-display. Before this cloned copy is placed into gallery-display, the content of this destination (i.e., the previous image that was being displayed) is removed in order to make space for the incoming image.

Current limitations and methods for improvement

One important point to the above is that gallery-display has a fixed height. If you don’t include this part, the div will reduce to a zero height and then expand again to meet the new image. In this process the screen flickers and the browser window can often get moved up a reasonable amount.

Even with the fixed height it’s not a perfect display, though again the intent of this example is more a proof of concept than it is a production level solution. With that said, someone sufficiently motivated could easily enough add in the extra CSS and lines of code along the lines of other tutorials out on the web. Other slideshow systems generally layer all of the images on the same point (i.e., top left corner of gallery-display) via absolute positioning. Transitions then work by altering the z-index of the image coming into focus.

Also, for a small number of images the random selection here does not work all that well, as it gives the same image after itself reasonably often. You can again fix this fairly easily by keeping an index of the current image and then incrementing, using a modulo operator to keep the value in the range of 0 and items.length.

With that said, if the above idea saves at least a person or two the trouble of having to deal with additional plugins or other more painful solutions, then that makes me very happy.

UPDATE

For those interested, I later posted a follow-up to this post where I ditch the random selection for a sequential playback.