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, 13h31
                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, 14h03
                        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
                              1 sur 2 < >

                              C'est [Réglé] et on n'en parle plus ?

                              A quoi ça sert ?
                              La mention [Réglé] permet aux visiteurs d'identifier rapidement les messages qui ont trouvé une solution.

                              Merci donc d'utiliser cette fonctionnalité afin de faciliter la navigation et la recherche d'informations de tous sur le forum.

                              Si vous deviez oublier de porter cette mention, nous nous permettrons de le faire à votre place... mais seulement une fois
                              Comment ajouter la mention [Réglé] à votre discussion ?
                              1 - Aller sur votre discussion et éditer votre premier message :


                              2 - Cliquer sur la liste déroulante Préfixe.

                              3 - Choisir le préfixe [Réglé].


                              4 - Et voilà… votre discussion est désormais identifiée comme réglée.

                              2 sur 2 < >

                              Assistance au forum - Outil de publication d'infos de votre site

                              Compatibilité: PHP 4.1,PHP4, 5, 6DEV MySQL 3.2 - 5.5 MySQLi from 4.1 ( @ >=PHP 4.4.9)

                              Support Version de Joomla! : | J!3.0 | J!2.5.xx | J!1.7.xx | J!1.6.xx | J1.5.xx | J!1.0.xx |

                              Version française (FR) D'autres versions sont disponibles depuis la version originale de FPA

                              UTILISER À VOS PROPRES RISQUES :
                              L'exactitude et l'exhaustivité de ce script ainsi que la documentation ne sont pas garanties et aucune responsabilité ne sera acceptée pour tout dommage, questions ou confusion provoquée par l'utilisation de ce script.

                              Problèmes connus :
                              FPA n'est actuellement pas compatible avec des sites Joomla qui ont eu leur fichier configuration.php déplacé en dehors du répertoire public_html.

                              Installation :

                              1. Téléchargez l'archive souhaitée : http://afuj.github.io/FPA/

                              Archive zip : https://github.com/AFUJ/FPA/zipball/master

                              2. Décompressez le fichier de package téléchargé sur votre propre ordinateur (à l'aide de WinZip ou d'un outil de décompression natif).

                              3. Lisez le fichier LISEZMOI inclus pour toutes les notes de versions spécifiques.

                              4. LIRE le fichier de documentation inclus pour obtenir des instructions d'utilisation détaillées.

                              5. Téléchargez le script fpa-fr.php à la racine de votre site Joomla!. C'est l'endroit que vous avez installé Joomla et ce n'est pas la racine principale de votre serveur. Voir les exemples ci-dessous.

                              6. Exécutez le script via votre navigateur en tapant: http:// www. votresite .com/ fpa-fr.php
                              et remplacer www. votresite .com par votre nom de domaine


                              Exemples:
                              Joomla! est installé dans votre répertoire web et vous avez installé la version française du fichier FPA:
                              Télécharger le script fpa-fr.php dans: /public_html/
                              Pour executer le script: http://www..com/fpa-fr.php

                              Joomla! est installé dans un sous-répertoire nommé "cms" et vous avez installé la version française du fichier FPA:
                              Télécharger le script fpa-fr.php dans: /public_html/cms/
                              Pour executer le script: http://www..com/cms/fpa-fr.php

                              En raison de la nature très sensible de l'information affichée par le script FPA, il doit être retiré immédiatement du serveur après son utilisation.

                              Pour supprimer le script de votre site, utilisez le lien de script de suppression fourni en haut de la page du script. Si le lien de suppression échoue pour supprimer le script, utilisez votre programme FTP pour le supprimer manuellement ou changer le nom une fois que le script a généré les données du site et le message publié sur le forum. Si le script est toujours présent sur le site, il peut être utilisé pour recueillir suffisamment d'informations pour pirater votre site. Le retrait du script empêche des étrangers de l'utiliser pour jeter un oeil à la façon dont votre site est structuré et de détecter les défauts qui peuvent être utilisé à vos dépends.
                              Voir plus
                              Voir moins
                              Travaille ...
                              X