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

openElement

> Scripts pour votre site
  Nouveaux messages Nouveaux messages Fil RSS  - Demande d aide pour script zoom image
  FAQ FAQ  Rechercher dans le Forum   Inscription Inscription  Connexion Connexion

Demande d aide pour script zoom image

 Répondre Répondre
Auteur
Message
pat76lh allez vers le bas
Newbie
Newbie
Avatar

Depuis le: 07 Sep 2015
Pays: france
Status: Inactif
Points: 6
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer pat76lh Citer  RépondreRéponse Lien Direct à ce Post Sujet: Demande d aide pour script zoom image
    Envoyé : 11 Sep 2015 à 16:13
bjour,
je souhaite utiliser le script elevate zoom http://www.elevateweb.co.uk/image-zoom pour utiliser un inner zoom ou une partie de l image est agrandie dans l image.

Or il nécessite de preciser une seconde image dans la balise image : <img id="zoom_05" src="small/image1.png" data-zoom-image="large/image1.jpg"/>

Il semble qu on ne puisse modifier le code html directement . Comment peut on faire?
j ai tenter avec un bloc code visuel "<img id="zoom_05" src="Files/Image/villarose%20-640x480-.jpg'" data-zoom-image="Files/Image/villarose%20-640x480-.jpg'"/> "
je ne vois rien et je ne sais comment determiner l'ID..
merci de vos infos




Edité par pat76lh - 11 Sep 2015 à 16:33
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 Sep 2015 à 18:25
Dans son mode de fonctionnement, ce plugin requiert deux photos, l'une réduite de façon proportionnelle et l'autre d'une grandeur de zoom qui vous convient.

Quand la case "pointeur de souris" survole la petite image, la fenêtre zoom s'ouvre sur la plus grande.  La fenêtre zoom est plus petite que cette dernière.  L'image zoomée est glissée derrière cette fenêtre ce qui donne l'effet de fenêtre zoom.

Mettre la même image deux fois ne peut en aucun cas donner un zoom.

PS: j'ai tendance à éviter comme la peste les noms de pages, sites, photos et autres fichiers avec des espaces.  Ces espaces se transforment en %20 Ce qui n'aide personne.


Edité par Hobby001 - 11 Sep 2015 à 23:01
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 Sep 2015 à 18:44
Vous pouvez peut-être essayer avec l'option scrollZoom

$("#zoom_mw").elevateZoom({scrollZoom : true}); (ceci viens de leur site) et le même fichier photo.

Ça donnera peut-être le résultat attendu.


Edité par Hobby001 - 11 Sep 2015 à 19:25
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 Sep 2015 à 20:18
Pour faire rouler le script:

HTML en header:

<script src="js/jquery.elevatezoom.js" type="text/javascript"></script>
<img id="WEImage1" src="Files/Image/ElevateZoomSmall.jpg" data-zoom image="Files/Image/ElevateZoomLarge.jpg"/>

Javascript endbody:

$(document).ready(
function(){
$("#WEImage1").elevateZoom();
}
);


NB
Le plugin est dans un répertoire "js" à la racine du site
WEImage est un panneau d'éléments que j'ai créé aux dimensions en pixels de la petite image.
Les images ne seront pas transférées automatiquement sur le site de l'hébergeur, vous devrez le faire manuellement.
 


Edité par Hobby001 - 11 Sep 2015 à 22:04
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 Sep 2015 à 20:45
Message posté par Hobby001 Hobby001 a écrit:


Mettre la même image deux fois ne peut en aucun cas donner un zoom.


Je me rétracte, ça fonctionne très bien avec une seule image

<script src="js/jquery.elevatezoom.js" type="text/javascript"></script>
<img id="WEImage1" src="Files/Image/ElevateZoomLarge.jpg" data-zoom-image="Files/Image/ElevateZoomLarge.jpg"/>

En revanche, ça ne fonctionne pas avec la petite image.


Edité par Hobby001 - 11 Sep 2015 à 21:03
Haut de la page
Dmit OE allez vers le bas
Admin Group
Admin Group


Depuis le: 31 Mai 2012
Status: Inactif
Points: 13971
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Dmit OE Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 19 Sep 2015 à 15:19
Bonjour,

Il faut mettre le code HTML d'une image dans un Bloc de Code Visuel.
Sinon on peut utiliser l'element-image, trouver son ID dans Proprietes, puis dans le code ecrire

....$('#WEid_element_image  img')....

pour acceder la balise <img> de cet element.

Cordialement
D
Haut de la page
pat76lh allez vers le bas
Newbie
Newbie
Avatar

Depuis le: 07 Sep 2015
Pays: france
Status: Inactif
Points: 6
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer pat76lh Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 28 Sep 2015 à 15:55
De retour de vacances , je trouve vos réponses et vous en remercie grandement
je vais tester tout cela
enocre merci de votre aide
crdialement
Pat76lh
Haut de la page
pat76lh allez vers le bas
Newbie
Newbie
Avatar

Depuis le: 07 Sep 2015
Pays: france
Status: Inactif
Points: 6
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer pat76lh Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 30 Sep 2015 à 11:07
bon cela fonctionne...en partie
le zoom fonctionne avec les parametres dans une page de test sans autres elements.
dans mon projet , il fonctionne egalement mais les parametres cursor ne sont pas pris en compte et le zoomType n accepte que le parametre "lens" et non "inner" ou windows"..
et je ne comprend vraiment pas pourquoi..
 <img id="WEzoomin" src="Files/Image/DSC04837.JPG" data-zoom-image="Files/Image/DSC04837.JPG" height="150"/>
$("#WEzoomin").elevateZoom({ zoomType : "lens", cursor: "crosshair" });
de plus le zoom passe en dessous de l image alors qu en page test il est au dessus...
mystères ...

Haut de la page
pat76lh allez vers le bas
Newbie
Newbie
Avatar

Depuis le: 07 Sep 2015
Pays: france
Status: Inactif
Points: 6
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer pat76lh Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 01 Oct 2015 à 10:02
en mettant une opacite de l image a 50% on voit bien l image zoom en dessous
j ai testé avec z-index pour mettre l image en arriere plan sans succes..

en fait des qu il y a un template l image "zoom" est en arriere plan..
j ai testé avec divers template ..tjrs identique
et cela semble etre le cas avec d autres scripts de zoom image...

qu en pensez-vous?



Edité par pat76lh - 01 Oct 2015 à 17:50
Haut de la page
 Répondre Répondre
  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.094 secondes.