P'unk Avenue Window

I have bigger fish to fry in my Wednesday window blog post, but I wanted to share this snippet.

A simple list of images like this one:

<ul class="slideshow">
<li><img src="wheatpaste_superman.jpg" /></li>
<li><img src="wheats_tidal_wave.jpg" /></li>
<li><img src="who_is_living_in_our_garden.jpg" /></li>
<li><img src="why_we_lost_vietnam.jpg" /></li>
<li><img src="wilmington_traffic_box.jpg" /></li>
<li><img src="wilmington-trestle.jpg" /></li>
<li><img src="witherspoon_building.jpg" /></li>
</ul>


… Can be transformed into a “click for the next image” slideshow with jQuery like so:

<script>
$(function()
{
  $('.slideshow li').hide();
  $('.slideshow li:first').show();
  $('.slideshow li').click(function()
  {
   $(this).hide();
   var next = $(this).next();
   if (!next.length)
   {
    next = $($(this).parent()).children(":first");
   }
   next.show();
  });
});
</script>

If JavaScript is disabled, you simply have all of the images visible instead, which is a reasonable fallback behavior. And your HTML stays sane and meaningful.

jQuery is a beautiful thing.

You can play with a demo here.

Posted in Development