Affichage images issues sql, avec fonction slide

Eléphant du PHP | 297 Messages

03 juin 2006, 04:30

Bonjour,
j'ai cherché dans le forum un sujet similaire a mon projet, mais pas trouvé.
Voila, je souhaite afficher des images suite a une requete sql, sur deux niveau :
le premier niveau , mes 3 images en miniatures, et sur
le niveau superieur une d'entre elle, par exemple la premiere par defaut
et qui sera affichée en format un peu plus grand.
comme ceci
1
123
jusqu'a la je pense me debrouiller :)
par contre je coince sur le principe de slide :cry:
soit je clique sur une miniature pour la voir en grand, ou
je clique sur une fleche pour faire defiler ces 3 images :?

bon ben si qlq peut m'aider, merci

Administrateur PHPfrance
Administrateur PHPfrance | 11457 Messages

03 juin 2006, 07:38

En gros et si j'ai bien tout compris, tu cherches à reproduire le mode d'affichage "pellicule"
que l'on peut avoir sous Windows XP, pour un dossier contenant des images ?

Eléphant du PHP | 297 Messages

03 juin 2006, 15:55

c'est exactement ça !

Modérateur PHPfrance
Modérateur PHPfrance | 7636 Messages

03 juin 2006, 17:17

Il y a quelque chose qui ressemble fortement à ce que tu veux chez alsacreations

/!\ Avant de poster se documenter et rechercher.
Qui ne sait pas rendre un service n'a pas le droit d'en demander.
MaBrute

Eléphant du PHP | 297 Messages

03 juin 2006, 17:53

salut Truc,
merci pour ton lien tres interessant.
C'est effectivement le meme resultat que je souhaite obtenir,
par contre j'ai l'impression que ca ne fonctionnera pas avec des
photos (les noms) provenant d'une base sql !!??

Modérateur PHPfrance
Modérateur PHPfrance | 7636 Messages

03 juin 2006, 18:40

peut importe la provenance des noms d'images du moment que le script est au complet. Avec le php tu boucles pour construire le javascript avec les noms d'images.

/!\ Avant de poster se documenter et rechercher.
Qui ne sait pas rendre un service n'a pas le droit d'en demander.
MaBrute

Eléphant du PHP | 297 Messages

05 juin 2006, 01:50

ok truc, effectivement ca marche impec avec des requetes et une jolie boucle ! :lol:
j'ai tout de meme deux petites questions...comme d'hab !
La premiere, je ne sais pas si ca sera possible...j'ai ma rangée de trois miniatures p1-p2-p3, et au dessus l'affichage d'une autre p+ qui est donc en fonction du choix des miniatures. ce qui donne
p+
p1-p2-p3
je souhaiterai que p+ soit egalement cliquable pour afficher la photo en beaucoup + grand sur une nouvelle page ou popup :? est-ce possible ?

et ma deuxieme qui est de l'ordre de mise en page,
mon tableau contenant p+ vire a gauche et mon tableau contenant p1, p2 et p3 vire a droite ! les deux tableaux sont pourtant centrer !!

voici le script:
<script>
function displayPics()
{
	var photos = document.getElementById('galerie_mini') ;
	// On récupère l'élément ayant pour id galerie_mini
	var liens = photos.getElementsByTagName('a') ;
	// On récupère dans une variable tous les liens contenu dans galerie_mini
	var big_photo = document.getElementById('big_pict') ;
	// Ici c'est l'élément ayant pour id big_pict qui est récupéré, c'est notre photo en taille normale

	// Une boucle parcourant l'ensemble des liens contenu dans galerie_mini
	for (var i = 0 ; i < liens.length ; ++i) {
		// Au clique sur ces liens 
		liens[i].onclick = function() {
			big_photo.src = this.href; // On change l'attribut src de l'image en le remplaçant par la valeur du lien
			big_photo.alt = this.title; // On change son titre
			return false; // Et pour finir on inhibe l'action réelle du lien
		};
	}
}
window.onload = displayPics;
// Il ne reste plus qu'à appeler notre fonction au chargement de la page
</script>
et l'affichage:
 <tr>
          <td width="200"><div align="center" class="Style25">
		  <dl id="photo">
		    <dt>
		      <div align="center">
		        <table width="195"  border="0" align="center" cellspacing="0">
                  <tr>
                    <td><div align="center"><a href="imagesboutique/<?php echo $row_livre['photo1g']; ?>"><img id="big_pict" src="imagesboutique/<?php echo $row_livre['photo1p']; ?>" width="190" height="190" border="1"></a></div></td>
                  </tr>
                </table>
		      </div>
		    </dt>
		    <ul id="galerie_mini">
                <table width="180"  border="0" align="center" cellspacing="0">
              <tr>
                <td><div align="center"><a href="imagesboutique/<?php echo $row_livre['photo1p']; ?>"><img src="imagesboutique/<?php echo $row_livre['photo1p']; ?>" width="60" height="60" border="1"></a></div></td>
                <td><div align="center"><a href="imagesboutique/<?php echo $row_livre['photo2p']; ?>"><img src="imagesboutique/<?php echo $row_livre['photo2p']; ?>" width="60" height="60" border="1"></a></div></td>
                <td><div align="center"><a href="imagesboutique/<?php echo $row_livre['photo3p']; ?>"><img src="imagesboutique/<?php echo $row_livre['photo3p']; ?>" width="60" height="60" border="1"></a></div></td>
              </tr>
            </table>
			</ul>
          </td>
hum apres reflexion, je ne suis peut-etre pas dans la bonne cathégorie de forum ,car c'est en grande partie du javascript :roll:

Avatar du membre
Administrateur PHPfrance
Administrateur PHPfrance | 13231 Messages

05 juin 2006, 09:48

hum apres reflexion, je ne suis peut-etre pas dans la bonne cathégorie de forum ,car c'est en grande partie du javascript :roll:
modération : Effectivement ;)
:arrow: sujet déplacé
Connaître son ignorance est la meilleure part de la connaissance
Pour un code lisible : n'hésitez pas à sauter des lignes et indenter

twitter - site perso - Github - Zend Certified Engineer

Modérateur PHPfrance
Modérateur PHPfrance | 7636 Messages

05 juin 2006, 12:07

je souhaiterai que p+ soit egalement cliquable pour afficher la photo en beaucoup + grand sur une nouvelle page ou popup :? est-ce possible ?
c'est possible avec un événement onclick sur l'image:
<img id="big_pict" src="imagesboutique/<?php echo $row_livre['photo1p']; ?>" width="190" height="190" border="1" onclick="popup(this)">
Code JS:
function popup(obj)
{
     var big_image = obj.src;
     window.open('imagesboutique/'+big_image);
}
et ma deuxieme qui est de l'ordre de mise en page,
mon tableau contenant p+ vire a gauche et mon tableau contenant p1, p2 et p3 vire a droite ! les deux tableaux sont pourtant centrer !!
Regarde du coté des imbrications et feuille de style pour l'image en grand tu as un <dl> et les miniatures <ul>.

/!\ Avant de poster se documenter et rechercher.
Qui ne sait pas rendre un service n'a pas le droit d'en demander.
MaBrute

Eléphant du PHP | 297 Messages

05 juin 2006, 16:28

Salut,
merci beaucoup Truc pour ton code. Il marche au poil !!
par contre j'ai oublié de preciser un detail lors de ma
derniere question :oops: , l'image p+ affiche les images
p1, p2, et p3 dans un format legerement plus grand mais sont
les meme images. par contre lorsque je clique sur p+ , c'est a ce
moment la que je souhaite faire appel a une image diff et superieure
en qualite.
je viens de trouver un exemple chez ce magasin :
http://www.darty.com/webapp/wcs/stores/ ... ic=2281082
c'est ce que j'essaye d'obtenir.
j'ai essayé de bidouiller la fonction popup...sans succes...

En ce qui concerne la mise en page, c'est vrai que ca marche mieux avec qlqs infos dans la feuille de style !! merci
grace a toi je viens d'apprendre la fonction obj.src :)

Modérateur PHPfrance
Modérateur PHPfrance | 7636 Messages

05 juin 2006, 16:56

Pour les images en grand suffit de les préfixer par un préfixe (tiens c'est bien trouvé ça :P ) par exemple:

les miniatures
image_1.jpg
image_2.jpg

les maxiature :lol:
max_image_1.jpg
max_image_2.jpg

et ensuite la fonction JS
window.open('imagesboutique/max_'+big_image);
grace a toi je viens d'apprendre la fonction obj.src
Ravi de t'apprendre des choses mais ce n'est pas vraiment une fonction. "Obj" est la variable qui comporte les attributs de la balise appelante.
Comment ça c'est pas clair 8)

La balise comporte ceci:
onclick="popup(this)
on passe donc "this" l'objet lui même à la fonction javascript. J'aurai pu appeler le paramètre autrement que "obj" par exemple "mon_nom_de_variable_que_j_adore_le_plus" :wink:

Par contre ".src" permet bien d'accéder à l'attribut du même nom. Pour accéder à la valeur dans champ texte par exemple on utilise ".value"

/!\ Avant de poster se documenter et rechercher.
Qui ne sait pas rendre un service n'a pas le droit d'en demander.
MaBrute

Eléphant du PHP | 297 Messages

05 juin 2006, 17:24

je vois que c'est la grande forme Truc ! je pense avoir tout compris :?
et specialement le coup du prefixe :)
merci pour toutes les infos :wink:
je pars mettre tout ca en pratique...et j'oublie le résolu...si tout va bien...

Modérateur PHPfrance
Modérateur PHPfrance | 7636 Messages

05 juin 2006, 18:29

je vois que c'est la grande forme Truc
On bosse mieux les jours fériés :mrgreen:
...et j'oublie le résolu...si tout va bien...
Roh pas bien :lol:

/!\ Avant de poster se documenter et rechercher.
Qui ne sait pas rendre un service n'a pas le droit d'en demander.
MaBrute

Eléphant du PHP | 297 Messages

05 juin 2006, 20:26

je pars mettre tout ca en pratique...et j'oublie le résolu...si tout va bien...
désolé, j'avais oublié "pas"...
je pars mettre tout ca en pratique...et j'oublie pas le résolu...si tout va bien.. :wink:

Invité
Invité n'ayant pas de compte PHPfrance

05 juin 2006, 22:21

ah je me disais bien ! :oops:
un dernier soucis...
lorsque s'effectue la fonction popup, impossible d'afficher l'image car il me repete la direction deux fois dans l'adresse
http://www.bibli.com/images/max_http:// ... livre1.gif
au lieu de :
http://www.bibli.com/images/max_livre1.gif
et vu que je suis encore une bille en progr, je n'arrive a resoudre... :cry: