Affichage images issues sql, avec fonction slide

par **Chile** » 05 juin 2006, 23:27

tout fonctionne !!
merci pour l'aide et les explications

par **Truc** » 05 juin 2006, 23:02

arf, enfaite je me suis fait prendre au jeu des attributs

si tu affiches le contenu de "big_image" avec un :

alert(big_image);

tu vera le pourquoi du comment.

il faut récupérer le nom de l'image

var big_image = obj.src;
image = big_image.split('/');
window.open('images/max_'+image[1]);

Bon ce n'est optimisé que pour le cas ou le chemin comporte un seul "/" ce qui est ton cas.

par **Chile** » 05 juin 2006, 22:53

ok,

les deux scripts en haut:

<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>
<script>
function popup(obj)
{
     var big_image = obj.src;
     window.open('images/max_'+big_image);
}
</script>

et mon affichage:

		  <dl id="photo">
		    <dt>
		      <div align="center">
		        <table width="195"  border="0" align="center" cellspacing="0">
                  <tr>
                    <td><div align="center"><img id="big_pict" src="images/<?php echo $row_livre['photo1p']; ?>" width="190" height="190" border="1" onclick="popup(this)"></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="images/<?php echo $row_livre['photo1p']; ?>"><img src="images/<?php echo $row_livre['photo1p']; ?>" width="60" height="60" border="1"></a></div></td>
                <td><div align="center"><a href="images/<?php echo $row_livre['photo2p']; ?>"><img src="images/<?php echo $row_livre['photo2p']; ?>" width="60" height="60" border="1"></a></div></td>
                <td><div align="center"><a href="images/<?php echo $row_livre['photo3p']; ?>"><img src="images/<?php echo $row_livre['photo3p']; ?>" width="60" height="60" border="1"></a></div></td>
              </tr>
            </table>
			</ul>

par **Truc** » 05 juin 2006, 22:26

montre ce que tu as fait.

par **Chile** » 05 juin 2006, 22:23

la bille c'est moi, j'ai oublié de me connecter

par **Invité** » 05 juin 2006, 22:21

ah je me disais bien !

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...

par **Chile** » 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..

par **Truc** » 05 juin 2006, 18:29

je vois que c'est la grande forme Truc

On bosse mieux les jours fériés

...et j'oublie le résolu...si tout va bien...

Roh pas bien

par **Chile** » 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

je pars mettre tout ca en pratique...et j'oublie le résolu...si tout va bien...

par **Truc** » 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

) par exemple:

les miniatures
image_1.jpg
image_2.jpg

les maxiature

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"

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"

par **Chile** » 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

, 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

par **Truc** » 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>.

par **zeus** » 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

modération : Effectivement

sujet déplacé

par **Chile** » 05 juin 2006, 01:50

ok truc, effectivement ca marche impec avec des requetes et une jolie boucle !

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

par **Truc** » 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.

Affichage images issues sql, avec fonction slide

Répondre

Étendre la vue Revue du sujet : Affichage images issues sql, avec fonction slide