画廊脚本只在某些页面功能

Question

我在下面的帖子我的网站上使用画廊脚本的缩略图

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

它工作正常，但是当你去到主画面（后第三下来），它停止工作。是否因为我有另一篇文章有​​相同的脚本干扰？

任何帮助将不胜感激，谢谢！

Answer 1

您的脚本使用ids来定位要显示的图片。 ID应该是唯一的，只有一个元素可以有任何给定的ID。

您的两个画廊的img共享相同的Ids：＃pic-0，＃pic-1等。因此，单击时，只显示第一个找到的图像，第一个图库中的img。

它不应该太难解决，但你的许多代码必须由CMS生成，所以我必须知道你可以改变以帮助更多。

（这是处理您的画廊:)

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

编辑点评后的一段代码：

所以，honnestly你的代码是有点乱，会有很多变化，实现东西清洁。 但是，对于您的迫切需要，你应使用两种showImage功能：

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

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

和编辑您的联系： 第一个画廊。第二个是 。

请记住，这是丑陋的，不可扩展：如果你有三个画廊，它会打破。 我会看看你的代码，看看你可以怎么做才能有一个独特的功能。

EDIT2：

所以，清洁的功能供你使用：

1 /设置：选择一个类名对每条链路/ IMG对。每为例：

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

拇指链接和图像显示：

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

然后，我看到你有JQuery的，所以这种功能：

$(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; 
    }); 
}); 

第一，它会在.gallery元素中的所有链接深度为两个div的位置绑定一个click事件。这是你的大拇指。 单击时，它将获取单击的拇指链接的类。 然后搜索此链接的父级.gallery，隐藏所有图片并显示好的图片。

我不能确保它能解决问题，因为您的标记非常复杂，但它应该。