[RÉGLÉ] Images réactives

[nixax]

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!

[PieceOfCake]

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 :

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:

[nixax]

Re : Images réactives

ha génial, merci!

j'y regarde tout de suite!!!!

réponse rapide, top!

[nixax]

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?

[PieceOfCake]

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é

[nixax]

Re : Images réactives

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

Merci encore!

[nixax]

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... :-(

[achasp2]

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

[nixax]

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".

[achasp2]

Re : Images réactives

A tu bien rajouter "zoom" dans le fichier php

Sinon, vide les caches de joomla

[nixax]

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!!

[achasp2]

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

[nixax]

Re : Images réactives

oui oui, les images des categories

[nixax]

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

[nixax]

Re : Images réactives

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