Ligtbox avec des images

Version imprimable

Bonjour,
je suis actuellement en train de réaliser mon site perso sur wordpress.
actuellement voici le script pour ma ligthbox :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 (function($){ $(document).ready(function() { $('.gallery-link').magnificPopup({ type:'image', gallery:{enabled:true}, image: { titleSrc: function(item) { return '<h3>' + item.el.attr('title') + '</h3>' + '<p>' + item.el.attr('data-description') + '</p>'; } }, }); }); })( jQuery );
j'aurais voulu pouvoir insérer des images mais actuellement c'est impossible. il n'y a que le texte qui apparaît, ma lightbox ne reconnait pas les images... je suppose que c'est lié à la valeur 'data-description' ? quelqu'un peut-il m'aider ?

Merci d'avance (j'espère que je suis assez claire dans ma demande:?).
stéphanie

Je ne connais pas ce plugin, mais il y a une belle documentation et des exemples.

http://dimsemenov.com/plugins/magnific-popup/

Le code source du premier exemple : Single image lightbox.

Code:

1
2
3
4
5
6
7
8
9
<a class="image-popup-vertical-fit" href="http://farm9.staticflickr.com/8241/8589392310_7b6127e243_b.jpg" title="Caption. Can be aligned to any side and contain any HTML.">
	<img src="http://farm9.staticflickr.com/8241/8589392310_7b6127e243_s.jpg" width="75" height="75">
</a>
<a class="image-popup-fit-width" href="http://farm9.staticflickr.com/8379/8588290361_ecf8c27021_b.jpg" title="This image fits only horizontally.">
	<img src="http://farm9.staticflickr.com/8379/8588290361_ecf8c27021_s.jpg" width="75" height="75">
</a>
<a class="image-popup-no-margins" href="http://farm4.staticflickr.com/3721/9207329484_ba28755ec4_o.jpg">
	<img src="http://farm4.staticflickr.com/3721/9207329484_ba28755ec4_o.jpg" width="107" height="75">
</a>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
$(document).ready(function() {
 
	$('.image-popup-vertical-fit').magnificPopup({
		type: 'image',
		closeOnContentClick: true,
		mainClass: 'mfp-img-mobile',
		image: {
			verticalFit: true
		}
 
	});
 
	$('.image-popup-fit-width').magnificPopup({
		type: 'image',
		closeOnContentClick: true,
		image: {
			verticalFit: false
		}
	});
 
	$('.image-popup-no-margins').magnificPopup({
		type: 'image',
		closeOnContentClick: true,
		closeBtnInside: false,
		fixedContentPos: true,
		mainClass: 'mfp-no-margins mfp-with-zoom', // class to remove default margin from left and right side
		image: {
			verticalFit: true
		},
		zoom: {
			enabled: true,
			duration: 300 // don't foget to change the duration also in CSS
		}
	});
 
});

14/08/2016, 11h54
cookie72

merci, je vais essayer. je vous tiens au courant.
stéphanie