Thumbnail hover Slideshow

[nikkiivampire]

Hey there!
I'm not sure, if I'm writing this in right place, but I would like to share with you my code for coppermine.
This code shows a slideshow on the albums page, whenever you move your mouse above a thumbnail of an album. This code should be added above </body> in the template file. Hope this will be useful for someone

I also added an image to this post.

Here is the code:

Code Select Expand


<script src="https://code.jquery.com/jquery-3.1.0.min.js" ></script>
    <script>
        var slideshow;
        $('a.albums').hover(function(){
            var url = $(this).attr('href');
            var i = 0;
            if( $(this).find('img').attr('src').includes('thumb_nopic.png') )
                return;
            var thumbs = [];
            $.ajax({
               url: url,
               async:false,
               success: function(data) {
                   $("img.image.thumbnail", data).each(function() {
                      thumbs.push( $(this).attr("src").toString() );
                   });
               }
            });
            var _link = this;
            $(this).find('img').css({'background-image': 'url('+$(this).find("img").attr("src")+')', 'background-size': 'cover','object-position': '-99999px 99999px', 'transition': 'background-image .25s'});
            slideshow = setInterval(function(){
                $(_link).find('img').css({'background-image': 'url('+thumbs[i]+')'});
                if( i < thumbs.length-1)
                        i++;
                else i = 0;
            }, 1000);
        }, function(){
            clearInterval(slideshow);
        });
    </script>


[Αndré]

Thank you for your contribution! Though it's a very easy to apply mod, I'd convert it to a genuine Coppermine plugin, as the plugin contribution board is a more prominent place for contributions. I volunteer for that task, if you don't want/can do this yourself.

IMHO the code should be improved by caching the already loaded thumbnails instead of performing an AJAX call on each hover. This improves performance for the server and the client.