Last active
July 13, 2016 06:16
-
-
Save ishugurov/2dbd2ef83f4a650d98ba076d99d2e5c1 to your computer and use it in GitHub Desktop.
Magic Zoom Plus gallery combined with YouTube and Vimeo videos
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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="#"> | |
<img src="https://magictoolbox.sirv.com/images/magiczoomplus/youtube.png?canvas.width=75&canvas.height=75&scale.width=65"/> | |
</a> | |
<a data-slide-id="video-2" href="#"> | |
<img src="https://magictoolbox.sirv.com/images/magiczoomplus/vimeo.png?canvas.width=75&canvas.height=75&scale.width=65"/> | |
</a> | |
</div> | |
</div> | |
<script> | |
$('.zoom-gallery .selectors a').click(function(e) { | |
$('.zoom-gallery .zoom-gallery-slide').removeClass('active'); | |
$('.zoom-gallery .selectors a').removeClass('active'); | |
$('.zoom-gallery .zoom-gallery-slide[data-slide-id="'+$(this).attr('data-slide-id')+'"]').addClass('active'); | |
$(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; | |
} | |
</style> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment