"Bootstrap Zoom Gallery"
Bootstrap 4.0.0 Snippet by BharathKurapati

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<style type="text/css">
body {
overflow-y: scroll;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, sans-serif;
background: #f4f4f4;
padding: 0;
margin: 0;
}
h1 {
font-size: 31px;
line-height: 32px;
font-weight: normal;
margin-bottom: 25px;
}
a,
a:hover {
border: none;
text-decoration: none;
}
img,
a img {
border: none;
}
pre {
overflow-x: scroll;
background: #ffffff;
border: 1px solid #cecece;
padding: 10px;
}
.clear { clear: both; }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
#zoom {
z-index: 99990;
position: fixed;
top: 0;
left: 0;
display: none;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}
#zoom .content {
z-index: 99991;
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
background: #ffffff no-repeat 50% 50%;
padding: 0;
margin: -100px 0 0 -100px;
box-shadow: -20px 20px 20px rgba(0, 0, 0, 0.3);
}
#zoom .content.loading {
background-image: url('https://upload.wikimedia.org/wikipedia/commons/b/b1/Loading_icon.gif');
}
#zoom .content .overlay {
position: absolute;
border: 1px solid rgba(255, 255, 255, .08);
top: -1px;
left: -1px;
width: 100%;
height: 100%;
-webkit-user-select: none;
}
#zoom img {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
/*this file name is zoom.min.js*/
!function(o){function i(i){function e(){function i(o){d.html(o),o.show(),d.removeClass("loading")}var e=o(this),t=parseInt(d.css("borderLeftWidth")),n=u-2*t,a=v-2*t,h=e.width(),l=e.height();if(h==d.width()&&n>=h&&l==d.height()&&a>=l)return void i(e);if(h>n||l>a){var r=l>a?a:l,c=h>n?n:h;c/h>=r/l?(e.width(Math.round(h*r/l)),e.height(r)):(e.width(c),e.height(Math.round(l*c/h)))}d.animate({width:e.width(),height:e.height(),marginTop:-(e.height()/2)-t,marginLeft:-(e.width()/2)-t},100,function(){i(e)})}i&&i.preventDefault();var t=o(this),n=t.attr("href");if(n){o("#zoom .previous, #zoom .next").show(),t.hasClass("zoom")&&o("#zoom .previous, #zoom .next").hide(),c||(c=!0,l.show(),h.addClass("zoomed"));var a=o(new Image).hide().css({width:"auto"});h.append(a),d.html("").delay(500).addClass("loading"),d.prepend(r),a.load(e).attr("src",n),s=t}}function e(){var i=s.parent("div").prev();0==i.length&&(i=o(".gallery div:last-child")),i.find("a").trigger("click")}function t(){var i=s.parent("div").next();0==i.length&&(i=o(".gallery div:first-child")),i.children("a").trigger("click")}function n(o){o&&o.preventDefault(),c=!1,s=null,l.hide(),h.removeClass("zoomed"),d.empty()}function a(){u=o(window).width(),v=o(window).height()}var h=o("body");h.append('<div id="zoom"><a class="close"></a><a href="#previous" class="previous"></a><a href="#next" class="next"></a><div class="content loading"></div></div>');var l=o("#zoom").hide(),d=o("#zoom .content"),r='<div class="overlay"></div>',c=!1,s=null,u=o(window).width(),v=o(window).height();!function(){l.on("click",function(i){i.preventDefault(),"zoom"==o(i.target).attr("id")&&n()}),o("#zoom .close").on("click",n),o("#zoom .previous").on("click",e),o("#zoom .next").on("click",t),o(document).keydown(function(o){s&&((38==o.which||40==o.which)&&o.preventDefault(),27==o.which&&n(),37!=o.which||s.hasClass("zoom")||e(),39!=o.which||s.hasClass("zoom")||t())}),1==o(".gallery a").length&&o(".gallery a")[0].addClass("zoom"),o(".zoom, .gallery a").on("click",i)}(),function(){o(window).on("resize",a)}(),function(){o(window).on("mousewheel DOMMouseScroll",function(o){s&&(o.stopPropagation(),o.preventDefault(),o.cancelBubble=!1)})}()}(jQuery);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: