RLASKEY::words

Tag Archives: jQuery

youmightnotneedjquery.com

So this is nice, if as a somewhat canonical list if nothing else. JS has changed a lot over the years, and what we attribute to libraries are done largely in the browsers themselves. I can get behind that.

Extending WordPress Slideshow

In a previous post I had created a system for making automated slideshows using only jQuery and the built-in WordPress attachments system. While it certainly works, I today changed around the behavior to instead read the images off sequentially, rather than picking one at random.

The trouble with the random selection, at least with the way I had previously coded it, was that especially for small sets of photos, you’d get the same image twice in a row. By keeping track of a counter variable, you can easily get by this. There are, of course, many other ways to do this, though I want to share:

function advanceSlide(item_class, display_id){
  var display = $('#' + display_id);
  display.empty();

  var items = $('.' + item_class);
  display.append(items.eq(currentItem).clone());
  display.children('.' + item_class).fadeIn();

  currentItem = (currentItem + 1) % itemCount;
}

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

  itemCount = $('.' + item_class).size();
  currentItem = 0;

  advanceSlide(item_class, display_id);
  setInterval("advanceSlide('" + item_class + "','" + display_id + "')", 4000);
});

The main difference is in using global variables to keep track of which image we’re on, and to keep track of how many images total we have. The modulo operator (%) is a standard method for restarting the count once it reaches a certain level, which is what you want when you reach the end of the list of images.

Although I generally do not like global variables, using them in the above (announced by having the variable declaration without the var keyword, in JavaScript) certainly does cut down on the complexity of the code.

WordPress attachments + Gallery Shortcode + jQuery

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.