Le zoom sur les photos dans la page detail produit

[French Vintage Touch 0]

Bonjour,

quelqu'un pourrait il m'indiquer comment on peut mettre en place le zoom des photos sur la page détail des produits ?

(Le zoom se fait en cliquant sur la photo : image1, image2, image3, image4)

merci de votre aide

JYC

[MOON CONCEPT]

Bonjour,

Les images "grand format" sont accessibles avec le code :

<?=$wwwroot?>/upload/<?=$prod['image1']?>

<?=$wwwroot?>/upload/<?=$prod['image2']?>

<?=$wwwroot?>/upload/<?=$prod['image3']?>

<?=$wwwroot?>/upload/<?=$prod['image4']?>

[/codebox]

[u]ou avec la syntaxe :[/u]

[codebox]<?=$repertoire_upload?>/<?=$prod['image1']?>

Cela va générer une url complète vers l'image, du genre :

http://www.maboutiquepeel.tld/upload/uyiufusydfisdfs_4654654.jpg

Vous pourrez par exemple, afficher une miniature, avec zoom vers le grand format avec ce type de syntaxe : (utilisant la méthode Lightbox, par défaut dans PEEL).

echo '<a href="'.$repertoire_upload.'/'.$prod['image1'].'" rel="lightbox">'.$wwwroot.'/upload/thumbs/'.thumbs($prod['image1'], $small_width, $small_height, $method="fit").'</a>

En espérant que cela réponde à votre question.

Florian

[French Vintage Touch 0]

Un grand merci pour votre aide

Votre réponse me sied a ravir !

[French Vintage Touch 0]

En fait le prob, c'est que j'arrive pas à modifier ce bout de code pour qu'il réponde a mes besoins, trop de "cote" et de "double cote" !!! je m'y perd !!!! dans le source produit_detail.php

<?php

echo (!empty($prod['image1'])) ? "<img src=\"$wwwroot/upload/thumbs/".thumbs($prod['image1'], $medium_width, $medium_height, $method="fit")."\" border=\"0\" title=\"".$prod['nom_'.$_SESSION['langue'].'']."\" alt=\"".$prod['nom_'.$_SESSION['langue'].'']."\">" : "<img src=\"$wwwroot/images/photo-non-disponible.gif\" alt=\"photo non disponible\" border=\"0\">";

echo "</a>";

?>

ce code affiche l'image si elle existe mais ne permet pas d'acceder a son zoom quand on clique dessus il faut le transformer en mettant le <a href... de la même manière plus bas dans le source produit_detail.php, il y a les affichage de imag2,image3 et image4

<table class="fp">

	<tr>

		<td class="fp_image">


		<!-- image2, image 3 & image 4 -->


		<?php echo (!empty($prod['image2'])) ? "<p><img src=\"$wwwroot/upload/thumbs/".thumbs($prod['image2'], $medium_width, $medium_height, $method="fit")."\" border=\"0\" title=\"".$prod['nom_'.$_SESSION['langue'].'']."\" alt=\"".$prod['nom_'.$_SESSION['langue'].'']."\"></p>" : "";?>


		<?php echo (!empty($prod['image3'])) ? "<p><img src=\"$wwwroot/upload/thumbs/".thumbs($prod['image3'], $medium_width, $medium_height, $method="fit")."\" border=\"0\" title=\"".$prod['nom_'.$_SESSION['langue'].'']."\" alt=\"".$prod['nom_'.$_SESSION['langue'].'']."\"></p>" : "";?>


		<?php echo (!empty($prod['image4'])) ? "<p><img src=\"$wwwroot/upload/thumbs/".thumbs($prod['image4'], $medium_width, $medium_height, $method="fit")."\" border=\"0\" title=\"".$prod['nom_'.$_SESSION['langue'].'']."\" alt=\"".$prod['nom_'.$_SESSION['langue'].'']."\"></p>" : "";?>		


		</td>

	</tr>

</table>

[MOON CONCEPT]

Voici en principe le code complet, à intégrer pour chaque image (1 à 4).

Je viens de le tester et ça fonctionne.

if (!empty($prod['image1']))

{

	echo '<a href="'.$repertoire_upload.'/'.$prod['image1'].'" rel="lightbox">

	<img src="'.$wwwroot.'/upload/thumbs/'.thumbs($prod['image1'], $small_width, $small_height, $method="fit").'" alt="'.$prod['nom_'.$_SESSION['langue'].''].'" /></a>';

}

else

{

	echo '<img src="'.$wwwroot.'/images/photo-non-disponible.gif" alt="photo non disponible" border="0">';

}

[/codebox]

Pour récupérer vos 4 images sans recopier 4 fois ce code, utilisez par exemple le code :

[codebox]for($i=1; $i<=4; $i++)
{
if (!empty($prod['image'.$i]))
{
echo '<a href="'.$repertoire_upload.'/'.$prod['image'.$i].'" rel="lightbox">
<img src="'.$wwwroot.'/upload/thumbs/'.thumbs($prod['image'.$i], $small_width, $small_height, $method="fit").'" alt="'.$prod['nom_'.$_SESSION['langue'].''].'" /></a>';
}
else
{
echo '<img src="'.$wwwroot.'/images/photo-non-disponible.gif" alt="photo non disponible" border="0">';
}
}

J'ai réécrit le code pour être un peu plus lisible, l'opérateur ternaire, c'est sympa, mais à lire c'est boff !

PS: l'atribut border="0" devrait être supprimé, et remplacé par une classe class="border0" afin de le gérer en CSS... ou bien, via css, appliquer img { border: 0;} pour toutes les images du site.

Toujours dans l'optique de valider le code source aux règle du W3C, XHTML Strict !

[French Vintage Touch 0]

Un grand merci pour votre aide précieuse.

Je crois que ce code pourra être utile a plus d'un !!!

1 j'ai enlevé les ELSE dans la boucle pour eviter l'affichage de : "photos non disponible"

2 j'ai modifié les small_width et small_height par medium_width et medium_heigt

Et ca marche du tonerre

JYC

[ToMaS 0]

Bonjour,

quelqu'un pourrait expliquer a un non-initié comme moi comment faire cette modification, je souhaiterait que lorsque l'on clique sur la photo du détail du produit, elle s'affiche en grand. Soit la première soit toutes les 10...

Merci d'avance

T.

[ToMaS 0]

Bonjour,

quelqu'un pourrait expliquer a un non-initié comme moi comment faire cette modification, je souhaiterait que lorsque l'on clique sur la photo du détail du produit, elle s'affiche en grand. Soit la première soit toutes les 10...

Merci d'avance

T.

S'il vous plait

[Gilles Boussin 0]

Bonjour Tomas,

Pour faire fonctionner le zoom sur les différentes photos, il faut, dans le fichier /modeles/xxxxx/produits_details.php (où xxxxx est votre template), remplacer les lien <a href="'.$urlprod.'"> (pour la photo principale)

par un lien du type

<a class=\"zoom\" href=\"" . $repertoire_upload . "/" . $image1 . "\" rel=\"lightbox\">

Pour les dix autres photos, il faut ajouter ce même lien dans la boucle while :

while($i<=10){

if(!empty($prod['image'.$i])){

echo "<p><a class=\"zoom\" href=\"" . $repertoire_upload . "/" . $image1 . "\" rel=\"lightbox\"><img src=\"$wwwroot/upload/thumbs/" . thumbs($prod['image'.$i], $medium_width, $medium_height, $method = "fit") . "\" border=\"0\" title=\"" . $prod['nom_' . $_SESSION['langue'] . ''] . "\" alt=\"" . $prod['nom_' . $_SESSION['langue'] . ''] . "\"></a></p>

";

}

$i++;

}