View difference between Paste ID: ZKWEKVc1 and YF6cekeP
SHOW: | | - or go back to the newest paste.
1
/*!
2
 * NextGEN Slideshow based on jQuery Cycle Plugin
3
 * Copyright (c) 2010-2012 Alex Rabe
4
 * Version: 1.0.6
5
 * Requires: jQuery v1.2.6 or later
6
 */
7
jQuery.fn.nggSlideshow = function ( args ) { 
8
    
9
    var defaults = { id:    1,
10
                     width: 320,
11
                     height: 240,
12
                     fx: 	'fade',
13
                     domain: '',
14
                     timeout: 5000 };
15
                     
16
    var s = jQuery.extend( {}, defaults, args);
17
    
18
    var obj = this.selector;
19
    var stack = [];
20
	var desc = []; //MOD: stack for alt text
21
    var url = s.domain + 'index.php?callback=json&api_key=true&format=json&method=gallery&id=' + s.id;
22
	/*  
23
		the stackLength var will store stack length for ref - it is quicker to ref memory than make a call to find an obj property
24
		stack length is first collected in jQuery.getJSON(); stack length is auto-decremented in loadImage() + jCycle_onBefore()
25
	*/
26
	var stackLength = 0; 
27
28
	jQuery.getJSON(url, function(r){
29
		
30
		if (r.stat == "ok"){
31
            
32
            for (img in r.images) {
33
				var photo = r.images[img];
34
                //populate images into an array
35
                stack.push( decodeURI( photo['imageURL'] ) );
36
				desc.push( decodeURI( photo['alttext'] ) ); //MOD: get alttext
37
            }
38
			stackLength = stack.length; 
39
			// init loading first 3 images (param 1 in func is first pass)
40
			loadImage(1); 
41
		}
42
	});
43
	
44
	// load image and bind appendImage() to the img load - here we are making sure the loads do not get displaced
45
	function loadImage(num){
46
         // check that stack is not empty and we haven't alreay loaded 3 images	   
47
         if(stackLength > 0 && num <= 3) { 
48
            var img = new Image(); 
49
            img.src = stack.shift();
50
			img.alt = desc.shift(); //MOD: append alt text
51
			stackLength--;
52
			// wait to append image until the load is complete
53
        	jQuery( img ).one('load', function() { appendImage(img, num); }).each(function(){
54
        		// IE browser : in case it's already cached
55
        		if(this.complete) jQuery(this).trigger('load');	
56
        	});
57
         }
58
	}
59
	
60
	// append image to obj
61
	function appendImage(img, num){
62
	     // Hide them first, Cycle plugin will show them
63
         jQuery( img ).hide();		 
64
         // Add the image now and resize after loaded 
65
		 jQuery( obj ).append( imageResize(img, s.width , s.height) );
66
         // start slideshow with third image, load next image if not
67
		 if (num == 3 || stackLength == 0 ) { 
68
         	startSlideshow(); 
69
		 } else {
70
		 	loadImage(++num); // increase index and load next image
71
         }
72
		 
73
	}
74
75
    function startSlideshow() {
76
		
77
		
78-
		jQuery( 'div#ngg-js-slideshow-caption' ).hide().text( obj.alt ); //MOD: (init) sets alt text to desired object
78+
		jQuery( 'div#ngg-js-slideshow-caption' ).text( obj.alt ); //MOD: (init) sets alt text to desired object
79-
		jQuery( 'div.ngg-slideshow img' ).mouseenter( function() {
79+
80-
			jQuery( 'div#ngg-js-slideshow-caption' ).fadeIn('fast'); 
80+
81-
		});
81+
82-
		jQuery( 'div.ngg-slideshow img' ).mouseleave( function() {
82+
83-
			jQuery( 'div#ngg-js-slideshow-caption' ).fadeOut('fast'); 
83+
84-
		});
84+
85
			
86
        	jQuery( obj ).cycle( {
87
        		fx: 	s.fx,
88
                containerResize: 1,
89
                fit: 1,
90
                timeout: s.timeout,
91
                next:   obj,
92
                before: jCycle_onBefore
93
        	});
94
			
95
        });
96
        
97
    }
98
99
    //Resize Image and keep ratio on client side, better move to server side later
100
    function imageResize(img, maxWidth , maxHeight) {
101
102
        // we need to wait until the image is loaded
103
        if ( !img.complete )
104
            jQuery( img ).bind('load', function() { imageResize(img, maxWidth , maxHeight) });
105
106
        // in some cases the image is not loaded, we can't resize them
107
        if (img.height == 0 || img.width == 0)
108
            return img;
109
 
110
        var width, height;
111
112
        if (img.width * maxHeight > img.height * maxWidth) {
113
            // img has a wider ratio than target size, make width fit
114
    		if (img.width > maxWidth) {
115
    			width = maxWidth;
116
    			height = Math.round(img.height / img.width * maxWidth);
117
    		}
118
        } else {
119
            // img has a less wide ratio than target size, make height fit
120
    		if (img.height > maxHeight) {
121
    			height = maxHeight;
122
    			width = Math.round(img.width / img.height * maxHeight);
123
    		}
124
        }
125
  
126
        jQuery( img ).css({
127
          'height': height,
128
          'width': width
129
        });
130
                
131
        return img;
132
	};
133
134
    // add images to slideshow step by step
135
    function jCycle_onBefore(curr, next, opts) {
136
        if (opts.addSlide)
137
            if (stackLength > 0){ // check that stack is not empty
138
                var img = new Image(); 
139
                img.src = stack.shift();
140
				stackLength--;
141
                jQuery( img ).bind('load', function() {
142
                    opts.addSlide( imageResize(this, s.width , s.height) );                     
143
                });
144
            }
145
		jQuery( 'div#ngg-js-slideshow-caption' ).text( next.alt ); //MOD: (cycle) sets alt text to desired object
146
    }; 
147
}