1478 sujets

Web Mobile et responsive web design

Probleme: galerie d'images simple avec jQuery du 01/06/2009

N'ayant pas programmé depuis plus de 10 ans, j'ai des difficultés avec JQuery

Je voudrais créer une galerie d'images simple avec jQuery du 01/06/2009 avec le tutoriel de benjamin Dc.
Je ne comprends pas si lors des phases successives une partie en remplace une autre ou la complète.
si quelqu'un pouvait me transmettre les fichiers HTML et gallery.js finaux afin que je puisse étudier cette solution upload/63592-alsace.jpg

merci pour votre aide
Merci Allan, c'est ce que j'avais fais précédemment et recommencé sans succès d'affichage espéré .
Où ai je fait l'erreur ?

pour créer le fichier gallery.js j'ai copié chacune des séquences proposées sur la page dédiée et les ai empilé les unes sous les autres .

Ce serait cool de me copier le fichier gallery.js tels qu'il est en finalité, merci

dur, dur de s'y remettre après de longues années
Je pense que le code js est le même vu que c'est un article qui date de 2011, je doute qu'il ait été modifié. Vous copiez tout dans un fichier "gallery.js". Vous n'oubliez pas d'inclure la librairie jQuery avant le script "gallery.js".

Sinon, au pire, on peut coder ensemble. Ca ne semble pas difficile à reproduire ce script.

Peut-être qu'il voudrait mieux commencer par les tutoriels sur openclassrooms.
merci de me suivre et de m'aider

comme dans l'exemple J'ai mis les miniatures et images dans les répertoires images/small et images/big
Voici mon fichier "index.html " et plus bas "gallery.js"

-----------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>



<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>

<script src="gallery.js" type="text/javascript"></script>



</head>

<body>

<ul id="thumbs">
<li>
<a href="images/big/bernache.jpg">
<img alt="Photo grand format d'une famille de Bernaches du Canada"
src="images/small/bernache.png" />
</a>
</li>
<li>
<a href="images/big/bois.jpg">
<img alt="Photo grand format d'un sous bois"
src="images/small/bois.png" />
</a>
</li>
<li>
<a href="images/big/fleur.jpg">
<img alt="Photo grand format d'un cœur de fleur"
src="images/small/fleur.png" />
</a>
</li>
<li>
<a href="images/big/gouttelettes.jpg">
<img alt="Photo grand format de gouttelettes sur une toile d'araignée"
src="images/small/gouttelettes.png" />
</a>
</li>
<li>
<a href="images/big/rat.jpg">
<img alt="Photo grand format d'un rat des prés"
src="images/small/rat.png" />
</a>
</li>
</ul>


</body>
</html>




--------------------------------------------------------------------------------
et mon fichier gallery.js
------------------------


jQuery(document).ready(function(){
// Mon script
});
$(document).ready(function(){
// Mon script
});
jQuery(function($){
// Mon script
});
jQuery(function($){

$("#thumbs").after(
$(document.createElement("p"))
.attr("id","viewer")
);

});
jQuery(function($){

var settings = {
thumbListId: "thumbs",
imgViewerId: "viewer"
};

$("#"+settings.thumbListId).after(
$(document.createElement("p"))
.attr("id",settings.imgViewerId)
);

var imgViewer = $("#"+settings.imgViewerId);

});

jQuery(function($){

var settings = {
thumbListId: "thumbs",
imgViewerId: "viewer"
};

var thumbLinks = $("#"+settings.thumbListId).find("a"),
firstThumbLink = thumbLinks.eq(0);

$("#"+settings.thumbListId).after(
$(document.createElement("p"))
.attr("id",settings.imgViewerId)
);

var imgViewer = $("#"+settings.imgViewerId);

});

jQuery(function($){

var settings = {
thumbListId: "thumbs",
imgViewerId: "viewer"
};

var thumbLinks = $("#"+settings.thumbListId).find("a"),
firstThumbLink = thumbLinks.eq(0);

$("#"+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");

});



jQuery(function($){

var settings = {
thumbListId: "thumbs",
imgViewerId: "viewer"
};

var thumbLinks = $("#"+settings.thumbListId).find("a"),
firstThumbLink = thumbLinks.eq(0);

$("#"+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(){
// Actions à déclencher
});

});



jQuery(function($){

var settings = {
thumbListId: "thumbs",
imgViewerId: "viewer"
};

var thumbLinks = $("#"+settings.thumbListId).find("a"),
firstThumbLink = thumbLinks.eq(0);

$("#"+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();
});

});





