[Astuce] Utilisez 2 images pour vos produits

Messagepar blacknight » Dim 08 Juin 2008, 17:59

Coucou tlm,

j'en profite pour faire un p'ti post comme je viens de me pencher sur le sujet pour ma boutique.

Comme vous le savez , si vous utilisez une petite image pour vos aperçus
lorsque vous cliquerez sur l'aperçu dans la fiche produit , vous aurez la p'tite image :)

inversement si vous utilisez une grande image , vos aperçus seront détériorés (voir comparatif)

Image

L'idée est d'utiliser une image de 100px pour vos aperçus(optimisé via un logiciel photo afin d'avoir une bonne qualité)

et d'utiliser une grande image pour vos zoom ou agrandissement de votre aperçu dans la fiche produit.

Pour cela ouvrez le fichier "product_info.php" situé dans le dossier includes/content et mettez y ce code la

Code: Tout sélectionner
    <div id="productImage">


      <?php
               $a="product_info.php?products_id=";  // redirige vers la même page
    $b=$product_info['products_image'];    // permet de connaître le nom de l'image
      $c="grandes/".$b;                      // permet de savoir où se situe  la grande image (située dans le dossier "grande")
      $filename = "../oscss/images/grandes/".$b; // adresse de la grande image

      if (file_exists($filename)) // teste si la grande image existe et la lance sinon si elle existe pas il lance la petite
      {
         echo '<p><a href="'.$a. $product_info['products_id'] . '">' . tep_image(DIR_WS_IMAGES . $c, $product_info['products_name']) . '</a><br /></p>';
        }
    else {
         echo '<p><a href="'.$a. $product_info['products_id'] . '">' . tep_image(DIR_WS_IMAGES . $b, $product_info['products_name']) . '</a><br /></p>';
           }
    ?>
    </div>

    <div id="productInfoSpec">

Repérez vous grâce à la ligne <div id="productImage"> (au alentour de la ligne 50)
et la balise </div><div id="productIonfoSpec">

Et voila vous avez un système de switch entre l'image d'aperçu et celle en bonne qualité avec un script qui détecte la présence de la grande image afin de charger la petite si la grande n'existe pas.

Voilà pour la partie php ^^

Passons maintenant à la partie .css
Dernière édition par blacknight le Dim 08 Juin 2008, 18:14, édité 1 fois.
Que la force soit avec vous !!!
blacknight
Membre actif
 
Messages: 21
Inscription: Mer 19 Mar 2008, 04:47

Messagepar blacknight » Dim 08 Juin 2008, 18:10

pour avoir une image de bonne qualité et de grande taille
personnellement j'utilise une image de taille 600px X 600px

le problème c'est que votre aperçu de la fiche produit est basé sur l'image de grande taille avec ce script donc la qualité est médiocre
(la boutique utilise l'image de 100x dans toute la boutique sauf dans la fiche produit où c'est la grande qui est chargée)

Editez votre fichier .css (products.css)
et mettez y les valeurs suivantes :

Code: Tout sélectionner
#productImage {display:block;
            text-align:center;
        margin-top:40px;
        margin-bottom:20px;
         width:250px;
        height:250px; 
              }
       
#productImage img{
            width:250px;
            height:250px;
         display:block;
                }

Vous aurez alors un aperçu de bonne qualité (voir photo)

Image

ainsi le visiteur s'il clique sur votre photo il aura l'image en grande taille (600px)

je vais vous montrer à présent comment effectuer un zoom sur votre produit façon lightbox fait maison ^^ (voir photo)

Image

Il suffit juste d'insérer ce code dans votre .css :

Code: Tout sélectionner
#productImage  a:hover img{
                   width:600px;
                    height:600px;
                 display:block;
                          }
           
#productImage a:hover {
                    text-align:center;
            position:absolute;
            margin-top:-20px;
             margin-left:-300px;
             z-index:1;
                      }

ainsi vous aurez une image de 600px lorsque le visiteur survolera votre image

si vous trouvez le lien de votre image un peu useless
j'ai inclus dans le script php une redirection vers la même produit ainsi le visiteur cliquant sur la grande image retombera sur la même fiche produit ^^
ça permet de fermer le zoom comme le lien est obligatoire pour utiliser ce système de zoom.

J'espère que vous aimerez ce tutoriel
n'hésitez pas à donner vos avis

++ tlm

Blacky

