I tried some ways from the same question from 2014, but they crushed all.
The full code is inside php file, it's important what the echo $link is - cause it's necessary to be exactly like this. Exactly with replacing etc, I need help ONLY with magnific.
Separately both
jQuery('.slider-big').magnificPopup............
and
jQuery('<?php echo '.' . $video_class; ?>').magnificPopup........
work fine, but not inside popup gallery. How to make iframes work inside the gallery?
function demolink_get_button(){
global $post;
$demo_links = array();
// Collect all demo links
for ($i = 1; $i <= 10; $i++) {
$demo_link = get_post_meta($post->ID, '_demo_link' . $i, true);
if ($demo_link) {
$demo_links[$i] = $demo_link;
}
}
if (!empty($demo_links)) {
wp_enqueue_script('magnific-popup', get_template_directory_uri() . '/assets/libs/jquery.magnific-popup.min.js', array('jquery'), null, true);
wp_enqueue_style('magnific-popup-css', get_template_directory_uri() . '/assets/libs/magnific-popup.css');
?>
<script type="text/javascript">
<?php
// Generate event handlers for each demo link
foreach ($demo_links as $index => $link) {
$video_class = 'video' . $index;
?>
jQuery(window).on('load', function() {
jQuery('.slider-big img[alt="Video <?php echo $index; ?>"]').parent('a').replaceWith('<a class="<?php echo $video_class; ?>" href="<?php echo $link; ?>"><video alt="Video <?php echo $index; ?>" class="<?php echo $video_class; ?>" muted allowfullscreen autoplay loop poster="https://example.com/wp-content/uploads/2024/01/play-icon.jpg" style="max-width:100%;"><source src="<?php echo $link; ?>" type="video/mp4"></video></a>');
jQuery('<?php echo '.' . $video_class; ?>').magnificPopup({
type: 'iframe',
iframe: {
patterns: {
wistia: {
index: 'example.com',
id: function(url) {
var m = url.match(/mp4\/([^"]*)/);
if (m !== null) {
if (m[4] !== undefined) {
return m[4];
}
return m[2];
}
return null;
},
src: '<?php echo $link; ?>'
}
}
}
});
jQuery('.slider-big').each(function() {
var gallery = $(this);
gallery.magnificPopup({
type: 'image',
delegate: 'a:not(.slick-cloned)',
closeBtnInside: false,
fixedContentPos: true,
mainClass: 'mfp-no-margins mfp-with-zoom',
image: {
verticalFit: true
},
gallery: {
enabled: true,
navigateByImgClick: false,
preload: [0,1] // Will preload 0 - before current, and 1 after the current image
},
});
});
});
<?php } ?>
</script>
<?php
}
}
In
jQuery('.slider-big').magnificPopup............
I need to add another one type, something like that, but how to make it work?
jQuery('.slider-big').each(function() {
var gallery = $(this);
gallery.magnificPopup({
type: 'image',
delegate: 'a:not(.slick-cloned)',
closeBtnInside: false,
fixedContentPos: true,
mainClass: 'mfp-no-margins mfp-with-zoom',
image: {
verticalFit: true
},
gallery: {
enabled: true,
navigateByImgClick: false,
preload: [0,1] // Will preload 0 - before current, and 1 after the current image
},
type: 'iframe',
iframe: {
patterns: {
wistia: {
index: 'example.com',
id: function(url) {
var m = url.match(/mp4\/([^"]*)/);
if (m !== null) {
if (m[4] !== undefined) {
return m[4];
}
return m[2];
}
return null;
},
src: '<?php echo $link; ?>'
}
},
});
});
});