If you wanted to achieve something similar, you could try the following approach:
$('#gallery').magnificPopup({
[…],
callbacks: {
open: function() {
this.contentContainer.find('figure').shine();
},
resize: function() {
this.contentContainer.find('figure').trigger('resize.shine');
}
});
This code will trigger the shine effect only after the gallery popup is opened (when the open callback is invoked) and will adjust it according to any size changes.
This solution assumes that you are using the default markup provided by Magnific Popup for the popup. If you have a custom layout for the content with the shine effect, make sure to use an element other than <figure>.
You may also consider wrapping the <img> in a specific container and target that instead of the entire <figure> to limit the shine effect to just the image and not the entire popup container.
/**
* Overlay for images (gallery)
*
* @param {string} theme
*/
var openGallery = function(theme) {
};
// Galleries
$('ul.magnific-gallery').magnificPopup({
delegate: '> li > a',
type: 'image',
gallery: {
enabled: true
},
callbacks: {
open: function() {
var $shineEffect = this.contentContainer.find('figure');
$shineEffect.shine();
// Uncomment the code below to immediately start the effect
$shineEffect.off("mouseover.shine")
.off("mouseout.shine")
.off("focus.shine")
.off("blur.shine")
.trigger("start.shine");
},
resize: function() {
this.contentContainer.find('figure').trigger('resize.shine');
}
},
});
.magnific-gallery img {
max-width: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
<script src="https://rawgit.com/simeydotme/jQuery-canvas-sparkles/master/dist/jquery-canvas-sparkles.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css" rel="stylesheet" type="text/css">
<ul class="magnific-gallery">
<li>
<a href="http://i1232.photobucket.com/albums/ff372/Marcin_Gil/magnific%20example/flower1.jpg" title="Etiam ullamcorper.">
<img src="http://i1232.photobucket.com/albums/ff372/Marcin_Gil/magnific%20example/flower1.jpg" alt="" />
</a>
</li>
<li>
<a href="http://i1232.photobucket.com/albums/ff372/Marcin_Gil/magnific%20example/flower2.jpg" title="Cum sociis natoque penatibus." data-description="Estibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non, consectetuer lobortis quis, varius in, purus. Integer ultrices posuere cubilia.">
<img src="http://i1232.photobucket.com/albums/ff372/Marcin_Gil/magnific%20example/flower2.jpg" alt="" />
</a>
</li>
<li>
<a href="http://i1232.photobucket.com/albums/ff372/Marcin_Gil/magnific%20example/flower3.jpg" title="Maecenas malesuada.">
<img src="http://i1232.photobucket.com/albums/ff372/Marcin_Gil/magnific%20example/flower3.jpg" alt="" />
</a>
</li>
<li>
<a href="http://i1232.photobucket.com/albums/ff372/Marcin_Gil/magnific%20example/flower4.jpg" title="Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu, luctus et interdum adipiscing wisi." data-description="Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu, luctus et interdum adipiscing wisi.">
<img src="http://i1232.photobucket.com/albums/ff372/Marcin_Gil/magnific%20example/flower4.jpg" alt="" />
</a>
</li>
</ul>
In the updated snippet, I have modified the code to start the shine effect immediately by removing hover events and manually triggering "start.shine" within the open callback:
this.contentContainer.find('figure')
.off("mouseover.shine")
.off("mouseout.shine")
.off("focus.shine")
.off("blur.shine")
.trigger("start.shine");