ps : le résultat rend mieux sur votre site web que sur les photos que j'ai mis pour illustrer ce tutorial ya vraiment une impression de zoom :)
ps2: pensez à utiliser des images .png qui guère la transparence de fond
plutôt que des images jpeg ^^
Dernière édition par blacknight le Dim 08 Juin 2008, 18:33, édité 1 fois.
Que la force soit avec vous !!!
blacknight
Membre actif
 
Messages: 21
Inscription: Mer 19 Mar 2008, 04:47

Messagepar cynic- » Lun 09 Juin 2008, 12:49

Salut et merci ^^
Y'a t-il moyen de coupler ça avec AUTOMATIC THUMBNAIL ?
> http://wiki.oscss.org/doku.php?id=osc:p ... _thumbnail
> http://forums.oscss.org/viewtopic.php?id=987

Aurais-tu un exemple de site où l'on peut voir le script en action ? :)

Pour Automatic Thumbnail voici un site (OsCommerce) où il fonctionne parfaitement : http://www.oriffs.com
Je suis en train de bosser sur 2 sites OsCss où je l'implémente également. Bientôt les liens !
Dernière édition par cynic- le Lun 09 Juin 2008, 12:50, édité 1 fois.
cynic-
Site Admin
 
Messages: 694
Inscription: Mar 04 Déc 2007, 13:04

Messagepar blacknight » Lun 09 Juin 2008, 21:07

coucou ,

pour le site avec le script en "action" je vais bientôt mettre le mien en ligne donc ^^
sinon pour l'addon automatic thumbnail je connais pas trop mais rien de tel qu'une photo réduit via photoshop je pense ^^ (avec l'option Bicubique plus net)

sinon ce script est fait pour remplacer automaticthumbnail car il te permet de mettre deux photos (une en aperçu et une pour la fiche produit)

la future évolution de ce script sera de faire tourner l'image en 360° en zoom pour ça j'utiliserai une image flash (swf)

suite au prochain épisode :)
Dernière édition par blacknight le Lun 09 Juin 2008, 21:10, édité 1 fois.
Que la force soit avec vous !!!
blacknight
Membre actif
 
Messages: 21
Inscription: Mer 19 Mar 2008, 04:47

Messagepar cynic- » Jeu 12 Juin 2008, 11:22

Excellent ! Pour ma part j'utilise Automatic Thumbnail pour ne pas avoir à tout refaire dans Photoshop, c'est utile surtout sur les gros e-commerce.

Tiens-nous au courant de tes modif !
cynic-
Site Admin
 
Messages: 694
Inscription: Mar 04 Déc 2007, 13:04

Messagepar cynic- » Lun 29 Sep 2008, 12:58

Je fais un petit up.
J'ai essayé de coupler cette contrib avec Automatic Thumbnail qui crée une miniature dans "images/imagecache" : est-il possible de récupérer cette miniature, de l'afficher, et d'avoir la grande image (en fait, l'image normale située dans 'catalog/images/blabla/image.jpg' ) au rollover ?

J'essaie de trouver le bon compromis avec $cachedir.$thumbfile mais pour l'instant, c'est la miniature qui est zoomée au rollover (= pixels ) :|
cynic-
Site Admin
 
Messages: 694
Inscription: Mar 04 Déc 2007, 13:04

Messagepar blacknight » Lun 29 Sep 2008, 17:02

coucou cynic

je crois que c'est possible en bidouillant un peu

le css est essentiellement utilisé pour faire de la mise en page , pas pour afficher les images directement (l'addon que je fais redimensionne la fenêtre contenant l'image c'est pour ça que c'est la même image dans cette version là )

je pense que ca serait possible en créant un "cadre" vide et en mettant l'image en background
il suffirait de changer l'image de fond au rollover


j'ai été absent pendant 3mois pour raison professionnelle
je viens tout juste de rentrer c'est pour ça que j'ai pas pu vous donner de nouvelle ;)

pour un exemple de l'addon tu peux aller voir sur la boutique de mon frère
http://www.a2s-france.com/product_info. ... cts_id=135
sachant que les images sont pas top (elles viennent de son fournisseur) forcement certaines fiches produit sont pas top top :( voir même avec un fond blanc au lieu de transparent c'est juste pour un exemple ;)

sinon j'ai réussi à trouver un p'ti script pour faire une présentation d'un produit en 360° mais le gros problème vient qu'il faut prendre les photos soi même avec des angles différents etc et j'arrive pas à avoir de belles photos faut un mini studio photo pour l'éclairage avec une sorte de filtre pour éviter que les produits brillent trop

url pour afficher les produits en 360° : http://www.thoro.de/portfolio/verschiedenes/3DNP.html (faisable en 3D mais aussi avec des photos)
Que la force soit avec vous !!!
blacknight
Membre actif
 
Messages: 21
Inscription: Mer 19 Mar 2008, 04:47

Messagepar cynic- » Lun 29 Sep 2008, 17:47

Sympa la 3D ! Pour moi le futur du e-commerce passe par la 3D : on peut se projeter "dans" une boutique ou voir les objets sous tous les angles.

Trêve de rêvasseries :) ... pour en revenir à la boutique, je reste sur automatic_thumbnail et les clics pour le moment. Je n'ai pas trop le temps de chercher une bidouille (à mon grand regret) mais pour ma prochaine boutique, pourquoi pas ^^

