Bootstrap Snippet Bootstrap Zoom Gallery using HTML CSS Javascript

#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 { display: block; max-width: none; background: #ececec; box-shadow: 0 1px 3px rgba(0,0,0,0.25); } #zoom .close { z-index: 99993; position: absolute; top: 0; right: 0; width: 49px; height: 49px; cursor: pointer; background: transparent url('data:image/png;base64,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') no-repeat 50% 50%; opacity: 1; filter: alpha(opacity=100); } #zoom .previous, #zoom .next { z-index: 99992; position: absolute; top: 50%; overflow: hidden; display: block; width: 49px; height: 49px; margin-top: -25px; } #zoom .previous { left: 0; background: url('../img/icons/arrows.png') no-repeat 0 0; } #zoom .next { right: 0; background: url('#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('../img/loading.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 { display: block; max-width: none; background: #ececec; box-shadow: 0 1px 3px rgba(0,0,0,0.25); } #zoom .close { z-index: 99993; position: absolute; top: 0; right: 0; width: 49px; height: 49px; cursor: pointer; background: transparent url('https://upload.wikimedia.org/wikipedia/commons/b/b1/Loading_icon.gif') no-repeat 50% 50%; opacity: 1; filter: alpha(opacity=100); } #zoom .previous, #zoom .next { z-index: 99992; position: absolute; top: 50%; overflow: hidden; display: block; width: 49px; height: 49px; margin-top: -25px; } #zoom .previous { left: 0; background: url('https://cdn4.iconfinder.com/data/icons/basic-ui-elements/700/03_left-512.png') no-repeat 0 0; } #zoom .next { right: 0; background: url('https://cdn4.iconfinder.com/data/icons/miu/24/circle-next-arrow-disclosure-glyph-128.png') no-repeat 100% 0; } #zoom .close:hover { background-color: #da4f49; } #zoom .previous:hover, #zoom .next:hover { background-color: #0088cc; } ') no-repeat 100% 0; } #zoom .close:hover { background-color: #da4f49; } #zoom .previous:hover, #zoom .next:hover { background-color: #0088cc; }

/*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);

"Bootstrap Zoom Gallery"
Bootstrap 4.0.0 Snippet by BharathKurapati

Related: See More

Questions / Comments:

"Bootstrap Zoom Gallery" Bootstrap 4.0.0 Snippet by BharathKurapati

Related: See More

Questions / Comments:

"Bootstrap Zoom Gallery"
Bootstrap 4.0.0 Snippet by BharathKurapati