Galerie défilante

Bonjour à tous,

J'ai réalisé une galerie de photos défilantes pour le site Incentive France


Voici le code javascript :

var starthp1=-150;
var starthp2=0;
var endhp=150;
var pitch=0.1;
var delay=30;

function slide() {
var gal1=document.getElementById('galery1');
var gal2=document.getElementById('galery2');

if (starthp1 < endhp) {
	gal1.style.left=(starthp1+=pitch)+"%";
	if (starthp2 < endhp) {
		gal2.style.left=(starthp2+=pitch)+"%";}
	else{
		starthp2=-150;endhp=150}
	}
else {
	starthp1=-150;endhp=150;
	}

setTimeout (slide,delay);
}

Les éléments galery1 et galery2 sont 2 listes identiques de photos. Chacune des 2 listes passent successivement l'une devant l'autre pour donner une impression de boucle. Je voudrais améliorer la sémantique de mon code XHTML en n'utilisant qu'une seule liste de photo .

Auriez-vous une solution ? merci !

Bonjour,

La présence de deux listes ou d'une seule ne fait aucune différence "sémantique". C'est plutôt une question d'élégance du code, indifférente pour l'utilisateur ou tout autre script traitant la page.

Je pensais que ça pouvait etre différent pour les moteurs de recherche.

Mais il y a d'autres problèmes finalement plus important. Ma galerie fait la totalité de la largeur de l'écran quelque soit la résolution de l'écran, alors que mes 2 galeries de photos ont un nombre fixe de photo, leur largeur a donc une limite maximale en pixel. Il y aura donc un problème pour les très grands écran, les 2 galeries seraient alors séparées par une bande blanche. Il y a d'ailleurs déjà une bande blanche qui apparait progressivement, ceci étant peut etre du à une approximation du positionnement des galeries en pourcenticentage par rapport aux pixels de l'écran.

Donc je cherche plutot à changer complètement le code pour avoir un comportement de ce type :

function slide() {
var startpos = -(largeur de la 1ere photo de la liste);
galery1.style.left = startpos;
var pitch=1;
var delay=30;

if (largeur de l'écran > (largeur galery1 + largeur de la première photo)) {
ajouter des photos pour que (largeur de l'écran < (largeur galery1 + largeur de la première photo)) }

else {
galery1.style.left=(startpos+=pitch)+"px";
if (startpos == 0) {
la dernière photo de la liste devient la 1ere photo de la liste;
startpos = -(largeur de la nouvelle première photo); }
}

setTimeout (slide,delay);
}

avec toutes les dimensions en pixels

Voici finalement le script que j'ai adopté après quelques heures de travail sur le site http://www.incentive-france.com

var photos = getElementsByClassName('photos',document);
var n = photos.length;
var photosWidth = 0;
for(var i=0;i<n;i++)
	photosWidth += photos[i].width;
photosWidth = Math.floor(photosWidth/2);

var start1=-photosWidth;
var end=photosWidth;
var start2=0;
var pitch=1;
var delay=30;

function slide() {
var photos = getElementsByClassName('photos',document);
var n = photos.length;


var photosWidth = 0;
for(var i=0;i<n;i++)
	photosWidth += photos[i].width;
photosWidth = Math.floor(photosWidth/2);


var screenWidth = 0;
if (document.documentElement && document.documentElement.clientWidth)
	 screenWidth = document.documentElement.clientWidth;
else if (document.body && document.body.clientWidth)
	 screenWidth = document.body.clientWidth;


var gal1 = document.getElementById('galery1');
var gal2 = document.getElementById('galery2');


if (photosWidth<screenWidth) {
		var remainWidth = screenWidth - photosWidth;
		var j=0;	
		var m = Math.floor(n/2);
		photosWidth = 0;
		while ((photosWidth += photos[j].width) <= (remainWidth + 200)) {	
			var k = j + m;
			var row1 = photos[j].parentNode;
			var row2 = photos[k].parentNode;
			var photo1 = row1.cloneNode(true);
			var photo2 = row2.cloneNode(true);
			gal1.appendChild(photo1);
			gal2.appendChild(photo2);
			j++;
		}
		var ph = getElementsByClassName('photos',document);
		for(var i=0;i<n;i++)
		photosWidth += ph[i].width;
		photosWidth = Math.floor(photosWidth/2);
	}

if (start1 < end) {

	gal1.style.left=(start1+=pitch)+"px";
	if (start2 < end)
		gal2.style.left=(start2+=pitch)+"px";
	else {
		start2=-photosWidth;
		end=photosWidth; }
	}
else {
	start1=-photosWidth;
	end=photosWidth;
	}

setTimeout (slide,delay);
} 

Il y a encore un petit problème, il y a un espace d'une cinquantaine de pixels entre galery1 et galery2. Je me demande donc d'où ça pas venir. Est-ce que vous avez une idée ? merci[/i][/i][/i]