Advertisement
cherryprodesign

Coppermine Album Slideshow on thumbnail hover

Jul 16th, 2016
93
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <script src="https://code.jquery.com/jquery-3.1.0.min.js" ></script>
  2.     <script>
  3.         var slideshow;
  4.         $('a.albums').hover(function(){
  5.             var url = $(this).attr('href');
  6.             var i = 0;
  7.             if( $(this).find('img').attr('src').includes('thumb_nopic.png') )
  8.                 return;
  9.             var thumbs = [];
  10.             $.ajax({
  11.                url: url,
  12.                async:false,
  13.                success: function(data) {
  14.                    $("img.image.thumbnail", data).each(function() {
  15.                       thumbs.push( $(this).attr("src").toString() );
  16.                    });
  17.                }
  18.             });
  19.             var _link = this;
  20.             $(this).find('img').css({'background-image': 'url('+$(this).find("img").attr("src")+')', 'background-size': 'cover','object-position': '-99999px 99999px', 'transition': 'background-image .25s'});
  21.             slideshow = setInterval(function(){
  22.                 $(_link).find('img').css({'background-image': 'url('+thumbs[i]+')'});
  23.                 if( i < thumbs.length-1)
  24.                         i++;
  25.                 else i = 0;
  26.             }, 1000);
  27.         }, function(){
  28.             clearInterval(slideshow);
  29.         });
  30.     </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement