Imprimer la Page | Close Window

[Tuto] - Zoom image

Imprimé depuis: Forum openElement
Categorie:

openElement


Nom du Forum: Tutoriaux utilisateurs
Description du Forum: Ecrivez ou consultez des tutoriaux OpenElement
Pas de questions dans cette rubrique merci.
URL: http://forum.openelement.com/fr/forum_posts.asp?TID=21490
Date: 31 Mar 2020 à 21:24
Version logiciel: Web Wiz Forums 10.18 - http://www.webwizforums.com


Sujet: [Tuto] - Zoom image
Posté par: MicroVinc
Sujet: [Tuto] - Zoom image
Posté le: 10 Oct 2015 à 21:12
Bonjour, un petit tuto pour un effet sympa... Et surtout sans utiliser un Bloc de code visuel, par conséquent la disposition de vos images seront visuelles et directement dans l'environnement OE.

Difficulté : Débutant (qui connait quand même l'environnement du logiciel OE)
Intégration : Totale avec l’environnement OE

Effet :
http://www.hostingpics.net" rel="nofollow">

ETAPE 1 : 

1-Ajouter l'élément "image" sur votre page  http://www.hostingpics.net" rel="nofollow">
2-Choisir votre image 
2-Ajouter lui la classes perso : zoom_img  http://www.hostingpics.net" rel="nofollow">

ETAPE 2 :

Cette étape permet, grâce au CSS3 l'effet zoom lorsque l'on passe la souris dessus.
1-Ajouter l'élément "Bloc de code (source)" sur votre page  http://www.hostingpics.net" rel="nofollow">
2-Paramétrer le Bloc de code source en Type : "CSS" et Position : "Header"  http://www.hostingpics.net" rel="nofollow">
3-Copier le code ci-dessous et le coller dans le Bloc de code source :
/* Zoom image sur hover */
.loupe_img {
overflow: hidden;
}

.loupe_img > img {
transition: all 2s;
-moz-transition: all 2s;
-ms-transition: all 2s;
-webkit-transition: all 2s;
-o-transition: all 2s;
}
 
.zoom_img:hover > .loupe_img > img {
transform: scale(1.35);
-moz-transform: scale(1.35);
-ms-transform: scale(1.35);
-webkit-transform: scale(1.35);
-o-transform: scale(1.35);
}

ETAPE 3 :

Cette étape permet d'appliquer une class à la balise parent de la balise <img>
1-Ajouter l'élément "Bloc de code (source)" sur votre page  http://www.hostingpics.net" rel="nofollow">
2-Paramétrer le Bloc de code source en Type : "javascript" et Position : "Header"  http://www.hostingpics.net" rel="nofollow">
3-Copier le code ci-dessous et le coller dans le Bloc de code source :
// DÉBUT Zoom image
$( document ).ready(function() {
$( document ).find('img').parent().each(function () {
        $(this).addClass('loupe_img');
});
});
// FIN Zoom image

Smile Voilà pour le petit effet sympa...



-------------
-Éléments pour OpenElement : https://goo.gl/Wq3Cpp" rel="nofollow - ICI
-Tutoriels pour OpenElement : https://goo.gl/NdpS1i" rel="nofollow - ICI


La Bretagne, un État dans l'État



Réponses:
Posté par: nico38
Posté le: 11 Oct 2015 à 01:24
pourquoi ne pas mettre la class loupe_img directement à l'élément image ?

(sinon toutes les images vont avoir cet effet là (exemple : le logo du site, et àa enlèvera un code JS; à moins que quelque chose m'échappe)



à quoi sert l’étape 3 puisqu'elle est réalisée dans l'étape 1 ?
ah nan j"ai mal lu


-------------
Un lien vers ton site tu enverras | Problème d'affichage ? ---> CTRL+F5 | Couleur des liens --> "Styles des liens"


Posté par: nico38
Posté le: 11 Oct 2015 à 01:38
j'apporte juste une deuxieme solution avec un code JS et des sélecteurs en moins : (les valeurs sont différentes par rapport à Hobby parce que c'est juste un copier coller d'un de mes sites et que je suis fainéant)

1. mettre élément image (donner class perso : "zoom")
2. Mettre Dépassement --> Masquer (au Contenu de l'élément image)
3. copier coller ce code Bloc Source Header/CSS

.zoom img {
-webkit-transition: ease-out 0.8s;
-moz-transition: ease-out 0.8s;
-o-transition: ease-out 0.8s;
-ms-transition: ease-out 0.8s;
transition: ease-out 0.8s;
}
.zoom img:hover
{
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
-o-transform: scale(1.05);
-ms-transform: scale(1.05);
  transform: scale(1.05);
}


valeur modifiables (mettre des points et pas des virgules) :
0.8s : durée du zoom (modifiable ex : 2s, 1.8s...)
1.05 : agrandissement (1.05 = 5% plus grand, 1.5 = 50% plus grand, 2 = 2x plus grand etc...)


-------------
Un lien vers ton site tu enverras | Problème d'affichage ? ---> CTRL+F5 | Couleur des liens --> "Styles des liens"


Posté par: MicroVinc
Posté le: 11 Oct 2015 à 08:47
Message posté par nico38 nico38 a écrit:

j'apporte juste une deuxieme solution avec un code JS et des sélecteurs en moins : (les valeurs sont différentes par rapport à Hobby parce que c'est juste un copier coller d'un de mes sites et que je suis fainéant)

1. mettre élément image (donner class perso : "zoom")
2. Mettre Dépassement --> Masquer (au Contenu de l'élément image)
3. copier coller ce code Bloc Source Header/CSS

<font color="#CC0000">.zoom img {
-webkit-transition: ease-out 0.8s;
-moz-transition: ease-out 0.8s;
-o-transition: ease-out 0.8s;
-ms-transition: ease-out 0.8s;
transition: ease-out 0.8s;
}
.zoom img:hover
{
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
-o-transform: scale(1.05);
-ms-transform: scale(1.05);
  transform: scale(1.05);
}


<font color="#000000">valeur modifiables (mettre des points et pas des virgules) :
0.8s : durée du zoom (modifiable ex : 2s, 1.8s...)
1.05 : agrandissement (1.05 = 5% plus grand, 1.5 = 50% plus grand, 2 = 2x plus grand etc...)





L'inconvénient de cette méthode est que si l'on applique des effets rotation et d'ombre sur le cadre image le l'ombre ne zoom pas...

-------------
-Éléments pour OpenElement : https://goo.gl/Wq3Cpp" rel="nofollow - ICI
-Tutoriels pour OpenElement : https://goo.gl/NdpS1i" rel="nofollow - ICI


La Bretagne, un État dans l'État


Posté par: nico38
Posté le: 11 Oct 2015 à 14:57
je sais pas si j'ai bien compris l'histoire de l'ombre et de la rotation mais si c'est ce que je pense, ça marche :

http://www.lashermes.com//dossier-test/zoom-image.htm" rel="nofollow - exemple (ombre + rotation + zoom)

il suffit d'écrire ".zoom, .zoom img" au lieu de juste ".zoom img"

EDIT : exemple de code
.zoom, .zoom img {
-webkit-transition: all 0.8s;
-moz-transition: all 0.8s;
-o-transition: all 0.8s;
-ms-transition: all 0.8s;
transition: all 0.8s;
}
.zoom img:hover
{
-webkit-transform: scale(2);
-moz-transform: scale(2);
-o-transform: scale(2);
-ms-transform: scale(2);
  transform: scale(2);
}



-------------
Un lien vers ton site tu enverras | Problème d'affichage ? ---> CTRL+F5 | Couleur des liens --> "Styles des liens"


Posté par: MicroVinc
Posté le: 11 Oct 2015 à 15:00
Si on utilise l'ombre dans les propriétés de cadre OE elle reste sur place de la taille d'origine image.

-------------
-Éléments pour OpenElement : https://goo.gl/Wq3Cpp" rel="nofollow - ICI
-Tutoriels pour OpenElement : https://goo.gl/NdpS1i" rel="nofollow - ICI


La Bretagne, un État dans l'État


Posté par: nico38
Posté le: 11 Oct 2015 à 15:08
j'ai pas compris le "elle reste sur place de la taille d'origine"

http://www.lashermes.com/dossier-test/zoom-image.htm" rel="nofollow - exemple

mais j'ai sûrement pas compris l'effet que vous voulez insinuer avec l'ombre mais comme dirait l'autre "c'est pas grave" Tongue


-------------
Un lien vers ton site tu enverras | Problème d'affichage ? ---> CTRL+F5 | Couleur des liens --> "Styles des liens"


Posté par: Maurice306
Posté le: 11 Oct 2015 à 15:25
Bravo à tout les deux Clap Thumbs Up et merci (en tout cas de ma part)

Encore la possibilité de se prendre pour un PRO (au résultat) avec vos conseils, modèles et tutos.

Sur que ça va donner des idées à beaucoup de néophytes sur le forum. 

Cordialement


-------------
La vie est belle !!!....., elle est comme chacun se la fait. Ne soyez pas pressé, partez plus tôt, car il n'y a pas de personnes pressée elles ne sont qu'en retard !!!


Posté par: Hobby001
Posté le: 11 Oct 2015 à 15:52
J'imagine, une rotation à 720 degrés en zoomant et en agrandissant la largeur de l'ombre, de quoi étourdir sérieusement!  Evil Smile

-------------
Quand on veut mettre quelque chose en ligne, on se fait prendre par quelque chose
de gros.


Posté par: alexdarcy
Posté le: 26 Oct 2015 à 18:21
Message posté par MicroVinc MicroVinc a écrit:

Bonjour, un petit tuto pour un effet sympa... Et surtout sans utiliser un Bloc de code visuel, par conséquent la disposition de vos images seront visuelles et directement dans l'environnement OE.

Difficulté : Débutant (qui connait quand même l'environnement du logiciel OE)
Intégration : Totale avec l’environnement OE

Effet :
http://www.hostingpics.net" rel="nofollow">

ETAPE 1 : 

1-Ajouter l'élément "image" sur votre page  http://www.hostingpics.net" rel="nofollow">
2-Choisir votre image 
2-Ajouter lui la classes perso : zoom_img  http://www.hostingpics.net" rel="nofollow">

ETAPE 2 :

Cette étape permet, grâce au CSS3 l'effet zoom lorsque l'on passe la souris dessus.
1-Ajouter l'élément "Bloc de code (source)" sur votre page  http://www.hostingpics.net" rel="nofollow">
2-Paramétrer le Bloc de code source en Type : "CSS" et Position : "Header"  http://www.hostingpics.net" rel="nofollow">
3-Copier le code ci-dessous et le coller dans le Bloc de code source :
/* Zoom image sur hover */
.loupe_img {
overflow: hidden;
}

.loupe_img > img {
transition: all 2s;
-moz-transition: all 2s;
-ms-transition: all 2s;
-webkit-transition: all 2s;
-o-transition: all 2s;
}
 
.zoom_img:hover > .loupe_img > img {
transform: scale(1.35);
-moz-transform: scale(1.35);
-ms-transform: scale(1.35);
-webkit-transform: scale(1.35);
-o-transform: scale(1.35);
}

ETAPE 3 :

Cette étape permet d'appliquer une class à la balise parent de la balise <img>
1-Ajouter l'élément "Bloc de code (source)" sur votre page  http://www.hostingpics.net" rel="nofollow">
2-Paramétrer le Bloc de code source en Type : "javascript" et Position : "Header"  http://www.hostingpics.net" rel="nofollow">
3-Copier le code ci-dessous et le coller dans le Bloc de code source :
// DÉBUT Zoom image
$( document ).ready(function() {
$( document ).find('img').parent().each(function () {
        $(this).addClass('loupe_img');
});
});
// FIN Zoom image

Smile Voilà pour le petit effet sympa...

 
... et ça marche ! Formidable j'ai réussi... Handshake
Onglet "Exposition"
http://www.alexdarcy.fr" rel="nofollow - http://www.alexdarcy.fr


Posté par: Bridet
Posté le: 26 Oct 2015 à 18:31
Euh, ça ne fonctionne pas...


Posté par: alexdarcy
Posté le: 26 Oct 2015 à 18:46
Message posté par Bridet Bridet a écrit:

Euh, ça ne fonctionne pas...
 
Arf j'ai pas encore mis en ligne les changements Confused ... Merci de m'avoir prévenu.... Thumbs Up J'y vais de ce pas......
http://www.alexdarcy.fr" rel="nofollow - http://www.alexdarcy.fr


Posté par: alexdarcy
Posté le: 26 Oct 2015 à 19:04
Voilà c'est fait.... Thumbs Up
http://www.alexdarcy.fr" rel="nofollow - www.alexdarcy.fr
 


Posté par: Bridet
Posté le: 27 Oct 2015 à 09:15
Ca marche! Je suppose que vous savez que sur grand écran toutes les images sont à gauche et non centrées?


Posté par: alexdarcy
Posté le: 27 Oct 2015 à 18:01
Message posté par Bridet Bridet a écrit:

Ca marche! Je suppose que vous savez que sur grand écran toutes les images sont à gauche et non centrées?
 
Oui, pour l'instant elles sont à gauche. Toutes les images ne sont pas encore installées... Ensuite je centrerai le tout... Hug
Merci pour ta remarque.
http://www.alexdarcy.fr" rel="nofollow - www.alexdarcy.fr
 


Posté par: db29bzh
Posté le: 19 Nov 2015 à 10:43
Bonjour

Voilà j'ai réussi a mettre en application ce petit programme

http://daniel1.berteuil.free.fr/

Daniel



Imprimer la Page | Close Window

Forum Software by Web Wiz Forums® version 10.18 - http://www.webwizforums.com
Copyright ©2001-2014 Web Wiz Ltd. - http://www.webwiz.co.uk