HTML, CSS, javascript, PHP

Интерсеный лайтбокс с разными типами вывода контента.

Вот код для вывода галереи:

$('.gallery').each(function() { // the containers for all your galleries
    $(this).magnificPopup({
        delegate: 'a', // the selector for gallery item
        type: 'image',
        gallery: {
          enabled:true
        }
    });
});

Или так:

// MagnificPopup
var magnifPopup = function() {
	$('.gallery').magnificPopup({
		type: 'image',
		delegate: 'a', // the selector for gallery item
		removalDelay: 300,
		mainClass: 'mfp-with-zoom',
		gallery:{
			enabled:true
		},
		zoom: {
			enabled: true, // By default it's false, so don't forget to enable it

			duration: 300, // duration of the effect, in milliseconds
			easing: 'ease-in-out', // CSS transition easing function

			// The "opener" function should return the element from which popup will be zoomed in
			// and to which popup will be scaled down
			// By defailt it looks for an image tag:
			opener: function(openerElement) {
			// openerElement is the element on which popup was initialized, in this case its <a> tag
			// you don't need to add "opener" option if this code matches your needs, it's defailt one.
			return openerElement.is('img') ? openerElement : openerElement.find('img');
			}
		}
	});
};