JAVASCRIPT   24

jquery wmphotoset js

Guest on 18th August 2022 12:45:55 PM

  1. /* Create a responsive photo slideshow
  2. TLB
  3. May
  4. */
  5. (function( $ ){
  6.     $.fn.wmPhotoset = function(options) {
  7.     return this.each(function() {
  8.        
  9.         function viewport() {
  10.             var e = window, a = 'inner';
  11.             if (!('innerWidth' in window )) {
  12.                 a = 'client';
  13.                 e = document.documentElement || document.body;
  14.             }
  15.             return { width : e[ a+'Width' ] , height : e[ a+'Height' ] };
  16.          }
  17.        
  18.         var ltIE8 = ($(".lt-ie8").length > 0);
  19.         var captionPadding = 10;
  20.         var bodyWidth = viewport().width;//$("body").width();
  21.        
  22.         var photoRatio = 265.0/475.0;
  23.                
  24.         var imgHeight = 265 + 7; // add border
  25.         if (bodyWidth <= 505) {
  26.             imgHeight = Math.round(bodyWidth * photoRatio) - 10;
  27.         }
  28.        
  29.         var numPhotos = $("#wm-photoset li").length;
  30.         if (numPhotos == 1) {
  31.             $(this).addClass("single-photo");
  32.             setPhotosetHeight(imgHeight, 1);
  33.         } else {
  34.             var currentPhoto = 1;
  35.             var photosetClosedHeight = 0;
  36.            
  37.             // hide all but the first photo
  38.             $("#wm-photoset li").hide();
  39.             $("#wm-photoset li").first().show();
  40.            
  41.             // create the bases for the previous and next buttons
  42.             var prevBtn = '<button id="prev-photo"></button>';
  43.             var nextBtn = '<button id="next-photo"></button>';
  44.            
  45.             // add navigation
  46.             pagination = '<div id="pagination">';
  47.             for (j = 1; j <= numPhotos; j++) {
  48.                 pagination += '<a name="goto-photo'+j+'"';
  49.                 pagination += '>'+j+'</a> ';
  50.             }
  51.             pagination += '</div><div id="pg_ratio"><span class="current_pg_num">1</span> / <span class="total_pg_num">'+numPhotos+'</span></div>';
  52.             /** Responsive, moving caption around based on device **/
  53.             if ((bodyWidth > 940) && !ltIE8) { // use mobile stylesheet only for lt IE8
  54.                 $(this).append('<div id="wm-photo-nav">'+prevBtn+nextBtn+pagination+'</div>');
  55.             } else {
  56.                 $("#wm-photoset li .wmphotoset-caption .wmphotoset-caption-text").hide(); // hide all the captions
  57.                 $("#wm-photoset li .wmphotoset-caption").append('<button class="about_photo">about this photo</button>');
  58.                 setShowHideCaption();
  59.                 $("#wm-photoset li:first-child .wmphotoset-caption").before('<div id="wm-photo-nav">'+prevBtn+nextBtn+pagination+'</div>'); // add navigation to first element
  60.                 firstCaption = $("#wm-photoset li:first-child .wmphotoset-caption .wmphotoset-caption-text").clone().show(); // separate out caption text to put in slider
  61.                 $("#wm-photoset li:first-child .wmphotoset-caption").after('<div id="wmphotoset-caption-slider"></div>'); // add slider
  62.                 $("#wm-photoset #wmphotoset-caption-slider").append(firstCaption); // add caption text to slider
  63.    
  64.                 setPhotosetHeight(imgHeight, 1);
  65.             }
  66.            
  67.             checkPrevNext();
  68.             $("#wm-photo-nav a:first-child").addClass("active");
  69.             $("#pagination a").click(function() {
  70.                 goToPhoto(parseInt($(this).attr("name").substr(10)));
  71.             });    
  72.             $("#prev-photo").click(function() {
  73.                 goToPhoto(currentPhoto - 1);    
  74.             });
  75.             $("#wm-photoset li img").swipe({
  76.                 swipeLeft:function(event, direction, distance, duration, fingerCount) {
  77.                     goToPhoto(currentPhoto + 1);
  78.                 },
  79.                 swipeRight:function(event, direction, distance, duration, fingerCount) {
  80.                     goToPhoto(currentPhoto - 1);
  81.                 }
  82.             });
  83.            
  84.             $("#next-photo").click(function() {
  85.                 goToPhoto(currentPhoto + 1);    
  86.             });
  87.         }
  88.        
  89.         function setShowHideCaption() {
  90.             // toggle caption visibility
  91.             $("#wm-photoset .about_photo").click(function(){
  92.                 if ($(this).hasClass("caption_open")) {
  93.                     $("#wm-photoset").animate({
  94.                         height: photosetClosedHeight
  95.                     });
  96.                     $("#wm-photoset .about_photo").removeClass("caption_open");
  97.                 } else {
  98.                     $("#wm-photoset .about_photo").addClass("caption_open");
  99.                     $("#wm-photoset").animate({
  100.                         height: photosetClosedHeight + $("#wmphotoset-caption-slider").outerHeight() + captionPadding
  101.                     });
  102.                 }
  103.             });
  104.            
  105.         }
  106.        
  107.         function setPhotosetHeight(imgHeight, pos) {
  108.             if (imgHeight == 0) {
  109.                 imgHeight = $("#wm-photoset li:nth-child("+pos+") img").outerHeight();  
  110.             }
  111.             heightCaption = $("#wm-photoset li:nth-child("+pos+") .wmphotoset-caption").css("height","auto").innerHeight();
  112.             photosetClosedHeight = imgHeight + heightCaption;
  113.             if (!$("#wm-photoset li:nth-child("+pos+") .wmphotoset-caption").hasClass("single-photo")) {
  114.                  photosetClosedHeight = photosetClosedHeight + captionPadding;
  115.             }
  116.             if ($("#wm-photoset li:nth-child("+pos+") .about_photo").hasClass("caption_open") && $("#wmphotoset-caption-slider").length > 0) {
  117.                 $("#wm-photoset").animate({
  118.                     height: photosetClosedHeight + $("#wmphotoset-caption-slider").outerHeight() + captionPadding
  119.                 });
  120.             } else {
  121.                 $("#wm-photoset").animate({
  122.                     height: photosetClosedHeight    
  123.                 });
  124.             }
  125.         }
  126.        
  127.         function checkPrevNext() {
  128.             $('#prev-photo').removeAttr("disabled");
  129.             $('#next-photo').removeAttr("disabled");
  130.             if (currentPhoto == 1) {
  131.                 $('#prev-photo').attr("disabled", "disabled");
  132.             } else if (currentPhoto == numPhotos) {
  133.                 $('#next-photo').attr("disabled", "disabled");
  134.             }
  135.         }
  136.        
  137.         function goToPhoto(photoIndex) {
  138.             if (photoIndex < 1) {
  139.                 photoIndex = 1;
  140.             } else if (photoIndex > numPhotos) {
  141.                 photoIndex = numPhotos;
  142.             }
  143.             $("#wm-photoset li").fadeOut(400, function(){
  144.                 bodyWidth = viewport().width;//$("body").width();
  145.                 if (bodyWidth <= 940) {
  146.                     nav = $("#wm-photo-nav").detach();
  147.                     slider = $("#wm-photoset #wmphotoset-caption-slider").detach();
  148.                     $("#wm-photoset li:nth-child("+photoIndex+") .wmphotoset-caption").before(nav).after(slider);
  149.                     theCaption = $("#wm-photoset li:nth-child("+photoIndex+") .wmphotoset-caption .wmphotoset-caption-text").clone().show();
  150.                     $("#wm-photoset #wmphotoset-caption-slider").empty().append(theCaption);
  151.                 }
  152.             });
  153.             $("#wm-photo-nav .current_pg_num").text(photoIndex);
  154.             $("#wm-photoset li:nth-child("+photoIndex+")").fadeIn();
  155.             $("#wm-photo-nav a").removeClass("active");
  156.             $("#wm-photo-nav a:nth-child("+photoIndex+")").addClass("active");
  157.             currentPhoto = photoIndex;
  158.             checkPrevNext();
  159.             setPhotosetHeight(0, photoIndex);
  160.         }
  161.        
  162.         // Add in a bit of delay on resizing the window so that the height adjustment isn't so slow
  163.         var resizeTimeout = false;
  164.         var delta = 250;
  165.        
  166.         $(window).resize(function(){ // Move the photo nav based on device size
  167.             clearTimeout(resizeTimeout);
  168.             // handle normal resize
  169.             resizeTimeout = setTimeout(function() {
  170.                 resizeEnd();
  171.             }, delta);
  172.         });
  173.        
  174.         function resizeEnd() {
  175.             bodyWidth = viewport().width; //$("body").width();
  176.             if (bodyWidth > 940) {
  177.                 if ($(".about_photo").length > 0) { // if was tablet/mobile view before, convert to desktop
  178.                     nav = $("#wm-photo-nav").detach();
  179.                     $("#wm-photoset").append(nav);
  180.                     $("#wm-photoset li .wmphotoset-caption .wmphotoset-caption-text").show();
  181.                     $("#wmphotoset-caption-slider").remove();
  182.                     $(".about_photo").remove();
  183.                 }
  184.             } else {
  185.                 // Adjust caption height
  186.                 pos = 1;
  187.                 if (numPhotos > 1) {
  188.                     photoIndex = parseInt($("#pagination a.active").attr("name").substr(10));
  189.                     if ($(".about_photo").length == 0) { // if was desktop view, transition to tablet/mobile                        
  190.                         // Add "about this photo" button
  191.                         $("#wm-photoset li .wmphotoset-caption").append('<button class="about_photo">about this photo</button>');
  192.                         setShowHideCaption();
  193.                         // move caption
  194.                         nav = $("#wm-photo-nav").detach();
  195.                         $("#wm-photoset li:nth-child("+photoIndex+") .wmphotoset-caption").after('<div id="wmphotoset-caption-slider"></div>');
  196.                         $("#wm-photoset li:nth-child("+photoIndex+") .wmphotoset-caption").before(nav);
  197.                         $("#wm-photoset li .wmphotoset-caption .wmphotoset-caption-text").hide();
  198.                         theCaption = $("#wm-photoset li:nth-child("+photoIndex+") .wmphotoset-caption .wmphotoset-caption-text").clone().show();
  199.                         $("#wm-photoset #wmphotoset-caption-slider").empty().append(theCaption);
  200.                     }
  201.                     pos = photoIndex;
  202.                 }
  203.                 setPhotosetHeight(0, pos); // always adjust height in case the javascript wasn't fast enough
  204.             }  
  205.         }
  206.        
  207.     });
  208.     }
  209. }) ( jQuery );

Raw Paste


Login or Register to edit or fork this paste. It's free.