https://fsd.pl/asp/jscore/jcarousel/tutorial.js

1jQuery(function(){
2	 var liczbael;
3    var slideshow;
4	 var slideshowPause;
5        slideshowPause = 7; // sekundy
6		  liczbael = jQuery('#rotator2 li').length;
7    jQuery('#rotator2 li').each(function(idx) {
8        jQuery(this).data('index', (++idx));
9    });
10    jQuery('#rotator2').jcarousel({
11        scroll: 1,
12	vertical: true,
13        initCallback: initCallbackFunction
14    })
15
16    function initCallbackFunction(carousel) {
17        jQuery('#img').bind('image-loaded',function() {
18            var idx =  jQuery('#rotator2 li.active').data('index') - 2;
19
20            carousel.scroll(idx);
21            return false;
22        });
23    };
24
25    // load and fade-in thumbnails
26    jQuery('#rotator2 li img').css('opacity', 0).each(function() {
27        if (this.complete || this.readyState == 'complete') {
28			jQuery(this).animate({'opacity': 1}, 300);
29		  } else {
30			jQuery(this).load(function() {
31				jQuery(this).animate({'opacity': 1}, 300) });
32			}
33    });
34
35	 
36    jQuery('#rotator2').galleria({
37        // #img is the empty div which holds full size images
38        insert: '#img',
39
40        // enable history plugin
41        history: false,
42        // function fired when the image is displayed
43        onImage: function(image, caption, thumb) {
44            // fade in the image
45
46            image.hide().fadeIn(1000);
47
48            // animate active thumbnail's opacity to 1, other list elements to 0.6
49            thumb.parent().fadeTo(200, 1).siblings().fadeTo(200, 0.6)
50            jQuery('#img')
51                .trigger('image-loaded')
52                .hover(
53					      function(){
54								jQuery('.caption2').stop().animate({height: jQuery('.caption2').css('height','').css('height')}, 250);
55
56//						 		window.clearInterval(slideshow);
57							},
58                    function(){
59                        if (!jQuery('#show-caption').is(':checked')) {
60
61                            //jQuery('#img .caption').stop().animate({height: 0}, 250)
62                        }
63                    }
64                )
65					 .click(
66					 		function(){
67	                      if (thumb.attr("name").length > 0)
68                         {
69                               window.location.href = thumb.attr("name");
70                         }
71							}
72					 )
73        },
74        // function similar to onImage, but fired when thumbnail is displayed
75        onThumb: function(thumb) {
76            var jQueryli = thumb.parent(),
77                opacity = jQueryli.is('.active') ? 1 : 0.6;
78
79            // hover effects for list elements
80            jQueryli.hover(
81                function() { jQueryli.fadeTo(200, 1);
82					 		if(liczbael>1){window.clearInterval(slideshow);}
83//						 jQuery('li.active span').css('color', '#FF0000');
84					  },
85                function() { jQueryli.not('.active').fadeTo(200, opacity);
86  				 		 if(liczbael>1){slideshow = window.setInterval(function(){jQuery.galleria.next()}, slideshowPause * 1000)}
87					 }
88            )
89        }
90    }).find('li:first').addClass('active') // display first image when Galleria is loaded
91
92    jQuery('.caption2').css('height', 0)
93
94    jQuery('#slideshow').hide()
95
96    // this one is for Firefox, which loves to leave fields checked after page refresh
97    jQuery('#toggle-slideshow, #show-caption').removeAttr('checked')
98
99	 jQuery('.caption2').stop().animate({height: jQuery('.caption2').css('height','').css('height')}, 250)
100
101    jQuery('#slideshow-pause').change(function(){
102		 if(liczbael>1){
103         slideshowPause = this.value
104
105        // clear interval when timeout is changed
106         window.clearInterval(slideshow)
107
108        // and set new interval with new timeout value
109         slideshow = window.setInterval(function(){
110             jQuery.galleria.next()
111         }, slideshowPause * 1000) // must be set in milisecond
112		 }
113    })
114    jQuery('#slideshow').fadeIn()
115           // set interval when slideshow is enabled
116   	 if(liczbael>1){
117		    slideshow = window.setInterval(function(){
118				    jQuery.galleria.next()
119		    }

119, slideshowPause * 1000)
120		 }
121});