Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <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");
- }
- })
- });
- });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement