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
|
jQuery(function($){
var settings = {
thumbListId: "thumbs",
imgViewerId: "viewer",
activeClass: "active",
activeTitle: "Photo en cours de visualisation",
loaderTitle: "Chargement en cours",
loaderImage: "./images/design/progress.gif"
};
var thumbLinks = $("#"+settings.thumbListId).find("a"),
firstThumbLink = thumbLinks.eq(10),
highlight = function(elt){
thumbLinks.removeClass(settings.activeClass).removeAttr("title");
elt.addClass(settings.activeClass).attr("title",settings.activeTitle);
},
loader = $(document.createElement("p")).append($(document.createElement("img")).attr({
alt: settings.loaderTitle,
title: settings.loaderTitle,
src: settings.loaderImage
}).addClass('loader'));
highlight(firstThumbLink);
$("#"+settings.thumbListId).after(
$(document.createElement('div')).attr("id","bigpic")
.append( $(document.createElement("p")).attr("id",settings.imgViewerId)
.append($(document.createElement("img")).attr( {
alt: firstThumbLink.find('img').attr("alt"),
src: firstThumbLink.attr("href")
})).append( $(document.createElement("span")).text( firstThumbLink.find('span').text() ) )
).append(loader)
);
var imgViewer = $("#"+settings.imgViewerId),
bigPic = imgViewer.children("img");
thumbLinks
.click(function(e){
e.preventDefault();
var $this = $(this);
if (bigPic.attr("src") == $this.attr("href")) return;
highlight($this);
imgViewer.fadeOut(400, function() {
imgViewer.children("img").load( function() {
imgViewer.find('span').text($this.find('span').text());
imgViewer.fadeIn(400);
} ).attr( { src: $this.attr("href"), alt: $this.find('img').attr('alt') } );
} );
});
});
$( function() {
$("#thumbs span").hide();
} ); |
Partager