Magic Zoom Plus gallery combined with YouTube and Vimeo videos

magiczoomplus-video-gallery.html

<div class="zoom-gallery">
    <div data-slide-id="zoom" class="zoom-gallery-slide active">
        <a href="https://magictoolbox.sirv.com/images/magiczoomplus/nike-01.jpg" class="MagicZoom" id="zoom-v">
            <img src="https://magictoolbox.sirv.com/images/magiczoomplus/nike-01.jpg?scale.width=400"/>
        </a>
    </div>
    <div data-slide-id="video-1" class="zoom-gallery-slide video-slide">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/J91IcJE6Clg" frameborder="0" allowfullscreen></iframe>
    </div>
    <div data-slide-id="video-2" class="zoom-gallery-slide video-slide">
        <iframe src="https://player.vimeo.com/video/134250658?byline=0&amp;portrait=0" width="475" height="267" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
    </div>
    <div class="selectors">
        <a data-slide-id="zoom" class="active" href="https://magictoolbox.sirv.com/images/magiczoomplus/nike-01.jpg" data-image="https://magictoolbox.sirv.com/images/magiczoomplus/nike-01.jpg?scale.width=400" data-zoom-id="zoom-v">
            <img src="https://magictoolbox.sirv.com/images/magiczoomplus/nike-01.jpg?scale.width=75"/>
        </a>
        <a data-slide-id="zoom" href="https://magictoolbox.sirv.com/images/magiczoomplus/nike-02.jpg" data-image="https://magictoolbox.sirv.com/images/magiczoomplus/nike-02.jpg?scale.width=400" data-zoom-id="zoom-v">
            <img src="https://magictoolbox.sirv.com/images/magiczoomplus/nike-02.jpg?scale.width=75"/>
        </a>
        <a data-slide-id="zoom" href="https://magictoolbox.sirv.com/images/magiczoomplus/nike-03.jpg" data-image="https://magictoolbox.sirv.com/images/magiczoomplus/nike-03.jpg?scale.width=400" data-zoom-id="zoom-v">
            <img src="https://magictoolbox.sirv.com/images/magiczoomplus/nike-03.jpg?scale.width=75"/>
        </a>
        <a data-slide-id="video-1" href="#">
            <span class="glyphicon glyphicon-play"></span>
            <img src="http://i1.ytimg.com/vi/J91IcJE6Clg/1.jpg"/>
        </a>
        <a data-slide-id="video-2" href="#">
            <span class="glyphicon glyphicon-play"></span>
            <img src="http://i.vimeocdn.com/video/527672867_100x75.jpg"/>
        </a>
    </div>
</div>

<script>
    jQuery('.zoom-gallery .selectors a').on('click touchend', function(e) {
        var iframe = jQuery('.active iframe[src*="youtube"],.active iframe[src*="vimeo"]');
        if (iframe.length) {
            iframe.attr('src',iframe.attr('src'));
        }
        jQuery('.zoom-gallery .zoom-gallery-slide').removeClass('active');
        jQuery('.zoom-gallery .selectors a').removeClass('active');
        jQuery('.zoom-gallery .zoom-gallery-slide[data-slide-id="'+jQuery(this).attr('data-slide-id')+'"]').addClass('active');
        jQuery(this).addClass('active');
        e.preventDefault();
    });
</script>

<style type="text/css">
    .zoom-gallery { 
        text-align: center; 
    }
    .zoom-gallery-slide { 
        display: none; 
    }
    .zoom-gallery-slide.active { 
        display: block; 
    }
    .zoom-gallery .video-slide {
        position:relative;
        padding-bottom:56.25%;
        padding-top:30px;
        height:0;
        overflow:hidden;
    }
    .zoom-gallery .video-slide iframe, 
    .zoom-gallery .video-slide object,
    .zoom-gallery .video-slide embed {
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
    }
    .zoom-gallery .selectors { 
        text-align: center; 
        margin:10px 0; 
    }
    .zoom-gallery .selectors a { 
        margin:5px; 
        border:1px solid transparent; 
        display: inline-block; 
    }
    .zoom-gallery .selectors a:hover,
    .zoom-gallery .selectors a.active { 
        border-color: #ccc; 
    }
    .zoom-gallery .selectors img { 
        box-shadow: none !important; 
        filter:none !important; 
        -webkit-filter: none !important;
        height: 75px;
    }
    .zoom-gallery .selectors a[data-slide-id=video-1],
    .zoom-gallery .selectors a[data-slide-id=video-2] { 
        position: relative;
    }
    .zoom-gallery .selectors a[data-slide-id=video-1] img,
    .zoom-gallery .selectors a[data-slide-id=video-2] img { 
        opacity: 0.8;
    }
    .zoom-gallery .selectors a span {
        position: absolute;
        color:#fff;
        text-shadow: 0px 1px 10px #000;
        top:50%;
        left:50%;
        display: inline-block;
        transform:translateY(-50%) translateX(-50%); 
        -webkit-transform:translateY(-50%) translateX(-50%);
        font-size:30px;
        z-index: 100;
    }
