Sign in to follow this  
Followers 0

Le zoom sur les photos dans la page detail produit

9 posts in this topic

Posted · Report post

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

Share this post


: post
Share on other sites

Posted · Report post

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

Share this post


: post
Share on other sites

Posted · Report post

Un grand merci pour votre aide

Votre réponse me sied a ravir !

Share this post


: post
Share on other sites

Posted · Report post

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>

Share this post


: post
Share on other sites

Posted · Report post

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 !

Share this post


: post
Share on other sites

Posted · Report post

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

Share this post


: post
Share on other sites

Posted · Report post

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.

Share this post


: post
Share on other sites

Posted · Report post

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

Share this post


: post
Share on other sites

Posted · Report post

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++;

}

Share this post


: post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0

Twitter Advisto ecommerce

Facebook PEEL Shopping