Images réactives

Réduire
Ce sujet est fermé.
X
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • [RÉGLÉ] Images réactives

    Bonjour,

    Je recherche désespérément le moyen d'agrandir les images des catégories au survol de la souris.
    Utopie ou réalité?

    Merci!

  • #2
    Re : Images réactives

    Non c'est assez simple et tout en CSS en plus.

    Il suffit d'ajouter dans la feuille de style ton template (ou dans une feuille de style que tu ajoutes par ailleurs) les deux classes ci-dessous :

    Code:
    img.zoom  {
      -webkit-transition: all 500ms ease-in-out;
      -moz-transition: all 500ms ease-in-out;
      -o-transition: all 500ms ease-in-out;
      transition: all 500ms ease-in-out;
        background: none repeat scroll 0 0 #FFFFFF;
      -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
      -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
        color: #333333;
        display: inline;
        font-size: 18px;
        padding: 10px 10px 15px;
        text-align: center;
        text-decoration: none;
      font-family: serif;
      margin: 0 20px 27px 0px;
      cursor:url(images/cursor_zoom.png),auto;
    }
    
    img.zoom:hover {
        -moz-transform: scale(2.0);
      -webkit-transform: scale(2.0);
      -o-transform: scale(2.0);
      -ms-transform: scale(2.0,2.0);
      -webkit-transition: all 500ms ease-in-out;
      -moz-transition: all 500ms ease-in-out;
      -o-transition: all 500ms ease-in-out;
      transition: all 500ms ease-in-out;
      -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
      -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
        position: relative;
        z-index: 50;
      margin: 0 -60px 27px 80px;
    }
    Il te manque le fichier icone (image) qui va avec:
    Fichiers joints
    Il y a 10 sortes de gens. Ceux qui savent compter en binaire et ceux qui ne savent pas ...

    Commentaire


    • #3
      Re : Images réactives

      ha génial, merci!

      j'y regarde tout de suite!!!!

      réponse rapide, top!

      Commentaire


      • #4
        Re : Images réactives

        oups,

        J'ai créé une nouvelle feuille de style intitulée "perso.css" avec le contenu du code. Je l'ai mis dans le dossier "css" du template mais je ne parviens pas à faire en sorte que l'effet se fasse sur la page des categories (ni ailleurs)... Comment m'y prendre pour que les images des categories fassent appel à ce code?

        Commentaire


        • #5
          Re : Images réactives

          Le code que je t'ai donné est opérationnel pour toutes les image ayant la classe zoom (<IMG class="zoom" ....)

          il faut que dans ton template, tu regardes comment sont déclarées les images correspondant aux catégories (utilises firebug), il y a forcément une classe (au moins) d'attaché à l'affichage des images correspondant aux catégories.

          Soit tu modifies les fichiers PHP générant ces pages (surcharge du fichier .php générant la page dans ton template) pour rajouter la classe zoom à la classe utilisée, soit tu modifies (mais c'est moins propre à mon sens) la classe en question pour ajouter tout ou partie du code que je t'ai envoyé
          Il y a 10 sortes de gens. Ceux qui savent compter en binaire et ceux qui ne savent pas ...

          Commentaire


          • #6
            Re : Images réactives

            ok, merci j'utilise déjà firebug, je vais encore fouiller.

            Merci encore!

            Commentaire


            • #7
              Re : Images réactives

              ok,

              j'arrive à faire fonctionner l'effet dans firebug sur une seule image mais je galère grave pour choper le fichier qui gère l'affichage des catégories... :-(

              Commentaire


              • #8
                Re : Images réactives

                Bonjour,

                Avec Virtuemart 2.0.26

                Pour trouver le code php pour y mettre la class "zoom"

                Chemin :
                components\com_virtuemart\views\category\tmpl\defa ult

                // Show Products
                ?>
                <div class="product floatleft<?php echo $Browsecellwidth . $show_vertical_separator ?>">
                <div class="spacer">
                <div class="width30 floatleft center">
                <a title="<?php echo $product->product_name ?>" rel="vm-additional-images" href="<?php echo $product->link; ?>">
                <?php
                echo $product->images[0]->displayMediaThumb('class="browseProductImage zoom"', false);
                ?>
                </a>
                Tu rajoute "zoom" en laissant un espace à la suite de "browseProductImage"

                Tu ajoute dans le CSS du template (en fin de page)

                .row_liste_categorie .browseProductImage.zoom:hover {
                -moz-transform: scale(2.0);
                -webkit-transform: scale(2.0);
                -o-transform: scale(2.0);
                -ms-transform: scale(2.0,2.0);
                -webkit-transition: all 500ms ease-in-out;
                -moz-transition: all 500ms ease-in-out;
                -o-transition: all 500ms ease-in-out;
                transition: all 500ms ease-in-out;
                -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
                -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
                box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
                position: relative;
                z-index: 50;
                margin: 0 -60px 27px 80px;
                }


                .row_liste_categorie .browseProductImage.zoom {
                -webkit-transition: all 500ms ease-in-out;
                -moz-transition: all 500ms ease-in-out;
                -o-transition: all 500ms ease-in-out;
                transition: all 500ms ease-in-out;

                }
                J'ai fait des essais avec "Inspecter l'élément" de Chrome

                La class "modal" fonctionne toujours si tu clique sur l'image
                Voilà un début de piste pour toi si tu utilise Virtuemart

                PS : Faire toujours une sauvegarde du fichier avant de modifier
                Dernière édition par achasp2 à 09/01/2014, 14h31
                Site réalisé :
                http://www.imphyloisirs.fr

                Commentaire


                • #9
                  Re : Images réactives

                  c'est très gentil de prendre mon cas en considération.

                  J'ai suivi exactement les étapes mais pour moi ça ne le fait pas. J' utilise aussi firebug dans chrome.
                  Ce qui m'étonne c'est que quand je fait "inspecter l'élément" d'une image, je ne retrouve pas la classe "zoom".

                  Commentaire


                  • #10
                    Re : Images réactives

                    A tu bien rajouter "zoom" dans le fichier php

                    Sinon, vide les caches de joomla
                    Site réalisé :
                    http://www.imphyloisirs.fr

                    Commentaire


                    • #11
                      Re : Images réactives

                      Oui oui,

                      + cache purgé: rien n'a bougé

                      pffff ça commence à me gaver. Pour aujourd'hui je sature. J'essayerai encore demain.

                      Je te tiens au courant si j'ai du neuf. Encore merci!!

                      Commentaire


                      • #12
                        Re : Images réactives

                        J'y pense!

                        Tu veux dire les images des catégories ou des images des articles d'une catégorie
                        Moi, je t'ai donné la modif images des articles d'une catégorie
                        Dernière édition par achasp2 à 09/01/2014, 15h03
                        Site réalisé :
                        http://www.imphyloisirs.fr

                        Commentaire


                        • #13
                          Re : Images réactives

                          oui oui, les images des categories

                          Commentaire


                          • #14
                            Re : Images réactives

                            Et je voulais préciser que le code css pour le zoom je l'ai mis dans le fichier template.css

                            Commentaire


                            • #15
                              Re : Images réactives

                              Mais même les images des articles ne sont pas devenues réactives

                              Commentaire

                              Annonce

                              Réduire
                              Aucune annonce pour le moment.

                              Partenaire de l'association

                              Réduire

                              Hébergeur Web PlanetHoster
                              Travaille ...
                              X