Discussion :

[R2dread2]

Bonjour,
j'ai un petit soucis de compréhension,
Voici mon code Html:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<div id="imageRow">
					<a class="single first" href="img/lb/examples/image-3.jpg" rel="lightbox[plants]" title="Click on the right side of the image to move forward."><img src="" alt="Plants: image 1 0f 4 thumb" /></a>
 
					<a class="single" href="img/lb/examples/image-4.jpg" rel="lightbox[plants]" title="Alternately you can press the right arrow key." ><img src="" alt="Plants: image 2 0f 4 thumb" /></a>
 
					<a class="single" href="img/lb/examples/image-5.jpg" rel="lightbox[plants]" title="The script preloads the next image in the set as you're viewing."><img src="" alt="Plants: image 3 0f 4 thumb" /></a>
 
					<a class="single last" href="img/lb/examples/image-6.jpg" rel="lightbox[plants]" title="Click the X or anywhere outside the image to close"><img src="" alt="Plants: image 4 0f 4 thumb" /></a>
	 		</div>

et voici mon js (je veux faire un chargement image par image, ce n'est surement pas la meilleur solution, les suggestions sont les bienvenues):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
	var url='img/';
	var imgs= ['thumb-3.jpg', 'thumb-4.jpg', 'thumb-5.jpg', 'thumb-6.jpg'];
	var img;
	for( i=0; i!= imgs.length; i++){
		img=$('#imageRow').children().children()[i];
		img.src=url+imgs[i];
	}

Le soucis c'est que $('#imageRow').children().children()[i]; me retourne un [object HTMLImageElement] et non pas un "élément" jQuery car je voudrai utiliser une la fonction .load() par la suite mais je ne peux pas sur un [object HTMLImageElement] et j'aimerai bien comprendre pourquoi un tel retour.
Merci d'avance!

Edit: Bon c'est finalement pas très étonnant, il ne reste plus qu'à trouver la solution qui doit ressembler à quelque chose du style:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
/*Draft*/
function loadImg(){
	var url='img/';
	var imgs= ['thumb-3.jpg', 'thumb-4.jpg', 'thumb-5.jpg', 'thumb-6.jpg'];
	var img;
	i=0;
	while(i!= imgs.length){
		img=$('#imageRow').find('img');
		img.attr('src', imgs[i]);
		img.load(function() {
			i++;
		});
	}

R2.

[SpaceFrog]

le [0] ou get(0) te fais redescendre au niveau du DOM, tu n'as dons plus un element jquery mais un élément du DOM

pour rester au niveau de jquery :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

img=$('#imageRow').children().children(':eq('+i+')');

[SpaceFrog]

mais autant rester avec les possibilités de jquery

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
	var url='img/';
	var imgs= ['thumb-3.jpg', 'thumb-4.jpg', 'thumb-5.jpg', 'thumb-6.jpg'];
	var img;
	$('#imageRow').find('img').each( function(){
                                                                $(this).attr('src',   url+imgs[$(this).index('img')]                                   });
	}

[R2dread2]

Ok super, je regarde ça merci!

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
	var url='img/lb/examples/';
	var imgs= ['thumb-3.jpg', 'thumb-4.jpg', 'thumb-5.jpg', 'thumb-6.jpg'];
 
	$('#imageRow').find('img').each( function(){
		$(this).delay(800).attr('src', url+imgs[($(this).index('img')-2)]);
		$(this).removeClass('loading');
	});
	/*

je ne sais pas pourquoi, je suis obligé de "reculer" de 2 dans le tableau, j'ai pas trop cherché, de 1 j'aurai compris de 2 c'est un peut étrange mais ça marche.
(Par contre le delay(800) ne marche pas)

[danielhagnoul]

Bonsoir

Tous les chemins mènent à Rome, une autre voie :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
var urlStr = "iimg/lb/examples/",
    imgsTab = [ "thumb-3.jpg", "thumb-4.jpg", "thumb-5.jpg", "thumb-6.jpg" ];
 
$( "img", "#imageRow" ).each( function( i, item ){
 
    item.src = urlStr + imgsTab[ i ];
 
    $( item ).removeClass( "loading" );
});

$( "img", "#imageRow" ) est équivalent à $( "#imageRow" ).find( "img" ) et presque aussi rapide depuis jQuery 1.8 et +.

item.src , JS brut, est équivalent à votre $('#imageRow').children().children()[i];.

La méthode delay() permet seulement de retarder une animation en jQuery. En JS brut, il existe setTimeout et setInterval pour imposer un délai à un script.

Plusieurs personnes parlent de JS Vanilla au lieu de JS brut, mais Vanilla JS est un framework, il y a un risque de confusion.

[ABCIWEB]

Plusieurs personnes parlent de JS Vanilla au lieu de JS brut, mais Vanilla JS est un framework, il y a un risque de confusion.

Bah au moins je serai au courant, je ne connaissais pas ces expressions et pour dire JS brut, je disais simplement JS

[Bovino]

mais Vanilla JS est un framework

Non, pas vraiment en fait
C'est juste un projet du type vapor.js ou js.js dont le code source se résume à

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

// Voici l'ensemble du framework

Histoire de rappeler qu'on peut aussi faire du JavaScript sans framework.

[danielhagnoul]

Oui : http://vanilla-js.com/ !

J'ai vu Vanilla JS dans une liste de frameworks JS et bien entendu, vu l'avalanche de choses disponible pour JS ces derniers temps, je n'ai pas regardé la chose dans le détail.

C'est seulement une bonne blague et je me suis fait avoir !

Dorénavant, comme ceux qui savent, je parlerais donc de Vanilla JS et plus de JS brut.