jQuery - Multiple expanding galleries in tabs

Question

I'm trying to get this code " Reveal gallery by Roko C. Buljan " - http://jsbin.com/zariku/9/edit?html,css,js,output - to work in multiple tabs here:

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 tab is working fine, but, when I'll try to open the first one the div isn't shown on the right position.

Can anyone please help me with a hint?

Answer 1

You're trying to use the same preview div for both gallerys. Try having 2 previews. Quickest way I could think would be do to something like this (be warned, this is kinda ugly):

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");
    });
});

And then modify the preview 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>

Thought it looked weird so threw in the necessary css changes:

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