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>

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.

I'm trying to get the video portion working with Miva Merchant. The basic installation went very well. Do I need to create a Product Custom Field? Do I have to create a thumbnail for the video? The Image Machine usually creates the image thumbnails. Any insights would be grateful.

I'm trying to get the video portion working with Miva Merchant. The basic installation went very well. Do I need to create a Product Custom Field? Do I have to create a thumbnail for the video? The Image Machine usually creates the image thumbnails. Any insights would be grateful.

You have to create a custom field where video URL will be stored. Then some extra code should be created (or existing Magic Zoom Plus code should be updated) so this video automatically adds to the gallery. You can contact Magic Toolbox if you need an assistance with that - https://magictoolbox.com/contact/

Thank you. I will try reaching out to them again. I sent them an email back in 2021 and never heard back from them.

Hi - is there a method for incorporating native video in to the scroller <video..> as opposed to Youtube/Vimeo?

@macca-droid , you can use video tag inside <div data-slide-id="video-..." class="zoom-gallery-slide video-slide"> ... </div>

thanks @ishugurov I think perhaps the problem is I'm combining with Magic Scroll as well - is it posible to have video in a Magic Zoom/Magic Scroll combination?

thanks @ishugurov I think perhaps the problem is I'm combining with Magic Scroll as well - is it posible to have video in a Magic Zoom/Magic Scroll combination?

Yes, it's possible. Code looks the same but tiny thumbnails list should be wrapped with <div class="MagicScroll">...</div>