BullGuard Antivirus Sale - 60% Off with openElement !
Accueil Forum Accueil Forum >

openElement

> Tutoriaux utilisateurs
  Nouveaux messages Nouveaux messages Fil RSS  - [Tuto] - Zoom image
  FAQ FAQ  Rechercher dans le Forum   Inscription Inscription  Connexion Connexion

[Tuto] - Zoom image

 Répondre Répondre Page  12>
Auteur
Message
MicroVinc allez vers le bas
Moderator Group
Moderator Group


Depuis le: 21 Août 2012
Pays: Bretagne
Status: Inactif
Points: 4460
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer MicroVinc Citer  RépondreRéponse Lien Direct à ce Post Sujet: [Tuto] - Zoom image
    Envoyé : 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 :

ETAPE 1 : 

1-Ajouter l'élément "image" sur votre page 
2-Choisir votre image 
2-Ajouter lui la classes perso : zoom_img 

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 
2-Paramétrer le Bloc de code source en Type : "CSS" et Position : "Header" 
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 
2-Paramétrer le Bloc de code source en Type : "javascript" et Position : "Header" 
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...



Edité par MicroVinc - 10 Oct 2015 à 21:14
-Éléments pour OpenElement : ICI
-Tutoriels pour OpenElement : ICI


La Bretagne, un État dans l'État
Haut de la page
nico38 allez vers le bas
Senior Member
Senior Member


Depuis le: 18 Jan 2014
Status: Inactif
Points: 3967
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer nico38 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 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


Edité par nico38 - 11 Oct 2015 à 01:34
Un lien vers ton site tu enverras | Problème d'affichage ? ---> CTRL+F5 | Couleur des liens --> "Styles des liens"
Haut de la page
nico38 allez vers le bas
Senior Member
Senior Member


Depuis le: 18 Jan 2014
Status: Inactif
Points: 3967
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer nico38 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 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...)


Edité par nico38 - 11 Oct 2015 à 01:47
Un lien vers ton site tu enverras | Problème d'affichage ? ---> CTRL+F5 | Couleur des liens --> "Styles des liens"
Haut de la page
MicroVinc allez vers le bas
Moderator Group
Moderator Group


Depuis le: 21 Août 2012
Pays: Bretagne
Status: Inactif
Points: 4460
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer MicroVinc Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 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 : ICI
-Tutoriels pour OpenElement : ICI


La Bretagne, un État dans l'État
Haut de la page
nico38 allez vers le bas
Senior Member
Senior Member


Depuis le: 18 Jan 2014
Status: Inactif
Points: 3967
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer nico38 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 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 :

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);
}



Edité par nico38 - 11 Oct 2015 à 15:01
Un lien vers ton site tu enverras | Problème d'affichage ? ---> CTRL+F5 | Couleur des liens --> "Styles des liens"
Haut de la page
MicroVinc allez vers le bas
Moderator Group
Moderator Group


Depuis le: 21 Août 2012
Pays: Bretagne
Status: Inactif
Points: 4460
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer MicroVinc Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 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 : ICI
-Tutoriels pour OpenElement : ICI


La Bretagne, un État dans l'État
Haut de la page
nico38 allez vers le bas
Senior Member
Senior Member


Depuis le: 18 Jan 2014
Status: Inactif
Points: 3967
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer nico38 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 11 Oct 2015 à 15:08
j'ai pas compris le "elle reste sur place de la taille d'origine"

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


Edité par nico38 - 11 Oct 2015 à 15:08
Un lien vers ton site tu enverras | Problème d'affichage ? ---> CTRL+F5 | Couleur des liens --> "Styles des liens"
Haut de la page
Maurice306 allez vers le bas
Senior Member
Senior Member


Depuis le: 20 Avr 2008
Pays: France
Status: Inactif
Points: 2066
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Maurice306 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 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 !!!
Haut de la page
Hobby001 allez vers le bas
Admin Group
Admin Group
Avatar
Modérateur

Depuis le: 14 Feb 2015
Pays: Canada, Québec
Status: Inactif
Points: 6507
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Hobby001 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 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
Haut de la page
alexdarcy allez vers le bas
Senior Member
Senior Member


Depuis le: 19 Oct 2015
Pays: France
Status: Inactif
Points: 453
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer alexdarcy Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 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 :

ETAPE 1 : 

1-Ajouter l'élément "image" sur votre page 
2-Choisir votre image 
2-Ajouter lui la classes perso : zoom_img 

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 
2-Paramétrer le Bloc de code source en Type : "CSS" et Position : "Header" 
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 
2-Paramétrer le Bloc de code source en Type : "javascript" et Position : "Header" 
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"
Haut de la page
 Répondre Répondre Page  12>
  Partagez ce sujet   

Aller au Forum Permissions du forum allez vers le bas

Forum Software by Web Wiz Forums® version 12.04
Copyright ©2001-2021 Web Wiz Ltd.

Cette page a été affichée en 0.063 secondes.