[en cours] Galerie d'images

(reprise du message précédent)

Petit message pour prévenir d'une petite mise à jour : le nombre d'image n'est plus limité à 9 mais à 99.
Pour le reste, c'est toujours un peu la même chose...
Modifié par 20cent (06 Jun 2005 - 14:02)

Voilà la chose que j'avais faite

function previewNextPic()
{
	var existentPics = new Array(); // tableau pour recueillir les images existantes
	var diaporama = document.getElementById('images');
	var photos = diaporama.getElementsByTagName('img');
	// listing des images existantes
	for (var p = 0; p < photos.length; ++p) {
		existentPics[p] = photos[p].parentNode.getAttribute('id');
	}
	
	// récupération de l'image courante, si pas d'image sélectionnée explicitement dans l'url, on sélectione la première
	var currentUrl = String(window.location);
	
	if (currentUrl.lastIndexOf('#') > 0) {
		var currentPic = currentUrl.substring(currentUrl.lastIndexOf('#') + 1, currentUrl.length);
	} else {
		currentPic = existentPics[0];
	}

	// détermination des images précédentes et suivantes
	for (var k = 0; k < existentPics.length; ++k) {
		if (existentPics[k] == currentPic) {
			var previewPic = existentPics[k-1];
			var nextPic = existentPics[k+1];
		}
	}
	
	ul = document.getElementById('controles2');
	if (ul) {
		var as = ul.getElementsByTagName('a');
		var previewLi = (document.getElementById('previewLi')) ? true : false;
		var nextLi = (document.getElementById('nextLi')) ? true : false;
		
		if (previewPic) {
			if (!previewLi) {
				createPrevLink(previewPic);
			}
			
			if (!nextLi) {
				createNextLink(nextPic);
			}
			
			as[0].setAttribute('href','#'+previewPic);
		} else {
			ul.removeChild(ul.firstChild);
		}
		
		if (nextPic) {
			if (!previewLi) {
				createPrevLink(previewPic);
			}
			
			if (!nextLi) {
				createNextLink(nextPic);
			}
			
			as[1].setAttribute('href','#'+nextPic);
		} else {
			ul.removeChild(ul.lastChild);
		}
		
	} else {
		createLink(previewPic, nextPic);
	}
}

function createLink(previewPic, nextPic)
{	
	var diaporama = (document.getElementById('diaporama'));
	diaporama.appendChild(document.createElement('ul'));
	diaporama.lastChild.setAttribute('id','controles2');
	ul = document.getElementById('controles2');

	if (previewPic) {
		createPrevLink(previewPic);
	}
	
	if (nextPic) {
		createNextLink(nextPic);
	}
}

function createPrevLink(previewPic) {
	ul.appendChild(document.createElement('li'));
	ul.firstChild.setAttribute('id','previewLi');
	ul.firstChild.appendChild(document.createElement('a'));
	ul.firstChild.firstChild.setAttribute('href','#'+previewPic);
	ul.firstChild.firstChild.appendChild(document.createTextNode('Image précédente'));
}

function createNextLink(nextPic) {
	ul.appendChild(document.createElement('li'));
	ul.firstChild.setAttribute('id','nextLi');
	ul.lastChild.appendChild(document.createElement('a'));
	ul.lastChild.firstChild.setAttribute('href','#'+nextPic);
	ul.lastChild.firstChild.appendChild(document.createTextNode('Image suivante'));
}

function manageLink()
{
	as = document.getElementById('diaporama').getElementsByTagName('a');
	for (var j = 0; j < as.length; ++j) {
		as[j].onclick = function() {
			document.location = this.href;
			previewNextPic();
			return false;
		}
	}
}

window.onload = function()
{
	previewNextPic();
	manageLink();	
};

Je m'y remet bientôt et là je reprend tout depuis le début au propre parceque là je crois que ça craint.
En plus, ça merdouille au niveau de la gestion des "suivant/précédent"

Tiens ? Pourquoi est-ce dans "Le Bar du forum" ?

Y a eu du déménagement :
http://forum.alsacreations.com/topic.php?fid=9&tid=4392

D'ailleurs, si tu peux mettre un [ projet ] dans le titre du sujet
Modifié par Olivier (08 Jun 2005 - 15:08)

Ah oui d'accord !

Initialement je l'avais placé dans "DOM, JavaScript, ECMAScript".
Il y avait sa place je trouve.

20cent a écrit :
Ah oui d'accord !

Initialement je l'avais placé dans "DOM, JavaScript, ECMAScript".
Il y avait sa place je trouve.

Ah ben moi je n'ai fait que le déplacer à partir du défunt salon "Projet".
Il a dû voyager ton sujet !

Boing boing boing, c'est le topic balladeur !
Le revoilà dans le salon JS

Bon, une fois qu'on aura terminé un truc propre, faudra reprendre tout ça parceque là ça devient le bordel !

<humour> Après la "Salsa de Véro" : http://forum.alsacreations.com/topic.php?fid=23&tid=4384&s= , la "Java des Topics" !

Frappez pas, vi vi, c'est l'heure j'aille déjeuner...
Modifié par Macpom (09 Jun 2005 - 12:13)

salut, je cherche le même script qui permettrait d'afficher 4 ou 5 images à la fois et de naviguer par des fléches ou par "suivant" "précédent". Chaque image miniature serait agrandie aussi à droite, et ainsi de suite pour chaque image. Comment transformer ce script pour arriver à cela? Merci

Bonjour,

Il me semble qu'il n'existe pas de version propre du script avec fonction suivant / précédent aux vues de ce que j'ai cherché sur le forum.
C'est fort dommage, j'adore la version originale de ce script, propre, minimaliste et diablement efficace . Son seul soucis est qu'en cas de longue liste d'image il est imposible d'afficher sur une même page une liste de vignette de taille honorable et l'image à afficher sans utiliser les barres de défilement. Des liens suivants / précédents rendrait le script absolument parfait.

Est ce qu'une version propre de ce script avec les boutons suivant/précédent sans bug est au programme ?
Merci.

Fred

La dernière version de ma galerie d'image est disponible sur mon site.
Et je suis toujours d'accord pour un coup de main si des améliorations sont possibles.

20cent a écrit :
La dernière version de ma galerie d'image est disponible sur mon site.
Et je suis toujours d'accord pour un coup de main si des améliorations sont possibles.

sympa, sympa, je vais approfondir de mon coté pour voir ce que je peux y modifier éventuellement, il fonctionne plutot bien pour l'instant

merci

Fred

Tiens moi au courant si tu veux bien.