0

我正在使用fancybox 画廊模板。当您单击标题中的导航元素时，与 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=""，但随后任何点击都会亮起缩略图。其他列表元素显示了我尝试多个标签的示例。

画廊.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;
    });
4

2 回答 2

3

我不明白你为什么要使用rel这个。使用该class属性似乎会更好。你有理由需要使用rel吗？我不确定您使用它的方式是否有效。

如果您改用类，则可以按照您提到的相同方式添加倍数（class = "puppet design"可行）。

于 2012-11-20T00:46:45.880 回答
1

@Chrissi 是对的（+1）。您应该改用类，这样您就可以将匹配项中的哪些类与所选项目的类进行比较。contentclassnav

你基本上需要两个功能：

第一个 ：

  • 捕获对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

第二个 ：

  • 将所有选择器从内容绑定到花式框
  • 过滤，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+
于 2012-11-21T03:50:08.523 回答