1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
|
(function($){
$(document).ready(
function (){
$("#pikame").PikaChoose();
});
$(document).ready(
function (){
$("#pikame_user").PikaChoose({user_thumbs:true, show_prev_next:false});
});
$(document).ready(
function (){
$("#pikame_compact").PikaChoose({user_thumbs:true, show_prev_next:false});
});
/* thanks to Antonio Terceiro for suggestion and implementation of the multi lang support*/
jQuery.iPikaChoose = {
build : function(user_options)
{
var defaults = {
show_captions: true,
slide_enabled: false,
auto_play: false,
show_prev_next: false,
slide_speed: 5000,
thumb_width: 90,
thumb_height: 60,
delay_caption: false,
user_thumbs: false
};
return jQuery(this).each(
function() {
function LoadImages()
{
jQuery(this).bind("load", function()
{
//had to make a seperate function so that the thumbnails wouldn't have problems
//from beings resized before loaded, thus not h/w
//delete hidden image to clean up things.
jQuery(this).parent('div').prev().remove();
images = jQuery(this).parents('ul').find('img');
var w = jQuery(this).width();
var h = jQuery(this).height();
if(w===0){w = jQuery(this).attr("width");}
if(h===0){h = jQuery(this).attr("height");}
//grab a ratio for image to user defined settings
var rw = options.thumb_width/w;
var rh = options.thumb_height/h;
//determine which has the smallest ratio (thus needing
//to be the side we use to scale so our whole thumb is filled)
var ratio;
if(rw<rh){
//we'll use ratio later to scale and not distort
ratio = rh;
var left = ((w*ratio-options.thumb_width)/2)*-1;
left = Math.round(left);
//set images left offset to match
jQuery(this).css({left:left});
}else{
ratio = rw;
//you can uncoment this lines to have the vertical picture centered
//but usually tall photos have the focal point at the top...
var top = ((h*ratio-options.thumb_height)/2)*-1;
var top = Math.round(top);
var top = 0;
jQuery(this).css({top:top});
}
//use those ratios to calculate scale
var width = Math.round(w*ratio);
var height = Math.round(h*ratio);
jQuery(this).css("position","relative");
jQuery(this).width(width).height(height);
var imgcss={
width: width,
height: height
};
jQuery(this).css(imgcss);
jQuery(this).hover(
function(){jQuery(this).fadeTo(250,1);},
function(){if(!jQuery(this).hasClass("pika_selected")){jQuery(this).fadeTo(250,0.4);}}
);
jQuery(this).fadeTo(250,0.4);
if(jQuery(this).hasClass('pika_first')){
jQuery(this).trigger("click",["auto"]);
}
});
//clone so the on loads will fire correctly
var newImage = jQuery(this).clone(true).insertAfter(this);
jQuery(this).hide();
//reset images to the clones
images = ulist.children('li').children('img');
}
//bring in options
var options = jQuery.extend(defaults, user_options);
// grab our images
var images = jQuery(this).children('li').children('img');
//hide the images so the user doesn't see crap
images.fadeOut(1);
//save our list for future ref
var ulist = jQuery(this);
images.each(LoadImages);
//start building structure
jQuery(this).before("<div class='pika_main'></div>");
// houses eveything about the UL
var main_div = jQuery(this).prev(".pika_main");
//add in slideshow elements when appropriate
/*if(options.slide_enabled){
main_div.append("<div class='pika_play'></div>");
var play_div = jQuery(this).prev(".pika_main").children(".pika_play");
play_div.html("<a class='pika_play_button'>" + options.buttons_text.play + "</a><a class='pika_stop_button'>" + options.buttons_text.stop + "</a>");
play_div.fadeOut(1);
var play_anchor = play_div.children('a:first');
var stop_anchor = play_div.children('a:last');
}*/
//this div is used to make image and caption fade together
main_div.append("<div class='pika_subdiv'></div>");
var sub_div = main_div.children(".pika_subdiv");
//the main image we'll be using to load
sub_div.append("<img class='pika_back_img'/><img class='pika_main_img' />");
var main_img = sub_div.children("img:last");
var back_img = sub_div.children("img:first");
//build custom overlays. These will use navigation div
sub_div.append("<div class='pika_prev_hover'></div><div class='pika_next_hover'></div>");
var prevHover = sub_div.find('.pika_prev_hover');
var nextHover = sub_div.find('.pika_next_hover');
prevHover.hide();
nextHover.hide();
//create the caption div when appropriate
if(options.show_captions){
main_div.append("<div class='pika_caption'></div>");
var caption_div = main_div.children(".pika_caption");
}
//navigation div ALWAYS gets created, its refrenced a lot
jQuery(this).after("<div class='pika_navigation'></div>");
var navigation_div = jQuery(this).next(".pika_navigation");
//fill in sub elements
/*navigation_div.prepend("<a>" + options.buttons_text.previous + "</a> :: <a>" + options.buttons_text.next + "</a>");
var previous_image_anchor = navigation_div.children('a:first');
var next_image_anchor = navigation_div.children('a:last');*/
//hide the navigation if the user doesn't want it
if(!options.show_prev_next){
navigation_div.css("display","none");
}
//playing triggers the loop for the slideshow
var playing = options.auto_play;
main_img.wrap("<a></a>");
var main_link = main_img.parent("a");
function activate()
{
//sets the intial phase for everything
//image_click is controls the fading
images.bind("click",image_click);
//hiding refrence to slide elements if slide is disabled
if(options.slide_enabled){
if(options.auto_play){
playing = true;
play_anchor.hide();
stop_anchor.show();
}else{
play_anchor.show();
stop_anchor.hide();
}
}
ulist.children("li:last").children("img").addClass("pika_last");
ulist.children("li:first").children("img").addClass("pika_first");
ulist.children("li").each(function(){ jQuery(this).children("span").hide(); });
//css for the list
var divcss = {
width: options.thumb_width+"px",
height: options.thumb_height+"px",
"list-style": "none",
overflow: "hidden"
};
var licss = {
"list-style": "none",
overflow: "hidden"
};
images.each(function(){
jQuery(this).parent('li').css(licss);
jQuery(this).wrap(document.createElement("div"));
jQuery(this).parent('div').css(divcss);
//jQuery(this).parent('li').css(licss);
//fixes a bug where images don't get the correct display after loading
if(jQuery(this).attr('complete')===true && jQuery(this).css('display')=="none")
{
jQuery(this).css({display:'inline'});
}
});
/*//previous link to go back an image
previous_image_anchor.bind("click",previous_image);
prevHover.bind("click",previous_image);
//ditto for forward, also the item that gets auto clicked for slideshow
next_image_anchor.bind("click",next_image);
nextHover.bind("click",next_image); */
//enable mouse tracking for the hover
sub_div.mousemove(function(e){
var w = sub_div.width();
var x = e.pageX - sub_div.offset().left;
if(x<w*0.3)
{
prevHover.fadeIn('fast');
}else{
prevHover.fadeOut('fast');
}
if(x>w*0.7)
{
nextHover.fadeIn('fast');
}else{
nextHover.fadeOut('fast');
}
});
sub_div.mouseleave(function(){ prevHover.fadeOut('fast');nextHover.fadeOut('fast'); });
}//end activate function
function image_click(event, how){
//catch when user clicks on an image Then cancel current slideshow
if(how!="auto"){
if(options.slide_enabled){
stop_anchor.hide();
play_anchor.show();
playing=false;
}
main_img.stop();
main_img.dequeue();
if(options.show_captions)
{
caption_div.stop();
caption_div.dequeue();
}
}
//all our image variables
if(options.user_thumbs)
{
var image_source = jQuery(this).attr("ref");
}else
{
var image_source = this.src;
}
var image_link = jQuery(this).attr("rel");
var image_caption = jQuery(this).parent().next("span").html();
//fade out the old thumb
images.filter(".pika_selected").fadeTo(250,0.4);
images.filter(".pika_selected").removeClass("pika_selected");
//fade in the new thumb
jQuery(this).fadeTo(250,1);
jQuery(this).addClass("pika_selected");
//fade the caption out
if(options.show_captions)
{
if(options.delay_caption)
{
caption_div.fadeTo(800,0);
}
caption_div.fadeTo(500,0,function(){
caption_div.html(image_caption);
caption_div.fadeTo(800,1);
});
}
//set back imge = main_img
var delay = 100;
if(main_img.attr('opacity') < 0.8)
{
delay = 500;
}
back_img.attr("src", main_img.attr("src"));
main_img.fadeTo(delay,0.00,function(){
//make the image fade in on load, which should hopefully get rid of any jumping
main_img.unbind('load');
main_img.bind('load',function()
{
main_img.fadeTo(800,1,function(){
if(playing){
jQuery(this).animate({opactiy:1},options.slide_speed, function(){
//redudency needed here to catch the user clicking on an image during a change.
if(playing){next_image_anchor.trigger("click",["auto"]);}
});
}
//reset it here to catch initial load.
back_img.attr("src", main_img.attr("src"));
});
});
main_img.attr("src",image_source);
main_link.attr("href", image_link);
});
}//end image_click function
function next_image(event, how){
if(images.filter(".pika_selected").hasClass("pika_last")){
images.filter(":first").trigger("click",how);
}else{
images.filter(".pika_selected").parents('li').next('li').find('img').trigger("click",how);
}
}//end next image function
/*function previous_image(event, how){
if(images.filter(".pika_selected").hasClass("pika_first")){
images.filter(":last").trigger("click",how);
}else{
images.filter(".pika_selected").parents('li').prev('li').find('img').trigger("click",how);
}
}//end previous image function*/
function play_button(){
main_div.hover(
function(){play_div.fadeIn(400);},
function(){play_div.fadeOut(400);}
);
play_anchor.bind("click", function(){
main_img.stop();
main_img.dequeue();
if(options.show_captions)
{
caption_div.stop();
caption_div.dequeue();
}
playing = true;
next_image_anchor.trigger("click",["auto"]);
jQuery(this).hide();
stop_anchor.show();
});
stop_anchor.bind("click", function(){
playing = false;
jQuery(this).hide();
play_anchor.show();
});
}
if(options.slide_enabled){play_button();}
activate();
});//end return this.each
}//end build function
//activate applies the appropriate actions to all the different parts of the structure.
//and loads the sets the first image
};//end jquery.ipikachoose
jQuery.fn.PikaChoose = jQuery.iPikaChoose.build;
})(jQuery); |
Compatibilité Jquery et Mootools
Répondre avec citation
Envoyé par danielhagnoul
Partager