jQuery-選項卡中的多個擴展畫廊

Question

我試圖讓這個代碼“ 顯示由ROKO C. Buljan畫廊 ” - http://jsbin.com/zariku/9/edit?html,css,js,output -在這里多個標簽的工作：

http://codepen.io/anon/pen/QjyMwg

JS：

var $prvw = $('#preview'),
$gall = $('.gooGallery'),
$li   = $gall.find("li"),
$img  = $prvw.find("img"),
$alt1 = $prvw.find("h2"),
$alt2 = $prvw.find("p"),
$full =  $("<li />", {"class":"full", html:$prvw});
$li.attr("data-src", function(i, v){
  $(this).css({backgroundImage: "url("+v+")"});
}).on("click", function( evt ){
  var $el = $(this),
      d = $el.data(),
      $clone = $full.clone();
  $el.toggleClass("active").siblings().removeClass("active");
  $prvw.hide();
  $full.after($clone);
  $clone.find(">div").slideUp(function(){
    $clone.remove();
  });
  if(!$el.hasClass("active")) return;
  $img.attr("src", d.src);
  $alt1.text(d.alt);
  $alt2.text(d.title);
  $li.filter(function(i, el){
    return el.getBoundingClientRect().top < evt.clientY;
  }).last().after($full);
  $prvw.slideDown();
});
$(window).on("resize", function(){
  $full.remove();
  $li.removeClass("active");
});

2nd選項卡工作正常，但是，當我嘗試打開第一個選項卡時，div不在正確的位置顯示。

誰能幫我一個提示嗎？

Answer 1

您正在嘗試對兩個畫廊使用相同的預覽div。 嘗試使用2個預覽。 我認為最快的方法是對這樣的事情進行處理（警告，這有點丑陋）：

var i = 1;
$('.gooGallery').each(function() {
    var $gall = $(this);
    var $prvw = $('#preview' + i); i = i+1;
    var $li = $gall.find("li")
    var $img = $prvw.find("img")
    var $alt1 = $prvw.find("h2")
    var $alt2 = $prvw.find("p")
    var $full = $("<li />", {
            "class" : "full",
            html : $prvw
        });

    $li.attr("data-src", function (i, v) {
        $(this).css({
            backgroundImage : "url(" + v + ")"
        });
    }).on("click", function (evt) {
        var $el = $(this),
        d = $el.data(),
        $clone = $full.clone(true);
        $el.toggleClass("active").siblings().removeClass("active");
        $prvw.hide();
        $full.after($clone);
        $clone.find(">div").slideUp(function () {
            $clone.remove();
        });
        if (!$el.hasClass("active"))
            return;
        $img.attr("src", d.src);
        $alt1.text(d.alt);
        $alt2.text(d.title);
        $li.filter(function (i, el) {
            return el.getBoundingClientRect().top < evt.clientY;
        }).last().after($full);
        $prvw.slideDown();
    });
    $(window).on("resize", function () {
        $full.remove();
        $li.removeClass("active");
    });
});

然后修改預覽div

<div id="preview1" class='preview'>
  <img src="//placehold.it/300x180/369">
  <div><h2></h2><p></p></div>
</div>
<div id="preview2" class='preview'>
  <img src="//placehold.it/300x180/369">
  <div><h2></h2><p></p></div>
</div>

以為它看起來很怪異，所以扔進了必要的CSS更改：

.preview{
  display:none;
}
.preview > *{
  float:left;
    margin:3%;
}
.preview img{
  max-width:100%;
}