</style>

Hi, In this case using built-in arrows wont work.. Instead you can add custom arrows and use them like in this example - https://demo.sirv.com/support/221381/index-ex-video.html Best regards, Igor Shugurov P.S. if you want a faster website and better SEO, that's exactly why we built Sirv. Try it here: http://bit.ly/c-sirv

-- Magic Toolbox www.magictoolbox.com 04/12/20 06:20 +0000, Magic-Toolbox <reply@reply.github.com> wrote:

Hello, Thank you very much for this code. However, I was trying to add the arrows in this slider but not able to reach the video slide with arrows. Can you please help? Here is my code: ` var mzOptions = { cssClass: "mz-show-arrows", onZoomReady: function() { if($(".zoom-gallery").length){ /* video on next arrow*/ var activeThumb = $(".zoom-gallery .selectors a.active"), nextThumb = $(activeThumb).next(), prevThumb = $(activeThumb).prev(), thumbCounter = 1, totalThumbs = $(".zoom-gallery .selectors a").length; $(".mz-button-next").click(function(e){ e.preventDefault(); if(thumbCounter == totalThumbs + 1 ) { MagicZoom.switchTo("zoom-v", 0); thumbCounter = 0; } thumbCounter++; $(".zoom-gallery .selectors a").removeClass("active mz-thumb-selected"); $(nextThumb).addClass("active mz-thumb-selected"); var iframe = $('.active iframe[src*="youtube"]'); if (iframe.length) { iframe.attr('src',iframe.attr('src')); } if(thumbCounter == totalThumbs) { console.log("counter is same as total"); $('.zoom-gallery .selectors a').removeClass("active mz-thumb-selected"); $('.zoom-gallery .selectors a[data-thumbnail='+totalThumbs+']').addClass("active mz-thumb-selected"); activeThumb = $(".zoom-gallery .selectors a.active"); nextThumb = $(".zoom-gallery .selectors a:first-child"); thumbCounter++; } else { activeThumb = $(".zoom-gallery .selectors a.active"); nextThumb = $(activeThumb).next(); } $('.zoom-gallery .zoom-gallery-slide').removeClass('active'); $('.zoom-gallery

.zoom-gallery-slide[data-slide-id="'+$(activeThumb).attr('data-slide-id')+'"]').addClass('active');

…

}); /* video on next arrow*/ } }, onExpandOpen: function() { $(".mz-expand").insertAfter(".MagicZoom"); }, onUpdate: function() { }, onZoomIn: function() { }, onZoomOut: function() { }, onExpandClose: function() { $(".mz-nav-controls").insertAfter("#zoom-fig"); } }; `

Videos doesn't appear in the Expanded view.

Even in the example (Combined with YouTube and Vimeo videos) https://www.magictoolbox.com/magiczoomplus/examples/ videos doesn't appear in Expanded view.

Hi Ohmniox!

Magic Zoom Plus doesn't support videos in fullscreen view.

If you would like to show videos in fullscreen view, you may like to try Magic Thumb. Magic Thumb displays images and videos in its lightbox effect:

https://www.magictoolbox.com/magicthumb/integration/#using-video

Or consider using Sirv Media Viewer. Sirv Media Viewer displays images, videos and 360 spins in the fullscreen view:

https://sirv.com/help/articles/sirv-media-viewer/

Thanks!

Hello,

I currently adding this solution to our product page to display videos.
There seems to be an issue with mobile view and selecting images.
Is there any other documentation on this?

Thank you,
Ron

Hello,

I currently adding this solution to our product page to display videos.
There seems to be an issue with mobile view and selecting images.
Is there any other documentation on this?

Please try to change following line:

jQuery('.zoom-gallery .selectors a').on('click touch', function(e) {

changed to:

jQuery('.zoom-gallery .selectors a').on('click touchend', function(e) {

That worked, thank you.