<body>
<div id="galleryWrap">
<div id="seleccionGalerias">
<div class="photoFecha" data-fecha="enero">Enero</div>
<div class="photoFecha" data-fecha="febrero">Febrero</div>
<div class="photoFecha" data-fecha="marzo">Marzo</div>
<div class="photoFecha" data-fecha="abril">Abril</div>
</div>
<div id="fotosGalerias"></div>
<div id="clearFix"></div>
</div>
<div id="debugg">Texto</div>
<div id="selectPhoto">
<div class="photoContain enero" data-show="enero">
<img src="/Imagenes/Mandala/xfs_thumbs/mandala (1).jpg" alt="thumb1" />
<img src="/Imagenes/Mandala/xfs_thumbs/mandala (2).jpg" alt="thumb2" />
<img src="/Imagenes/Mandala/xfs_thumbs/mandala (3).jpg" alt="thumb3" />
<img src="/Imagenes/Mandala/xfs_thumbs/mandala (4).jpg" alt="thumb1" />
<img src="/Imagenes/Mandala/xfs_thumbs/mandala (5).jpg" alt="thumb2" />
<img src="/Imagenes/Mandala/xfs_thumbs/mandala (6).jpg" alt="thumb3" /> </div>
<div class="photoContain febrero" data-show="febrero"> <img src="/Imagenes/Mandala/xfs_thumbs/mandala (4).jpg" alt="thumb1" /> <img src="/Imagenes/Mandala/xfs_thumbs/mandala (5).jpg" alt="thumb2" /> <img src="/Imagenes/Mandala/xfs_thumbs/mandala (6).jpg" alt="thumb3" /> </div>
</div>
<div id="showPhotos">
<div class="pic topImg">
<p>BigBro</p></div>
<div class="pic bottomImg">
<p>LilBro</p></div>
<div class="picpictures"></div>
</div>
<div id="bigPicture">
<div class="bigContain enero">
<img src="/Imagenes/Mandala/mandala (1).jpg"alt="uno" />
<img src="/Imagenes/Mandala/mandala (2).jpg"alt="dos" />
<img src="/Imagenes/Mandala/mandala (3).jpg"alt="tres" />
<img src="/Imagenes/Mandala/mandala (4).jpg" alt="cuatro" /> </div>
<div class="bigContain febrero">
<img src="/Imagenes/Mandala/mandalaRoto1.jpg"alt="acuatro" />
<img src="/Imagenes/Mandala/mandalaRoto2.jpg"alt="acinco" />
<img src="/Imagenes/Mandala/mandalaRoto3.jpg"alt="aseis" />
</div>
</div>
<div class="button nextS"><p>Next</p></div>
<div class="button prevS">Prev</div>
<div class="text">
<p>i am text </p>
</div>
$(".photoContain img").on("click",function(){
var thumbPlace = $(this).index();
var thumbClass = $(this).parent().attr("data-show");
var selectGalery = $("#bigPicture").children("." + thumbClass);
var selectedImg = $(selectGalery).children().eq(thumbPlace);
var photoSlide = $("#showPhotos .pic").eq(0);
$(selectedImg).clone().appendTo(photoSlide);
});
$(".button.nextS").on("click",function(){
var bigbro = $("#showPhotos .pic.topImg");
var lilbro = $("#showPhotos .pic.bottomImg");
var picAlt = $("#showPhotos .pic img").attr("alt");
var nextPic = $("#bigPicture .bigContain img[alt='"+picAlt+"']").next();
var borrar = $("#showPhotos .pic:first-child");
lilbro.css("right","900px").removeClass("bottomImg").addClass("topImg").empty().append(nextPic);
lilbro.animate({
right:"0px"},{
duration:1000,
complete:function(){
bigbro.removeClass("topImg","current").addClass("bottomImg");
}
})
});
});