Question

I am using a gallery script with thumbnails on the following post on my site

http://www.lookbookcookbook.com/2012/03/apple-cinnamon-pancakes.html

It works fine, but when you go to the main page (third post down), it stops working. Is it because I have another post with the same script that is interfering?

Any help would be much appreciated, thanks!

Answer 1

Your script uses ids to target the picture to show. Ids should be uniques, only one element can have any given Id.

Your two galleries’ img are sharing same Ids : #pic-0, #pic-1, etc. So on click, only the first one found is shown, the img in the first gallery.

It should not be too hard to solve, but a lot of your code must be CMS-generated, so I must know what you can change to help more.

(that’s the piece of code handling your gallery:)

function myshowImages(id) {
 /* $(".mainPic").hide(); 
$("#pic-"+id).show();*/ 
$('.mainPic').css({'display':'none'}); 
$("#pic-"+id).fadeIn('slow');  
}

edit after comments :

So, honnestly your code is a bit of mess, there would be lots of change to achieve something clean.
However, for your immediate needs, you should use two showImage functions :

function myshowImages1(id) {
$('.mainPic1').css({'display':'none'}); 
$("#pic-"+id).fadeIn('slow');  
}

function myshowImages2(id) {
$('.mainPic2').css({'display':'none'}); 
$("#pic-"+id).fadeIn('slow');  
}

And edit your links :
for the first gallery.
for the second one.

Keep in mind that it’s ugly and not scalable : if you have three gallery, it’ll break.
I’m going to look at your code to see how you could do to have a unique function.

Edit2 :

So, a cleaner function for you to use :

1/ setup : chose a classname for each link/img pair. Per exemple :

<a href="" class="image_1">
<img alt="" height="80" src="(some long path)/lookbookcookbooksaya267b.jpg" title="" width="80">
</a>

the thumb link and the image to show :

<a href="(some long path)/lookbookcookbooksaya267.jpg">
<img alt="" class="image_1" height="470" src="(some long path)/lookbookcookbooksaya267.jpg"></a>

Then, I’ve seen you have JQuery, so this kind of function :

$(document).ready(function()
{
     $(".gallery div div a").on("click",function()
     {
     var myClass = $(this).attr('class');
     var $parentGallery = $(this).parents('.gallery');
     $parentGallery.find("div > a > img").css("display","none").find("myClass").fadeIn();
     return false;
    });
});

First, it binds a click event on all your links which are two div depth in the .gallery element. That’s your thumbs.
On click, it fetches the class of the clicked thumb link.
Then it searches for the parent .gallery of this link, hide alls images and show the good one.

I can’t really guarantee it’ll work out the box because your markup is very complex, but it should.