search

dimsemenov / Magnific-Popup

Light and responsive lightbox script with focus on performance.
http://dimsemenov.com/plugins/magnific-popup/
MIT License
11.38k stars 3.49k forks source link

fade transition between gallery images #359

Open nicmare opened 10 years ago

nicmare commented 10 years ago

Can we have better transitions between gallery images, please? fading would be a good start! thank you

talengix commented 10 years ago

I am interested in this as well. Does anybody know how to achieve a fade effect between images? Cheers Kevin

nimmolo commented 10 years ago

@LucusWebsites' solution, posted here in previous issue Animation on Gallery - is so good I think it should be added to documentation.

There's a callback added for the change function, to add a class to the wrap when the gallery element is opened, and then some CSS transitions.

Note that LucusWebsites' solution only governs the fade between gallery images. Edit: As @nicmare notes, it doesn't do a proper crossfade. Old image is removed immediately by script and new image fades IN. But it looks pretty decent.

You can use the documented css animation separately for the opening and closing the gallery.

talengix commented 10 years ago

Hi,

I tried the following code and cannot get the fade to work. Can anybody see the problem in it? Thanks Kevin

$(document).ready(function() { $('.gallery-kinder').magnificPopup({ delegate: 'a', // child items selector, by clicking on it popup will open type: 'image', gallery: { enabled: true, callbacks: { change: function() { if (this.isOpen) { this.wrap.addClass('mfp-open'); } } } } }); });

nicmare commented 10 years ago

you forget the new css classes

vtmx commented 9 years ago

I like of transition this site: http://www.kriesi.at/themes/enfold/portfolio-item/single-portfolio-23-gallery-3/