Question

I am working on a gallery at http://icon.stornge.com, where the intended functionality is for the user to click on a link on the homepage, then have a first image display, then if/when the user clicks on the image, the next limit loads, and so on until the last image.

What is happening instead is that the first click loads the image, first a sliver and then the full image (is this the intended behavior of jQuery.load('slow') on an image?</a>), and then clicking on the first image appears to call the event handler (if I put an alert() it displays as expected), but the first image stays in its place, and the second image does not appear. Chrome’s console does not register any JavaScript errors.

Are there interactions between jQuery’s event handling and .hide() and .show()? Am I getting in trouble by having an initial CSS “display: none” or anything else?

What should I change so that clicking on one image loads the next?

Answer 1

First, though it works (surprisingly — but, maybe only in Chrome) the protocol should be all lowercase (javascript:, not JavaScript:). Second, any href using script, which does not return false (after all script code in the href), can cause problems.

Anyway, just use the following:

1- Apply a class (ex. “image-toggle”) to the the images and links which you want to trigger an image to appear. Add class “icon” to the anchor.

2- Change the current href to # or javascript:return false;

3- Remove the IDs from the images (W3C HTML specs clearly state that ID values must begin with an alpha character; you can use numbers — but, you cannot start the ID with a number).

4- (optional) Place all images (to rotate) in a new DIV (call it “Images”).

Add this code to your page (in a script block):

(function($){
  var imageIndex = 0;
  $(function(){
    var $homepage = $("#homepage"), 
        $images = $(".icon");
    $images.click(function(event){
      event.preventDefault();
      $homepage.hide("slow");
      $images.hide().eq(imageIndex++).show("slow");
    });
  });
})(jQuery);