Mettre la pemière image en grand et les autres en miniatures

16 juil. 2015, 09:22

Bonjour,

J'ai un script sur lequel il y a des images miniatures, je souhaite mettre la première image en grand et laisser les autres en miniature.

J'ai beau tatonner mais je n'y arrive pas pourtant ça me semble tout simple.

Voici mon code :

Code : Tout sélectionner

<?php if (MAX_IMG_NUM>0){?>        
		<div id="pictures">
			<?php 
			foreach($itemImages as $img){
				echo '<a href="'.$img[0].'" title="'.T_('Picture').' '.$itemTitle.' <br><div align=center>['.SITE_NAME.' site]</div>" rel="gb_imageset['.$idItem.']">
				 		<img id="enlarge" class="thumb" src="'.$img[1].'" title="'.T_('Picture').' '.$itemTitle.' ['.SITE_NAME.' site]" alt="'.T_('Picture').' '.$itemTitle.' ['.SITE_NAME.' site]" /></a>';
			}
			?>
			<div class="clear"></div>
		</div>
	    <?php }?>

Si vous avez une ou ou des idées..

16 juil. 2015, 09:27

Bonjour,

Pour faire cela, il faut que tu initialise une variable, par exemple $i à 1 avant ta boucle foreach.
Puis dans ta boucle, tu teste la variable de $i, si c'est égale à 1, tu affiches en grande, sinon tu affiches en petit.
Et ensuite toujours dans ta boucle tu incrémentes la valeur de $i

21 juil. 2015, 10:45

Bonjour,

Merci, c'est justement ce que je n'arrive pas à faire, j'ai tenté de m'inspirer de différents exemple mais ça ne marche toujours pas.

ou puis-je trouver un tutu qui m'aide vraiment ?

Merci d'avance

21 juil. 2015, 16:01

C'est pourtant très simple.
Tu définis une variable et tu lui donne une valeur initiale (par exemple 1).
Tu poses une condition du style : Si la variable est égale à 1, on affiche en grand. Au contraire, si elle est plus grande que 1, on affiche en petit.

<?php 
if (MAX_IMG_NUM>0){?>        
      <div id="pictures">
         <?php 
        $i = 0; //On instaure notre variable
         foreach($itemImages as $img){
            if ($i == 0) { //Si  $i = 0, alors on est sur la première image
                //Afficher l'image en grand 
            } else {
                //Afficher l'image en petit
            }
            $i++; //On ajoute 1 à notre variable
         }
         ?>
         <div class="clear"></div>
      </div>
       <?php }
?>

22 juil. 2015, 10:16

Bonjour,

Merci je test ça ce soir et met un petit résolu si tout est ok !!

Et pourtant il me semble bien avoir fait ce type de code, bon à refaire donc..

a+

25 juil. 2015, 10:14

Bonjour,

Merci encore ça marche, j'ai du loupé un truc !

Bref merci encore.

J'ai une autre question lié à ça.

Je cherche le nom d'un script qui permette, en cliquant sur une image miniature (à droite) qui fera apparaître la photo sur la même page à la place de l'autre grande image (à gauche) au même endroit.

Voir image jointe..

Merci de toute aide..

25 juil. 2015, 13:47

en javascript, quelque chose du genre :
<img src="petiteimage1.jpg" onclick='document.GetElementById("idgrandeimage").src = "nomimage.jpg"' />

25 juil. 2015, 19:54

Bonjour,

Merci mais je n'arrive à faire marche ce code qu'en local, voilà ce que j'ai :

Code : Tout sélectionner

function ChangeImage(url) {
   document.getElementById("monid").src = url;
  }

Code : Tout sélectionner

<img id="monid" src="imageGrande.jpg" /> 

<img src="imageMini.jpg" onClick="document.getElementById('monid').src='imageGrande.jpg';" />

J'ai trouvé un script mais là encore je n'arrive pas à enlever le curseur "+" qui flote sur l'image pour le reste tout est ok, le voici :

http://www.dynamicdrive.com/dynamicinde ... m#descArea

Je ne cherche qu'à afficher l'image rien de plus.

Merci encore de toute aide.

27 juil. 2015, 16:03

Bonjour,

Une idée ou deux svp ?

Cordialement.

27 juil. 2015, 20:21

Le curseur "+" est appelé : "crosshair"

Dans le script que tu as téléchargé, il y a la ligne :

Inside the .js file, you may wish to edit the below two variables near the top:

Code : Tout sélectionner
loadinggif: 'spinningred.gif', //full path or URL to "loading" gif magnifycursor: 'crosshair', //Value for CSS's 'cursor' attribute, added to original image

En gros, il faut modifier dans le fichier http://www.dynamicdrive.com/dynamicindex4/multizoom.js la ligne

Code : Tout sélectionner

magnifycursor: 'crosshair', //Value for CSS's 'cursor' attribute, added to original image

par

Code : Tout sélectionner

magnifycursor: 'default', //Value for CSS's 'cursor' attribute, added to original image

27 juil. 2015, 21:03

Bonjour,

Merci, c'est tout

Je suis si nul que ça

Je regarde ça demain..

Merci encore..

29 juil. 2015, 01:54

Bonsoir,

Merci encore mais ça n'a pas marché, j'ai tenté "none" et non..

Mais j'ai trouvé, à la place de ce code :

Code : Tout sélectionner

$tracker = $('<div class="zoomtracker" style="cursor:progress;position:absolute;z-index:'+basezindex+';left:'+o.left+'px;top:'+o.top+'px;height:'+h+'px;width:'+w+'px;" />')

j'ai fait :

Code : Tout sélectionner

$tracker = $('<div class="zoomtracker"  />')

Mais ça me complique la vie, il y a franchement pas plus simple ?

01 août 2015, 11:27

Bonjour,

J'ai trouvé, c'est pas zoom qu'il fallait que je cherche mais slideshow avec vertical filmstrip..

Alors du coup je reprend le code initial donné :

Code : Tout sélectionner

<?php 
if (MAX_IMG_NUM>0){?>        
      <div id="pictures">
         <?php 
        $i = 0; //On instaure notre variable
         foreach($itemImages as $img){
            if ($i == 0) { //Si  $i = 0, alors on est sur la première image
                //Afficher l'image en grand 
            } else {
                //Afficher l'image en petit
            }
            $i++; //On ajoute 1 à notre variable
         }
         ?>
         <div class="clear"></div>
      </div>
       <?php }
?>

Pour reprendre ce code en exemple:

Code : Tout sélectionner

<div class="dhtmlgoodies_slideshow">
	<div class="previewPane">
		<img src="images/image1_big.jpg">
		<span class="waitMessage"><img src="images/wait.gif"></span>
		<div class="largeImageCaption">blabla sous image 1</div>
	</div>
	<div class="galleryContainer">
		<div class="arrow_up"><img src="images/arrow-up.gif" class="arrow_up_image"></div>

		<div class="theImages">
		<div style="top: 0px;">
			
						<a href="#" title ="images/image1_big.jpg"><img src="images/image1.jpg"></a>
						<a href="#" title ="images/image2_big.jpg"><img src="images/image2.jpg"></a>
						<a href="#" title ="images/image3_big.jpg"><img src="images/image3.jpg"></a>
						<a href="#" title ="images/image4_big.jpg"><img src="images/image4.jpg"></a>
						<a href="#" title ="images/image5_big.jpg"><img src="images/image5.jpg"></a>
						<a href="#" title ="images/image6_big.jpg"><img src="images/image6.jpg"></a>
						<a href="#" title ="images/image7_big.jpg"><img src="images/image7.jpg"></a>
						<a href="#" title ="images/image8_big.jpg"><img src="images/image8.jpg"></a>
						<div class="imageCaption">This is the caption of image number one. It is placed inside a div in the html code.</div>
						<div class="imageCaption">This is the caption of image number two</div>
						<div class="imageCaption">This is the caption of picture number three</div>
						<div class="imageCaption">Another caption for a picture in this slideshow</div>
						<div class="imageCaption">This is the caption of image number five</div>
						<div class="imageCaption">This is the caption of image number six</div>
						<div class="imageCaption">This is the caption of image number seven</div>
						<div class="imageCaption">This is the caption of image number eight</div>

			<div class="slideEnd"></div>
			</div>

		</div>
		<div class="arrow_down"><img src="images/arrow-down.gif" class="arrow_down_image"></div>
	</div>
</div>

j'ai donc tenté ce code :

Code : Tout sélectionner

.../..
<link rel="stylesheet" ..
<script type="text/javascript" ..
<script type="text/javascript" ..
.../..
<?php 
if (MAX_IMG_NUM>0){?>        
      <div id="pictures">
         <?php 
        $i = 0; //On instaure notre variable
         foreach($itemImages as $img){
            if ($i == 0) { //Si  $i = 0, alors on est sur la première image
                //Afficher l'image en grand 
                echo '
                <div class="dhtmlgoodies_slideshow">
                    <div class="previewPane">
		<img src="image en grand 1" >
		<span class="waitMessage"><img src="images/wait.gif"></span>
		<div class="largeImageCaption"></div>
	</div>
     <div class="galleryContainer">
		<div class="arrow_up"><img src="images/arrow-up.gif" class="arrow_up_image"></div>
		<div class="theImages">
		<div style="top: 0px;">
		';
            } else {
                //Afficher l'image en petit
                echo '
                <a href="#" title="image grand n"><img src="image petite n" title="titre image" alt="nom image"></a>
						<div class="imageCaption">test nom</div>
		';
            }
            $i++; //On ajoute 1 à notre variable
         }
         ?>
         
         			<div class="slideEnd"></div>
			</div>

		</div>
		<div class="arrow_down"><img src="images/arrow-down.gif" class="arrow_down_image"></div>
	</div>
</div>
         
         <div class="clear"></div>
      </div>
       <?php }
?>

Alors j'ai bien les images mini et la première image en grand d'affiché mais quand je click rien ne ce passe.

Avez-vous une idée ou j'ai mal schmilbliqué le code ?

Merci d'avance..

01 août 2015, 12:50

Alors j'ai bien les images mini et la première image en grand d'affiché mais quand je click rien ne ce passe.

Eh bien c'est normal, il n'y a aucun code qui est exécuté lorsque l'utilisateur clique.
Que veux-tu qu'il se passe lorsque l'utilisateur clique ? L'image sur laquelle clique devient grande et celle qui était grande devient petite ? Si c'est le cas, il va falloir utiliser du Javascript.

01 août 2015, 14:20

Bonjour,

Merci oui ça manque de précision.. même si je l'ai mis en haut du code :

Code : Tout sélectionner

.../..
<link rel="stylesheet" ..
<script type="text/javascript" ..
<script type="text/javascript" ..
.../..

Alors j'ai utilisé les code de ce script avec son tuto et démo en mettant les fichiers et dossiers au bon endroit :

http://www.dhtmlgoodies.com/index.html? ... w-vertical

Je pense que c'est dans le code que j'ai mis qu'il y a une erreur..

Cordialement.

Mettre la pemière image en grand et les autres en miniatures

Qui est en ligne