Discussion :

[cookie72]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[danielhagnoul]

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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
		}
	});
 
});

[cookie72]

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