[Résolu] Lightbox : jquery + fancybox

soupaloignon · 21/06/2014 11:49:59

Bonjour à tous,

Je cherche un moyen simple de faire un effet lightbox sur des images. Après quelques recherches sur le forum je suis tombé sur ce poste de Stefpei qui correspond parfaitement à ce que je veux faire :
http://ziteplus.giausserand.fr/forum/vi … 9533#p9533

SOn explication en ligne (merci à toi Stefpei) est très claire :
http://avantage-web.net/clients/process … ncybox.png

Par contre cela part du postulat que jquery et fancybox soient déjà installés. C'est le cas pour jquery si j'en crois le source de ma page

[== Indéfini  ==]
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script src="js/codemirror/codemirror.js" type="text/javascript"></script>

Mais pas pour fancybox ... Et c'est là que je coince car je ne sais absolument pas comment installer ce truc.

J'ai fait quelques tests en recopiant ce fichier : http://www.pigmentsetvermeil.com/js/jqu … -1.3.4.css
Et après l'avoir copier à la racine du dossier js. Mais cela n'a rien donné.

En bref, avez vous des infos sur la manière d'installer fancybox et de pouvoir retrouver cette classe "zoomer" ?

Merci d'avance

###################################

Edit : Bien sur je continu mes recherches. Pour le moment j'ai récupéré fancy box ici :
http://fancyapps.com/fancybox/#license

J'ai renommé le dossier en fancybox et j'ai mis ça dans le répertoire js. Le dossier contient ça :

[== XML ==]
├── demo
│   ├── 1_b.jpg
│   ├── 1_s.jpg
│   ├── 2_b.jpg
│   ├── 2_s.jpg
│   ├── 3_b.jpg
│   ├── 3_s.jpg
│   ├── 4_b.jpg
│   ├── 4_s.jpg
│   ├── 5_b.jpg
│   ├── 5_s.jpg
│   ├── ajax.txt
│   ├── iframe.html
│   └── index.html
├── .gitattributes
├── lib
│   ├── jquery-1.10.1.min.js
│   ├── jquery-1.9.0.min.js
│   └── jquery.mousewheel-3.0.6.pack.js
├── README.md
├── source
│   ├── blank.gif
│   ├── fancybox_loading@2x.gif
│   ├── fancybox_loading.gif
│   ├── fancybox_overlay.png
│   ├── fancybox_sprite@2x.png
│   ├── fancybox_sprite.png
│   ├── helpers
│   │   ├── fancybox_buttons.png
│   │   ├── jquery.fancybox-buttons.css
│   │   ├── jquery.fancybox-buttons.js
│   │   ├── jquery.fancybox-media.js
│   │   ├── jquery.fancybox-thumbs.css
│   │   └── jquery.fancybox-thumbs.js
│   ├── jquery.fancybox.css
│   ├── jquery.fancybox.js
│   └── jquery.fancybox.pack.js
└── sprite.psd

J'ai ensuite collé ça directement dans le head du template :

[== HTML ==]
<link rel="stylesheet" href="js/fancybox/source/jquery.fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/fancybox/source/jquery.fancybox.pack.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$("a.zoomer").fancybox({
			'titlePosition'	: 'outside',
			'padding'	  	: 0,
			'margin'	  	: 0,
			'overlayOpacity': 0.9,
			'overlayColor'	: '#AE926A',
			'transitionIn'	: 'elastic',
			'transitionOut'	: 'elastic'
		});
	});
</script>

Mais je ne retrouve pas dans l'éditeur de lien la classe zoomer dont parlait Stefpei ...

Je continu mes investigations ...

Edit du dimanche : rien de nouveau, je ne trouve pas de solutions

Dernière modification par soupaloignon (23/06/2014 20:50:15)

Stefpei · 23/06/2014 09:21:44

pour retrouver la classe "zoomer" dans l'editeur il faut que tinymce sache ou trouver la feuille de style.
--> dans zplus/tinimce.php, remplacer la ligne "content_css : ", par "content_css : "editiny.css",
editiny.css est la feuille de style regroupant les styles que je veux retrouver dans l'éditeur...
Je laisse dans "standard.css" ceux inutiles (ou gènant) dans tinymce...

