11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour tout le monde, je cherche un coup de main de quelqu’un connaissant bien le javascript, car je n'arrive pas à faire ce que je voudrais.

Je cherche à adapter ce très beau plugin sur mon site:
http://tympanus.net/codrops/2010/06/27/beautiful-photo-stack-gallery-with-jquery-and-css3/
Seulement la méthode de récupération par PHP des image ne me convient pas.

Actuellement le plugin fonctionne avec ce petit bout de php qui vas chercher les photos sur le serveur, dans un dossier album, ou se trouve d'autre dossier nommé album1, album2 etc.. ou se trouve les photos.


$location 	= 'albums';
$album_name	= $_GET['album_name'];
$files 		= glob($location . '/' . $album_name . '/*.{jpg,gif,png}', GLOB_BRACE);
$encoded 	= json_encode($files);
echo $encoded;
unset($encoded);


Et ensuite c'est exploité de cette façon dans le javascript:

/**
				* when we click on an album,
				* we load with AJAX the list of pictures for that album.
				* we randomly rotate them except the last one, which is
				* the one the User sees first. We also resize and center each image.
				*/
				$ps_albums.children('div').bind('click',function(){
					var $elem = $(this);
					var album_name 	= 'album' + parseInt($elem.index() + 1);
					var $loading 	= $('<div />',{className:'loading'});
					$elem.append($loading);
					$ps_container.find('img').remove();
				 
					
					$.get('photostack.php', {album_name:album_name} , function(data) {
						var items_count	= data.length;
						for(var i = 0; i < items_count; ++i){
							var item_source = data[i];
							var cnt 		= 0;
							$('<img />').load(function(){
								var $image = $(this);
								++cnt;
								resizeCenterImage($image);
								$ps_container.append($image);
								var r		= Math.floor(Math.random()*41)-20;
								if(cnt < items_count){
									$image.css({
										'-moz-transform'	:'rotate('+r+'deg)',
										'-webkit-transform'	:'rotate('+r+'deg)',
										'transform'			:'rotate('+r+'deg)'
									});
								}
								if(cnt == items_count){
									$loading.remove();
									$ps_container.show();
									$ps_close.show();
									$ps_overlay.show();
								}
							}).attr('src',item_source);
						}
					},'json');
					
				});



Ce que j'aimerai faire c'est me passer de ce bout de php, et récupérer les images directement dans le javascript, depuis des liens que je placerai directement dans ma page html.
Je pensais récupérer les images à charger avec quelque chose du style:

var $image = $('.maliste li a').attr("href");


Et en créant sur ma la html une liste de liens vers les photo que je cacherai si je lejavascript est activé.
du style:

<ul class="maliste hide">
<li><a href="IMG/test_a.jpg">image</a></li>
<li><a href="IMG/test_b.jpg">image</a></li>
<li><a href="IMG/test_c.jpg">image</a></li>
</ul>


Seulement je n'arrive à modifier le javascript en conséquence.
Est ce que quelqu’un comprend suffisamment ce language pour m’aider à remplace l'appel php par cette méthode de récupération des liens dans l'html ?

Merci d'avance pour celui qui prendra le temps de me répondre, j'ai conscienceque le problème n'est pas si facile.

Cordialement.[/i]
Bonjour...

EN premier lieu je dirai... oui il est pas mal... mais bon faut aimer


Bon ensuite se pose cette question : Pour quoi veux tu te passer du php ??? t'as pas php sur ton serveur ???

L'enlever ne changera pas la vitesse de chargement où la gestion du plugin...

une solution envisageable...

Sachant que le php retourne un json_encode...

appelle LA page php directement pour voir le format exact lu par le code js...
un truc entre [ ]

Sinon si tu avait regardé le code source de la démo... tu y trouverais précisément ce que tu veux faire, les quelques images de la démo sont placées directement dans le code !!
Bonjour, merci pour ta réponse.

Pour les gout et les couleurs, oui certes Smiley smile ...

Pour le PHP je souhaite m'en passé car je désire installer ce plugin sur un site utilisant un CMS (spip); aussi j’aimerai automatiser la création des albums; sans avoir à faire passer les utilisateur du site par le ftp pour ajouter des albums, mais simplement en leur faisant écrire un article dans l'admin.
si je maitrisais le php il y aurai surement moyen de se débrouiller avec SPIP directement, mais ce n'est pas mon cas.J'aurai donc souhaiter générer via un article une liste de lien, et me servir de cette liste de lien pour le javascript, plustot que faire appel aux images sur le serveur via du php.

Lorsque j'appel la page photostack.php je ne vois justement que : [ ] vide.. je l'appel surement mal... Mais pourquoi je ne sais pas.

Pour la démo, je l'ai pourtant regardé de prêt et je ne comprend pas pourquoi tu dis que les images sont placé directement dans le code ? Je ne vois cela nul part cela, alors soit il y a quelquechose que je n'ai pas vu, soit tu n'as pas compris ce que je souhaitais ?

Merci tout de même Smiley smile