Advanced search  

News:

CPG Release 1.6.26
Correct PHP8.2 issues with user and language managers.
Additional fixes for PHP 8.2
Correct PHP8 error with SMF 2.0 bridge.
Correct IPTC supplimental category parsing.
Download and info HERE

Pages: [1]   Go Down

Author Topic: Thumbnail hover Slideshow  (Read 2828 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.018 seconds with 20 queries.