Question

我在我网站上的以下帖子中使用带有缩略图的图库脚本

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

它工作正常，但是当你转到主页面（第三篇文章下来）时，它就会停止工作。是因为我有另一个帖子使用相同的脚本干扰吗？

非常感谢任何帮助，谢谢！

Answer 1

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

你的两个画廊的img正在分享相同的ID：＃pic-0，＃pic-1等。所以点击时，只显示找到的第一个，第一个画廊中的img。

解决起来应该不难，但是很多代码必须是CMS生成的，所以我必须知道你可以改变什么来帮助更多。

（这是处理你的画廊的代码片段:)。

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

评论后编辑：

所以，诚实地说你的代码有点混乱，实现干净的东西会有很多变化。但是，为了满足您的直接需求，您应该使用两个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 / setup：为每个链接/ 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深度。那是你的大拇指。单击时，它将获取单击的拇指链接的类。然后它搜索此链接的父.gallery，隐藏所有图像并显示好的图像。

我无法保证它能够解决问题，因为你的标记非常复杂，但应该如此。

图库脚本仅在某些页面上运行

1 个答案: