32
Faire un zoom sur les images grâce à Fullsize et jQuery
Fullsize est un plugin permettant de faire un zoom sur vos images, très simple d’utilisation vous pourrez grâce à cet article installer Fullsize de façon simple et claire sur votre site personnel, offrant à vos visiteurs une fonctionnalité utile et vraiment incroyable !
Il y a quelques temps je me suis mis à la recherche d’un plugin jQuery efficace pour gérer la prévisualisation de l’image postée sur wks. Ce plugin devait être légé et rapide, tout en créant un effet incroyable de zoom sur l’image. Je cherchais en fait un plugin du type lightbox mais de nouvelle génération.
Je suis tombé sur un très bon plugin que j’ai installé de suite sur wks.fr, cependant après un peu plus d’un mois de test je me suis rendu compte qu’il n’était pas forcemment en parfaite adéquation avec les besoins de wks.fr :
- problème de lenteur quand le script est appelé sur beaucoup d’image à la fois
- problème de bugs lorsque l’utilisateur clique plusieurs fois sur plusieurs images
- problème de graphisme (j’ai jamais réellement été persuadé par sa présentation)
- problème au niveau des liens (en effet ce plugin n’est pas adapté aux double destinations)
Il y a quelques jours je me suis donc remis à chercher, au départ sans résultat. Puis je suis tombé sur le plugin Fullsize. J’ai de suite été séduit par le principe de simplicité absolue.
Ajoutez donc un tag à une image et celle-ci se transformera automatiquement en une image zoomable, bon rien de nouveau. Surtout si on ne prend pas en compte le fait :
- Qu’un utilisateur clique sur une petite icône pour zommer l’image
- Qu’il peut cliquer sur l’image pour une double destination
- Que le plugin est léger et simple
- Que le curseur change lors de clics
- Que le design est sympa et glossy …
Bref comme je vous l’ai dit, j’ai été séduit. Je me suis donc dit qu’il était obligatoire d’installer ce plugin sur wks.fr puis de le partager avec la communauté de wks.fr qui j’en suis certain, sera forcement intéressé par un tel travail !
Voici donc en quelques étapes la méthode d’installation de ce plugin sur votre site Internet.
ETAPE 1
Je me rends sur le site officiel pour prendre connaissance (en anglais) de ce que représente le plugin et comment il s’installe. Je peux télécharger le plugin directement sur le site bien que je propose en bas de cette page un zip mieux rangé et surtout correspondant aux explications françaises de ce tutoriel.
ETAPE 2
Je me rends ensuite sur le site de jquery pour télécharger la bibliothèque JavaScript. Remarque : cette étape est inutile si vous utilisez le fichier zip de wks.fr !
ETAPE 3
Ensuite je télécharge le fichier en bas de cette page, puis je dézippe tous les fichiers en gardant la hiérarchie des dossiers. Vous pouvez alors identifier trois dossiers :
- css : ce dossier contient la feuille de style css nécessaire à la mise en page du script
- js : ce dossier contient tous les fichiers javascript nécessaires au fonctionnement du script
- gallery : ce dossier contient les images utilisées dans la page d’exemple.
Le fichier index.html est une page de test où vous pourrez essayer le script fullsize.
ETAPE 4
Voici maintenant les explications pour ajouter ce script à votre site Internet. Première étape, je copie puis je colle les dossiers js et css à la racine de votre site Internet.
ETAPE 5
Ensuite il faut ajouter les imports javascript et CSS. Vous ouvrez donc votre fichier html, php, asp … selon votre cas puis vous ajoutez ces lignes.
Ce code doit se placer entre les balises
de votre page.Pour importer les fichiers javascript :
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.fullsize.pack.js"></script>
Attention : changer le js/ si vous avez modifié le nom des dossiers !
Puis ajoutez la ligne ci-dessous pour importer la feuille de style css :
<link href="css/fullsize.css" media="screen" rel="stylesheet" type="text/css" />
ETAPE 6
Vous allez maintenant initialiser le script dans la page, pour cela il faut ajouter ces quelques lignes :
Ce code doit se placer entre les balises
de votre page.
<script type="text/javascript">
$(function(){
$("img").fullsize({shadow: true, iconOffset: 2, extraTrigger: ".myClass", forceTitleBar: true,parentSteps: 2});
});
</script>
La ligne contient plusieurs options qui peuvent être modifiées, ainsi si vous changez shadow :true par shadow :false, les images s’afficheront en grand mais sans l’ombre portée. Rendez vous sur le site officiel pour la liste de toutes les options disponibles !
ETAPE 7
Ensuite c’est très simple il suffit d’ajouter un simple tag dans votre image pour qu’un lien fullsize vienne s’ajouter à celle-ci.
Normalement en HTML on ajoute une image à une page en écrivant :
<img src="gallery/frame-01.jpg" alt="image01" title="Titre de l'image 01" />
Pour ajouter l’effet de zoom sur cette image il vous faudra simplement ajouter longdesc, voila ce que cela donne pour la même ligne de code.
<img src="gallery/frame-01.jpg" alt="image01" longdesc="gallery/01.jpg" title="Titre de l'image 01" />
Simple non ? Ce tag est à appliquer sur toutes les images qui devront avoir cette fonctionnalité de zoom !
Voila ce tutoriel est déjà terminé. J’espère que vous apprecierez autant créer des pages internet que des fichiers sous Photoshop 
Si vous avez des questions n’hésitez pas à poster vos messages dans les commentaires ci-dessous.
Merci à tous d’avoir lu ce nouveau tutoriel sur WonkaStudio !
Le site officiel du plugin : www.addfullsize.com
Téléchargement des fichiers sources liés à ce tutorial
Veuillez vous connecter pour télécharger les fichiers sources
Article publié par Wonka
Vous aimez cet article? Partagez le !
Je suis très humblement le webmaster et le créateur de ce site, vous êtes en ce moment sur ma fiche membre, vous avez la possibilité de m’’envoyer des messages, pour toutes questions n’hésitez pas une seule seconde !
La galerie des membres
Voici les images déjà publiées par les membres de ce site, merci à vous pour votre créativité !
Questions et commentaires, Il y a 20 messages de forum.
Vous avez besoin d’eclaircicemment sur un points évoqués dans cette leçon, dans ce cas laissez votre question en utilisant le formulaire ci dessous, notre équipe vous apportera rapidement un complètement d’information. Merci d’être le plus précis possible lors de la rédaction de votre demande.
-
29 avril 2009 15:47, par HH
ça marche supper
perso j’ai changer un peu le code pour que l’on puisse fermer le zoom en cliquant sur l’image agrandi t’aurais pas un script du meme genre avec autant de style pour faire une infobulle
Répondre
? -
28 mai 2009 10:37, par lalayela
Salut ! J’aurai aimé savoir si quelqu’un aurait pu modifier le code pour permettre le zoom en cliquant directement sur l’image et non seulement avec le petit icone noir dans le coin ... un peu comme dans cet exemple http://unidentifiedhuman.be/imageplus/
la source du message : http://groups.google.com/group/fullsize/t/b0d66a913206cd6b
J’ai bien tenté, mais le résultat n’était pas la ...
Répondre-
28 mai 2009 17:43, par Wonka
Tout l’interet du plugin repose sur cette petite astuce ! Donc ca ne servirai à rien d’essayer de le retirer ! Choisis plutôt un autre script comme lightbox ce sera plus simple.
Répondre-
29 mai 2009 00:02, par lalayela
J’ai beau chercher, les autres scripts ne sont pas aussi beaux et efficaces que celui-ci .... a moins que vous en connaissiez un qui m’ait échappé ...
Répondre
-
-
-
11 juillet 2009 15:43, par Marco
Comment faire pour ajouter un lien internet sur l’image qui est zoomée ??
Répondre -
28 juillet 2009 19:22, par dede425
Salut ! Vu que mes photos sont aux formats 800x600 au maximum, avec votre façon de faire, mes images sont déformées ??? Et je ne trouve pas l’astuce pour corriger... A tout hasard, vous ne sauriez pas comment utiliser (ou isoler...) la façon de ce site : fotolia.com... Car je la trouve géniale !!! Merci de votre aide.
Répondre -
2 décembre 2009 23:57, par megarakhaz
Bonsoir Wonka, et merci pour ce tuto ! J’ai un petit soucis (débutante), je dois créer deux images ? La miniature + la grande qui sera zoomer ? Merci d’avance de votre réponse !
Répondre -
14 février 2010 17:29, par Webmasterdusite
Bonjour est ce que votre plugin fullsize fonctionne sur tout les sites ou y a t’il des incompatibilités ?
Répondre -
7 mars 2010 15:46, par bassdripper
Pour ceux qui chercher comment faire pour zoomer leur image sans avoir l icone en haut a gauche ben vous modifier ces trois lignes dans le fichier fullsize.css :
.fullsize-icon {
position: absolute;
margin: 0;
padding: 0;
"celle ci et"
width: 30px;
"celle ci"
height: 30px;
"et vous supprimer celle la"
background: transparent url(fullsize-icon.png) no-repeat left top;
z-index: 950;
cursor: url(fullsize.cur), auto;
}et vous les remplacez par la taille de votre image moi j ai tout mis a 100px pour mes images regarder l onglets atelier
ce qui nous donne ceci :
.fullsize-icon {
position: absolute;
margin: 0;
padding: 0;
width: 100px;
height: 100px;
z-index: 950;
cursor: url(fullsize.cur), auto;
}En espérant que ca puisse vous aidez
Répondre -
26 mars 2010 10:32, par nyx
Je pensais avoir respecté ce tuto à la lettre pourtant j’ai ce message d’erreur : Détails de l’erreur de la page Web
Agent utilisateur : Mozilla/4.0 (compatible ; MSIE 8.0 ; Windows NT 5.1 ; Trident/4.0 ; .NET CLR 2.0.50727 ; .NET CLR 3.0.04506.30 ; Dealio Toolbar 3.1.1 ; .NET CLR 3.0.4506.2152 ; .NET CLR 3.5.30729) Horodateur : Fri, 26 Mar 2010 09:31:16 UTC
Message : ’jQuery’ est indéfini. Ligne : 31 Caractère : 1 Code : 0 URI : http://www.cxibe.com/TSS/Include/fullsize/jquery.fullsize.js
Message : ’jQuery’ est indéfini. Ligne : 30 Caractère : 1 Code : 0 URI : http://www.cxibe.com/TSS/Include/fullsize/jquery.fullsize.minified.js
Message : Objet attendu Ligne : 11 Caractère : 9 Code : 0 URI : http://www.cxibe.com/TSS/zoom.php
Ma page de test se trouve a cette URL : http://www.cxibe.com/TSS/zoom.php
H E L P !! Par avance merci
Répondre -
28 avril 2010 22:04, par stephan
bonjour super ce script
est il possible d’avoir le zoom directement sans avoir a cliquer sur la souris genre comme sur http://www.mind-projects.it/projects/jqzoom/index.php#download
le problème de ce dernier, on ne paut pas avoir un lien sur l’image
merci stéphan
Répondre -
17 novembre 2010 01:52, par Acturus
Et ben... ca fait un moment que je cherche un script de zoom de cet acabit ! Vraiment, merci ! Ca va aiguiller un pue mon site ^^ Sympa votre blog soit dit en passant
Répondre Allez zou... en favoris ! -
26 novembre 2010 18:17, par pabb
J’ai suivi les étapes et les recommandations ... Quand je clique sur la douoble flèche, la seule chose que j’obtiens c’est l’horloge qui se met en marche indéfiniment sans plus ...
Répondre -
26 novembre 2010 18:21, par pabb
Il y a une lacune dans ces explications : C’est OU qu’il faut metttre les codes ?
Vous dites : Ce code doit se placer entre les balises de votre page
Oui, bien sur, c’est évident ... mais LESQUELLES ? Head, ou Body ???
Répondre-
9 février 11:22, par Votre pseudonymefeeling03
je suis d’accord. même reproches. çà ne marche pas. Aucune explication sur l’emplacement des icônes lié au programme. le fichier jquery.fullsize.pack.js n’existe pas dans la version que j’ai téléchargé sur le site officiel. çà manque de précision !!! Dommage !!!
Répondre
-
-
30 novembre 2010 15:20, par moulepower
Bonjour, je trouve ce script très bien fait et merci d’avoir pris la peine de nous expliquer la marche à suivre en français (ce qui est assez rare dans ce domaine).
Mais j’aurais une question. Est-ce que quelqu’un sait comment faire pour que cette lightBox passe au dessus des zones vidéos ? En effet, lorsque la box se déploie, elle passe en dessous de la vidéo youtube que j’ai intégré sur mon site.
Répondre