Et sinon, les effets sur la boutique A2S rendent pas mal !
cynic-
Site Admin
 
Messages: 694
Inscription: Mar 04 Déc 2007, 13:04

Messagepar blacknight » Lun 29 Sep 2008, 17:57

cynic- a écrit:Sympa la 3D ! Pour moi le futur du e-commerce passe par la 3D : on peut se projeter "dans" une boutique ou voir les objets sous tous les angles.

Et sinon, les effets sur la boutique A2S rendent pas mal !

héhé j'ai déjà réfléchi à ça ;)
oscss étant assez propre nivo php on peut facilement lié une interface flash avec les scripts php d'oscss.
mais le pb c'est que l'interface flash est assez lourde à faire et si tu as plusieurs boutiques à faire ça risque d'être assez long

pour ce qui est de la boutique de mon brother , j'avais fait cet addon avec des exemples de produits trouvés sur google donc en bonne qualité dommage qu'il arrive pas à avoir que des bonnes images
Que la force soit avec vous !!!
blacknight
Membre actif
 
Messages: 21
Inscription: Mer 19 Mar 2008, 04:47

Messagepar bzmuz » Jeu 09 Oct 2008, 17:06

pourquoi ne pas utiliser la contrib ultrapics pour ça?
bzmuz
Membre actif
 
Messages: 20
Inscription: Mar 07 Oct 2008, 18:16

Messagepar cynic- » Jeu 09 Oct 2008, 17:20

bzmuz a écrit:pourquoi ne pas utiliser la contrib ultrapics pour ça?

Non non, ici il ne s'agit pas d'afficher plusieurs photos produit, mais d'en utiliser 2 pour 1 seul produit (1 pour l'aperçu, 1 pour le zoom en css)

(A ce sujet, j'ai laissé tomber ULTRAPICS pour installer EXTRA IMAGES qui est... extra ;) )
cynic-
Site Admin
 
Messages: 694
Inscription: Mar 04 Déc 2007, 13:04

Messagepar j4k » Jeu 09 Oct 2008, 17:22

ah intéressant !!
on peut voir quelque copy screen ?
~ osCSS 1.2.1 ~
Avatar de l’utilisateur
j4k
Site Admin
 
Messages: 1259
Inscription: Mer 27 Avr 2005, 09:13
Localisation: France

Messagepar bzmuz » Jeu 09 Oct 2008, 23:43

cynic,
on peut se servir comme on veut d' ultrapics.

Une fois que tu as ta table dans la base tu mets tes images où tu veux.

donc tu peux afficher ta petite image (monimage_sm) et sur le zoom ta grande image (monimage_xl). De plus tu peux aussi choisir d'avoir plusieurs images xl si tu utilise fancybox ( ou autre slideshow) et du coup de pouvoir les faire défiler.

j4k pour extra image:
http://www.oscommerce-screenshots.com/e ... -p-54.html
Dernière édition par bzmuz le Jeu 09 Oct 2008, 23:59, édité 1 fois.
bzmuz
Membre actif
 
Messages: 20
Inscription: Mar 07 Oct 2008, 18:16

Messagepar cynic- » Ven 10 Oct 2008, 19:16

@ j4k : oui dès que le site sera en ligne (ou avant si j'y pense mais là, gros coup de bourre) ; tu as un aperçu sur le lien de bzmuz. Pour une intégration graphique total, j'affiche les extra-images juste à côté de ma photo principale, en ligne (me reste à appliquer l'effet pop-up sur les extra-images mais je m'éloigne du sujet)

@ bzmuz : ok ok il faut que je re-tente, à l'occasion, ultrapics, merci pour les précisions
cynic-
Site Admin
 
Messages: 694
Inscription: Mar 04 Déc 2007, 13:04


Retourner vers Design

 


  • Articles en relation
    Réponses
    Vus
    Dernier message

Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 3 invités

cron