jQuery(function($){

var settings = {
thumbListId: "thumbs",
imgViewerId: "viewer"
};

var thumbLinks = $("#"+settings.thumbListId).find("a"),
firstThumbLink = thumbLinks.eq(0);

$("#"+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;
bigPic
.attr("src",target);
});

});



jQuery(function($){

var settings = {
thumbListId: "thumbs",
imgViewerId: "viewer",
activeClass: "active",
activeTitle: "Photo en cours de visualisation"
};

var thumbLinks = $("#"+settings.thumbListId).find("a"),
firstThumbLink = thumbLinks.eq(0);

$("#"+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;
bigPic
.attr("src",target);
});

});




jQuery(function($){

var settings = {
thumbListId: "thumbs",
imgViewerId: "viewer",
activeClass: "active",
activeTitle: "Photo en cours de visualisation"
};

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

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);
bigPic
.attr("src",target);
});

});





body {background:#222;}
img {vertical-align:middle; border:none;}
#thumbs {overflow:auto; list-style:none; margin:30px; padding:0;}
#thumbs li {float:left;}
#thumbs a {display:block; padding:10px; outline:none;}
#thumbs a:hover, #thumbs a:focus {background:#fff;}
#thumbs a.active {background:#000;}
#viewer {width:700px; height:465px; margin-left:30px;}





jQuery(function($){

var settings = {
thumbListId: "thumbs",
imgViewerId: "viewer",
activeClass: "active",
activeTitle: "Photo en cours de visualisation",
loaderTitle: "Chargement en cours",
loaderImage: "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);
bigPic
.attr("src",target);
});

});




jQuery(function($){

var settings = {
thumbListId: "thumbs",
imgViewerId: "viewer",
activeClass: "active",
activeTitle: "Photo en cours de visualisation",
loaderTitle: "Chargement en cours",
loaderImage: "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);
});

});






body {background:#222;}
img {vertical-align:middle; border:none;}
#thumbs {overflow:auto; list-style:none; margin:30px; padding:0;}
#thumbs li {float:left;}
#thumbs a {display:block; padding:10px; outline:none;}
#thumbs a:hover, #thumbs a:focus {background:#fff;}
#thumbs a.active {background:#000;}
#viewer {position:relative; width:700px; height:465px; margin-left:30px;}
#viewer img[src*="loader"] {position:absolute; left:50%; top:50%; margin:-15px 0 0 -15px;}
Je pense qu'il a plusieurs choses à changer:

1 - Passer au html 5, c'est à dire <!DOCTYPE html> tout simplement, <meta charset='utf-8' />

2 - Les 2 balises scripts sont à placer AVANT la balise fermante <body>, vous appellez un script avant qu'il ne soit chargez sur la page.

3 - Il ne devrait pas avoir de déclarations css dans un fichier js. C'est à placer dans un fichier css qui serait appelé dans le <head> à l'aide de la balise <link>.
Bonjour
j'ai bien essayé de suivre vos conseils
je suis passé en HTML5

mais j'ai laissé ceci dans la HEAD et non avant la balise de fermeture Body

Par contre je ne sais pas quelle partie du script gallerie.js je dois passer dans un CSS.
alors je bloque toujours


------------------
Si vous avez encore un peu de temps à me consacrer, vous serait il possible de m'editer les 3 fichiers
- index
- gallery.js
- xxxx.css

je vous en remercie vraiment par avance car je voudrais vraiment progresser et publier une galerie de photos sur un site web (il est loin le temps du multiclic avec dreamveaver 2)
cordialement
Je comprends pas pourquoi vous tenez à ce script, un script qui date en plus.

Il existe plein de plugins jQuery pour créer une gallerie.

Mon préféré: http://lokeshdhakar.com/projects/lightbox2/

Très simple à mettre en place. Sinon, c'est un truc que je peux coder moi-même, au pire.

Les balises de script se place avant la balise de fermeture </body>.

J'ai regroupé les fichiers ici: http://codepen.io/anon/pen/LxVEze

Faudra juste changer les appels de fichiers d'images.
Merci Allan
Je pense maintenant pouvoir raccrocher les wagons avec des fichiers complets
Merci pour votre patience et collaboration
Sujet clos
Aller à