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