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 inverser le tri
db29bzh allez vers le bas
Senior Member
Senior Member


Depuis le: 18 Oct 2013
Pays: France
Status: Inactif
Points: 118
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer db29bzh Citer  RépondreRéponse Lien Direct à ce Post Sujet: [Tuto] - Zoom image
    Envoyé : 19 Nov 2015 à 10:43
Bonjour

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

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

Daniel
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é : 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.
 
Haut de la page
Bridet allez vers le bas
Senior Member
Senior Member
Avatar

Depuis le: 13 Dec 2013
Pays: Condroz
Status: Inactif
Points: 5049
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Bridet Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 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?
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 à 19:04
Voilà c'est fait.... Thumbs Up
 
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: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......
Haut de la page
Bridet allez vers le bas
Senior Member
Senior Member
Avatar

Depuis le: 13 Dec 2013
Pays: Condroz
Status: Inactif
Points: 5049
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Bridet Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 26 Oct 2015 à 18:31
Euh, ça ne fonctionne pas...
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
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
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
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
 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.