Bonjours à tous !
J'ai suivi un tuto sur Alsacréation pour créer une galerie d'image en Jquery. Elle fonctionne parfaitement bien mais uniquement sous Firefox sous Chrome et Safari mes images grands format ne s'affichent pas...
Lorsque je regarde l'outil de développements de Chrome je remarque qu'il ne prends pas en compte la div qui contient les images grands format...
Sauriez-vous pourquoi cette div n'est pas pris en compte sous Chrome et Safari ?
Voila un lien vers la page du site qui contient ma galerie: http://www.astral-lyon.com/WordPressAstral/?main=Magasin
Voila mon code Javascript:
Merci d'avance !
Antoine.
Modifié par antoine2011 (20 Aug 2013 - 11:16)
J'ai suivi un tuto sur Alsacréation pour créer une galerie d'image en Jquery. Elle fonctionne parfaitement bien mais uniquement sous Firefox sous Chrome et Safari mes images grands format ne s'affichent pas...
Lorsque je regarde l'outil de développements de Chrome je remarque qu'il ne prends pas en compte la div qui contient les images grands format...
Sauriez-vous pourquoi cette div n'est pas pris en compte sous Chrome et Safari ?
Voila un lien vers la page du site qui contient ma galerie: http://www.astral-lyon.com/WordPressAstral/?main=Magasin
Voila mon code Javascript:
jQuery(function($){
var settings = {
thumbListId: "thumbs",
imgViewerId: "viewer",
activeClass: "active",
activeTitle: "Photo en cours de visualisation",
loaderTitle: "Chargement en cours",
loaderImage: "wp-content/themes/Astral/images/loader.gif"
};
var thumbLinks = $("#"+settings.thumbListId).find("a"),
firstThumbLink = thumbLinks.eq(0),
highlight = function(elt){
thumbLinks.removeClass(settings.activeClass).removeAttr("title");
elt.addClass(settings.activeClass).attr("title",settings.activeTitle);
},
loader = $(document.createElement("img")).attr({
alt: settings.loaderTitle,
title: settings.loaderTitle,
src: settings.loaderImage
});
highlight(firstThumbLink);
$("#"+settings.thumbListId).after(
$(document.createElement("p"))
.attr("id",settings.imgViewerId)
.append(
$(document.createElement("img")).attr({
alt: "",
src: firstThumbLink.attr("href")
})
)
);
var imgViewer = $("#"+settings.imgViewerId),
bigPic = imgViewer.children("img");
thumbLinks
.click(function(e){
e.preventDefault();
var $this = $(this),
target = $this.attr("href");
if (bigPic.attr("src") == target) return;
highlight($this);
imgViewer.html(loader);
bigPic
.load(function(){
imgViewer.html($(this).fadeIn(250));
})
.attr("src",target);
});
});
Merci d'avance !
Antoine.
Modifié par antoine2011 (20 Aug 2013 - 11:16)