How can I open both images and iframes with dynamic values in one gallery?

35 Views Asked by At

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; ?>'
                                                }
                                            },
                            });
                        });
                    });
0

There are 0 best solutions below