0

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

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

它工作正常，但是当您转到主页（第三个帖子）时，它停止工作。是因为我有另一个帖子使用相同的脚本进行干扰吗？

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

4

1 回答 1

0

您的脚本使用 id 来定位要显示的图片。Id 应该是唯一的，只有一个元素可以具有任何给定的 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');  
}

并编辑您的链接：对于第一个画廊。对于第二个。

请记住，它丑陋且不可扩展：如果您有三个画廊，它会坏掉。我将查看您的代码，看看您如何才能拥有独特的功能。

编辑2：

因此，您可以使用更清洁的功能：

1/ 设置：为每个链接/图像对选择一个类名。例如：

<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，隐藏所有图像并显示好的图像。

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

于 2012-04-05T23:24:21.087 回答