Question

我正在使用fancybox图库模板。当您单击标题中的nav元素时，与rel =“value”匹配的缩略图会亮起。如何为多个标签制作相同的缩略图？基本上，像：rel =“value1 value2”我在下面列出的代码不起作用。只要按下任何导航按钮，任何具有多个rel =“”值的元素就会亮起。我该怎么办？我感谢任何帮助。

HTML：

<!-- .nav -->
  <ul class="nav">
    <li><a href="#" class="produce">Producing</a></li>
    <li><a href="#" class="design">Design</a></li>
    <li><a href="#" class="puppet">Puppetry</a></li>
    <li><a href="#" class="multimedia">Multimedia</a></li>
  </ul>
  <!-- /.nav -->
</div>
<!-- content -->
<div id="content">
    <!-- .thumbs -->
    <ul class="thumbs">
    <li class="first"><a href="images/images/h-slide4.jpg" rel="empty"><img src="images/images/h-thumb4.jpg" alt="description" /></a></li>
    <li></li>
    <li><a href="images/images/standin-slide1.jpg" rel="produce"><img src="images/images/sus-thumb7.jpg" alt="description" /></a></li>
    <li><a href="images/images/sus-slide1.jpg" rel="produce puppet"><img src="images/images/sus-thumb1.jpg" alt="description" /></a></li>
    <li><a href="images/images/sus-slide2.jpg" rel="puppet design"><img src="images/images/sus-thumb2.jpg" alt="description" /></a></li>
    <li><a href="images/images/sus-slide4.jpg" rel="multimedia"><img src="images/images/sus-thumb4.jpg" alt="description" /></a></li>
    <li><a href="images/images/sus-slide6.jpg" rel="produce multimedia puppet"><img src="images/images/sus-thumb6.jpg" alt="description" /></a></li>
    <li></li>

***对于第一个列表元素，其中rel =“empty”我不希望该缩略图亮起来。我试着离开rel =“”，但是任何点击都会点亮缩略图。其他列表元素显示了我尝试多个标记的示例。

gallery.js：

$(".nav li a.produce").click(function(){

$("ul.thumbs").find("span").hide();
$(".nav li a").removeClass("current");
$("ul.thumbs a").css("opacity", "1");
$(this).addClass("current");
$("ul.thumbs a[rel=design], ul.thumbs a[rel=puppet], ul.thumbs a[rel=multimedia]").animate({opacity: ".2"}, "slow").parent().append("<span></span>");
        return false;
    });

Answer 1

我不明白你为什么要使用rel。使用class属性似乎是更好的匹配。您有必要使用rel吗？我不确定你使用它的方式是否有效。

如果你改用了类，你可以用你提到的相同方式添加倍数（class = "puppet design"可以工作）。

Answer 2

@Chrissi是对的（+1）。您应该改为使用 classes ，这样您就可以将content匹配的类与所选class项的nav进行比较

你基本上需要两个功能：

第一个：

点击nav项目
通过content

类

将rel属性设置为这些项目，以便它们属于nav项目选择的同一个图库

......所以：

$('.nav a').on("click", function() {
    var className = $(this).attr("class"); // get class name of nav item
    var thisClass = "." + className; // builds a class selector from class name
    // get content items that matches the selector class and set the same rel attribute
    $(".thumbs a").filter(thisClass).attr({
        "rel": className,
        "title": className // optional
    }).first().trigger("click"); // fires gallery from first item
}); // on

第二个：

将所有选择器从内容绑定到fancybox
过滤class="empty"，因此无法在fancybox中打开（什么都不做）
在关闭

rel

......所以：

$(".thumbs a").fancybox({
    beforeLoad: function() {
        if ($(this.element).hasClass("empty")) {
            return false; // ignores item with class="empty"
        }
    },
    afterClose: function() {
        $(this.element).removeAttr("rel title"); // remove rel after close
    }
});

由于最后一个功能将所有内容的项目绑定到fancybox，如果单独点击它们，它们将在任何图库中的fancybox中打开，除了使用class="empty"

参见 JSFIDDLE

注意：

.on()需要jQuery v1.7 +
此演示使用fancybox v2.1.3 +

如何将多个标签/字符串添加到rel =“value”

2 个答案: