forum.coppermine-gallery.net

Support => cpg1.5.x Support => cpg1.5 miscellaneous => Topic started by: nikkiivampire on August 07, 2016, 10:42:44 am

Title: Thumbnail hover Slideshow
Post by: nikkiivampire on August 07, 2016, 10:42:44 am

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]

<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>


Title: Re: Thumbnail hover Slideshow
Post by: Αndré on August 15, 2016, 04:33:50 pm

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.