Magic Zoom Plus gallery combined with YouTube and Vimeo videos
<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&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 touch', 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> |
This comment has been minimized.
This comment has been minimized.
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. |
This comment has been minimized.
This comment has been minimized.
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! |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This comment has been minimized.