N'oublie pas de joindre "jquery.easing.min" (c'est ce qui provoque l'ouverture en souplesse et le déplacement de l'image (de la vignette au zoom)

Important :
j'ai galéré pendant des heures vendredi avant d'apprendre que Fancybox ne fonctionne plus à partir de "jquery-1.9" : j'utilise donc "jquery-1.8.3"

Fouille dans ma page de vendredi : http://www.marie-reberat.com/shop/8-cha … -gris.html
Fancybox est installé sur la photo et sur le "guide des tailles"

soupaloignon · 23/06/2014 10:20:26

Un grand merci Stefpei, je m'y replonge dans la journée et te tiens au courant

soupaloignon · 23/06/2014 13:02:15

Cela ne fonctionne pas encore, mais j'avance

Je retrouve bien la classe zoomer, avec le fichier "editiny.css" (que j'ai mis à la racine de zite avec les autres fichiers css). Dans "editiny.css" j'ai mis ce code, récupéré sur le site dont tu m'as donné le lien

[== CSS ==]
.zoomer{}
a.zoomer img{margin:0 0 25px 25px ;padding:5px;background-color:#FFFFFF;border:1px #DAD6CB solid}
a:hover.zoomer img{border:1px #990000 solid}

Par contre je n'ai pas compris ta phrase : "N'oublie pas de joindre "jquery.easing.min"
C'est quoi ça ?

Stefpei · 23/06/2014 14:42:35

"jquery.easing.min" permet d'ouvrir plus en "douceur" la grande image, et fait qu'elle part de la vignette, et s'y referme aussi vers elle.

Voici ce que j'utilise dans mes pages :
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/jquery.fancybox-1.3.4.pack.js"></script>

soupaloignon · 23/06/2014 15:32:22

Merci pour ta réponse

Hélas cela ne fonctionne toujours pas. Cela m'ouvre l'image dans une nouvelle page, mais rien de plus.

Cela donne ça dnas mon "Head", cela te parait correct ?

[== HTML ==]
<link rel="stylesheet" href="/js/fancybox/source/jquery.fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="/js/fancybox/source/jquery.fancybox.pack.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>

<script type="text/javascript">
	$(document).ready(function() {
		$("a.zoomer").fancybox({
			'titlePosition'	: 'outside',
			'padding'	  	: 0,
			'margin'	  	: 0,
			'overlayOpacity': 0.9,
			'overlayColor'	: '#AE926A',
			'transitionIn'	: 'elastic',
			'transitionOut'	: 'elastic'
		});
	});
</script>

Je n'ai pas mis ton

[== HTML ==]
<script type="text/javascript" src="js/jquery.fancybox-1.3.4.pack.js"></script>

Puisque cela semble correspondre à

[== HTML ==]
<script type="text/javascript" src="/js/fancybox/source/jquery.fancybox.pack.js"></script>

Dernière modification par soupaloignon (23/06/2014 15:33:39)

Stefpei · 23/06/2014 20:19:05

problème résolu :
c'était les droits des répertoires qui empêchaientt le fonctionnement !...

Dernière modification par Stefpei (23/06/2014 20:19:30)

soupaloignon · 23/06/2014 20:29:55

Un grand merci pour ton aide précieuse Stéphane

Je vais faire un petit tuto qui reprendra les étapes, cela servira bien à quelqu'un

Dernière modification par soupaloignon (23/06/2014 20:30:37)

Forum ZitePLUS

#1 21/06/2014 11:49:59

[Résolu] Lightbox : jquery + fancybox

#2 23/06/2014 09:21:44

Re : [Résolu] Lightbox : jquery + fancybox

#3 23/06/2014 10:20:26

Re : [Résolu] Lightbox : jquery + fancybox

#4 23/06/2014 13:02:15

Re : [Résolu] Lightbox : jquery + fancybox

#5 23/06/2014 14:42:35

Re : [Résolu] Lightbox : jquery + fancybox

#6 23/06/2014 15:32:22

Re : [Résolu] Lightbox : jquery + fancybox

#7 23/06/2014 20:19:05

Re : [Résolu] Lightbox : jquery + fancybox

#8 23/06/2014 20:29:55

Re : [Résolu] Lightbox : jquery + fancybox

Pied de page des forums