Question

So I have a page using GalleryView 1.1 here. I like the behaviors just fine except that the left-most item’s onclick event won’t fire for some reason.

I also grabbed the 2.1 version from the GoogleCode page; the author’s page at http://spaceforaname.com/ has gone. So here is a page implementing 2.1.

Since 2.1 has a bunch of behaviors I hate and seems to completely prevent my onclick events I would like to sort out the issue with the left-most item’s onclick in the v1 page.

I have read through the code but failed to find what is interfering.

The function looks like this:

 $('.myslides').click(function() {
    //alert($(this).attr('alt'));
     $('#big_pic').attr("src", $(this).attr('alt'));
     return false;
  });

and the items like this

<li><img src='g/weddings/slides/1.jpg' width='165' height='110' alt='/g/weddings/slides/1_big.jpg' class='myslides'/></li>

I have tried moving the class attribute to the LI, and also adding an anchor around the image and giving it the class but neither of these had a visible effect.

// Edit
The page validates and yes I know the big pics are blurry. Don’t have them from GD so did best I could stretching thumbs.

Does anyone have an idea of how I should pursue debugging this?

Answer 1

So when inspecting the elements in question I found that the working thumbnails were all image elements but the non working first thumbnail was a div with id “pointer”.

Since the author’s site with the docs has evaporated I can say what function #pointer has in my filmstrip slides but in jquery.galleryview-1.1.js on line 319 I changed its width to 1px in the JS CSS and this resolved the issue of the obstructed onclick. #pointer may have a function I am not employing here. At any rate the issue is resolved.

Width was previously set to

'width':opts.frame_width-pointer_width+'px',

Now set to

pointer.attr('id','pointer').appendTo(j_gallery).css({
                 'position':'absolute',
                 'zIndex':'1000',
                 'cursor':'pointer',
                 'top':getPos(j_frames[0]).top-(pointer_width/2)+'px',
                 'left':getPos(j_frames[0]).left-(pointer_width/2)+'px',
                 'height':opts.frame_height-pointer_width+'px',
                 '1px',
                 'border':(has_panels?pointer_width+'px solid '+(opts.nav_theme=='dark'?'black':'white'):'none')
            });

Also tried adding display:none but this resulted in jerky animation.