Advanced search  

News:

cpg1.5.48 Security release - upgrade mandatory!
The Coppermine development team is releasing a security update for Coppermine in order to counter a recently discovered vulnerability. It is important that all users who run version cpg1.5.46 or older update to this latest version as soon as possible.
[more]

Pages: [1]   Go Down

Author Topic: Thumbnail hover Slideshow  (Read 2762 times)

0 Members and 1 Guest are viewing this topic.

nikkiivampire

  • Coppermine newbie
  • Offline Offline
  • Posts: 1
Thumbnail hover Slideshow
« 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>
Logged

Αndré

  • Administrator
  • Coppermine addict
  • *****
  • Country: de
  • Offline Offline
  • Gender: Male
  • Posts: 15764
Re: Thumbnail hover Slideshow
« Reply #1 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.
Logged
Pages: [1]   Go Up
 

Page created in 0.021 seconds with 20 queries.