Advertisement
Guest User

Untitled

a guest
Aug 28th, 2013
42
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 3.13 KB | None | 0 0
  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. });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement