This week only. Pastebin PRO Accounts Christmas Special! Don't miss out!Want more features on Pastebin? Sign Up, it's FREE!
Guest

Untitled

By: a guest on Aug 28th, 2013  |  syntax: None  |  size: 3.13 KB  |  views: 26  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. <body>
  2. <div id="galleryWrap">
  3.   <div id="seleccionGalerias">
  4.     <div class="photoFecha" data-fecha="enero">Enero</div>
  5.     <div class="photoFecha" data-fecha="febrero">Febrero</div>
  6.     <div class="photoFecha" data-fecha="marzo">Marzo</div>
  7.     <div class="photoFecha" data-fecha="abril">Abril</div>
  8.   </div>
  9.   <div id="fotosGalerias"></div>
  10.   <div id="clearFix"></div>
  11. </div>
  12. <div id="debugg">Texto</div>
  13. <div id="selectPhoto">
  14.   <div class="photoContain enero" data-show="enero">
  15.   <img src="/Imagenes/Mandala/xfs_thumbs/mandala (1).jpg"  alt="thumb1" />
  16.   <img src="/Imagenes/Mandala/xfs_thumbs/mandala (2).jpg" alt="thumb2" />
  17.   <img src="/Imagenes/Mandala/xfs_thumbs/mandala (3).jpg" alt="thumb3" />
  18.   <img src="/Imagenes/Mandala/xfs_thumbs/mandala (4).jpg"  alt="thumb1" />
  19.   <img src="/Imagenes/Mandala/xfs_thumbs/mandala (5).jpg" alt="thumb2" />
  20.   <img src="/Imagenes/Mandala/xfs_thumbs/mandala (6).jpg" alt="thumb3" /> </div>
  21.   <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>
  22. </div>
  23. <div id="showPhotos">
  24.   <div class="pic topImg">
  25.         <p>BigBro</p></div>
  26.   <div class="pic bottomImg">
  27.         <p>LilBro</p></div>
  28.   <div class="picpictures"></div>          
  29. </div>
  30. <div id="bigPicture">
  31.   <div class="bigContain enero">
  32.    <img src="/Imagenes/Mandala/mandala (1).jpg"alt="uno" />
  33.    <img src="/Imagenes/Mandala/mandala (2).jpg"alt="dos" />
  34.    <img src="/Imagenes/Mandala/mandala (3).jpg"alt="tres" />
  35.   <img src="/Imagenes/Mandala/mandala (4).jpg" alt="cuatro" /> </div>
  36.   <div class="bigContain febrero">
  37.     <img src="/Imagenes/Mandala/mandalaRoto1.jpg"alt="acuatro" />
  38.    <img src="/Imagenes/Mandala/mandalaRoto2.jpg"alt="acinco" />
  39.     <img src="/Imagenes/Mandala/mandalaRoto3.jpg"alt="aseis" />
  40.   </div>
  41. </div>
  42. <div class="button nextS"><p>Next</p></div>
  43. <div class="button prevS">Prev</div>
  44. <div class="text">
  45.   <p>i am text </p>
  46. </div>
  47.        
  48. $(".photoContain img").on("click",function(){
  49.        var thumbPlace = $(this).index();
  50.        var thumbClass = $(this).parent().attr("data-show");
  51.        var selectGalery = $("#bigPicture").children("." + thumbClass);
  52.        var selectedImg = $(selectGalery).children().eq(thumbPlace);
  53.        var photoSlide = $("#showPhotos .pic").eq(0);
  54.        $(selectedImg).clone().appendTo(photoSlide);
  55.     });
  56.        
  57. $(".button.nextS").on("click",function(){
  58.         var bigbro = $("#showPhotos .pic.topImg");
  59.         var lilbro = $("#showPhotos .pic.bottomImg");
  60.         var picAlt = $("#showPhotos .pic img").attr("alt");
  61.         var nextPic = $("#bigPicture .bigContain img[alt='"+picAlt+"']").next();
  62.         var borrar = $("#showPhotos .pic:first-child");
  63.         lilbro.css("right","900px").removeClass("bottomImg").addClass("topImg").empty().append(nextPic);
  64.         lilbro.animate({
  65.             right:"0px"},{
  66.                 duration:1000,
  67.                 complete:function(){
  68.                 bigbro.removeClass("topImg","current").addClass("bottomImg");
  69.                 }
  70.                 })
  71.     });
  72. });
clone this paste RAW Paste Data