<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="card"> <div class="row"> <aside class="col-sm-5 border-right"> <div class="xzoom-container"> <img class="xzoom" id="xzoom-default" src="http://www.jqueryscript.net/demo/Feature-rich-Product-Gallery-With-Image-Zoom-xZoom/images/gallery/preview/01_b_car.jpg" xoriginal="http://www.jqueryscript.net/demo/Feature-rich-Product-Gallery-With-Image-Zoom-xZoom/images/gallery/original/01_b_car.jpg" /> <div class="xzoom-thumbs"> <a href="http://www.jqueryscript.net/demo/Feature-rich-Product-Gallery-With-Image-Zoom-xZoom/images/gallery/original/01_b_car.jpg"><img class="xzoom-gallery" width="80" src="http://www.jqueryscript.net/demo/Feature-rich-Product-Gallery-With-Image-Zoom-xZoom/images/gallery/thumbs/01_b_car.jpg" xpreview="http://www.jqueryscript.net/demo/Feature-rich-Product-Gallery-With-Image-Zoom-xZoom/images/gallery/preview/01_b_car.jpg" title="The description goes here"></a> <a href="http://www.jqueryscript.net/demo/Feature-rich-Product-Gallery-With-Image-Zoom-xZoom/images/gallery/original/02_o_car.jpg"><img class="xzoom-gallery" width="80" src="http://www.jqueryscript.net/demo/Feature-rich-Product-Gallery-With-Image-Zoom-xZoom/images/gallery/preview/02_o_car.jpg" title="The description goes here"></a> <a href="http://www.jqueryscript.net/demo/Feature-rich-Product-Gallery-With-Image-Zoom-xZoom/images/gallery/original/03_r_car.jpg"><img class="xzoom-gallery" width="80" src="http://www.jqueryscript.net/demo/Feature-rich-Product-Gallery-With-Image-Zoom-xZoom/images/gallery/preview/03_r_car.jpg" title="The description goes here"></a> <a href="http://www.jqueryscript.net/demo/Feature-rich-Product-Gallery-With-Image-Zoom-xZoom/images/gallery/original/04_g_car.jpg"><img class="xzoom-gallery" width="80" src="http://www.jqueryscript.net/demo/Feature-rich-Product-Gallery-With-Image-Zoom-xZoom/images/gallery/preview/04_g_car.jpg" title="The description goes here"></a> </div> </div> <!-- gallery-wrap .end// --> </aside> <aside class="col-sm-7"> <article class="card-body p-5"> <h3 class="title mb-3">Original Version of Some product name</h3> <p class="price-detail-wrap"> <span class="price h3 text-warning"> <span class="currency">US $</span><span class="num">1299</span> </span> <span>/per kg</span> </p> <!-- price-detail-wrap .// --> <dl class="item-property"> <dt>Description</dt> <dd><p>Here goes description consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco </p></dd> </dl> <dl class="param param-feature"> <dt>Model#</dt> <dd>12345611</dd> </dl> <!-- item-property-hor .// --> <dl class="param param-feature"> <dt>Color</dt> <dd>Black and white</dd> </dl> <!-- item-property-hor .// --> <dl class="param param-feature"> <dt>Delivery</dt> <dd>Russia, USA, and Europe</dd> </dl> <!-- item-property-hor .// --> <hr> <div class="row"> <div class="col-sm-5"> <dl class="param param-inline"> <dt>Quantity: </dt> <dd> <select class="form-control form-control-sm" style="width:70px;"> <option> 1 </option> <option> 2 </option> <option> 3 </option> </select> </dd> </dl> <!-- item-property .// --> </div> <!-- col.// --> <div class="col-sm-7"> <dl class="param param-inline"> <dt>Size: </dt> <dd> <label class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> <span class="form-check-label">SM</span> </label> <label class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> <span class="form-check-label">MD</span> </label> <label class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> <span class="form-check-label">XXL</span> </label> </dd> </dl> <!-- item-property .// --> </div> <!-- col.// --> </div> <!-- row.// --> <hr> <a href="#" class="btn btn-lg btn-primary text-uppercase"> Buy now </a> <a href="#" class="btn btn-lg btn-outline-primary text-uppercase"> <i class="fas fa-shopping-cart"></i> Add to cart </a> </article> <!-- card-body.// --> </aside> <!-- col.// --> </div> <!-- row.// --> <div class="row"> <div class="col-xs-12 "> <nav> <div class="nav nav-tabs nav-fill" id="nav-tab" role="tablist"> <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a> <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a> <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a> <a class="nav-item nav-link" id="nav-about-tab" data-toggle="tab" href="#nav-about" role="tab" aria-controls="nav-about" aria-selected="false">About</a> </div> </nav> <div class="tab-content py-3 px-3 px-sm-0" id="nav-tabContent"> <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab"> Et et consectetur ipsum labore excepteur est proident excepteur ad velit occaecat qui minim occaecat veniam. Fugiat veniam incididunt anim aliqua enim pariatur veniam sunt est aute sit dolor anim. Velit non irure adipisicing aliqua ullamco irure incididunt irure non esse consectetur nostrud minim non minim occaecat. Amet duis do nisi duis veniam non est eiusmod tempor incididunt tempor dolor ipsum in qui sit. Exercitation mollit sit culpa nisi culpa non adipisicing reprehenderit do dolore. Duis reprehenderit occaecat anim ullamco ad duis occaecat ex. </div> <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab"> Et et consectetur ipsum labore excepteur est proident excepteur ad velit occaecat qui minim occaecat veniam. Fugiat veniam incididunt anim aliqua enim pariatur veniam sunt est aute sit dolor anim. Velit non irure adipisicing aliqua ullamco irure incididunt irure non esse consectetur nostrud minim non minim occaecat. Amet duis do nisi duis veniam non est eiusmod tempor incididunt tempor dolor ipsum in qui sit. Exercitation mollit sit culpa nisi culpa non adipisicing reprehenderit do dolore. Duis reprehenderit occaecat anim ullamco ad duis occaecat ex. </div> <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab"> Et et consectetur ipsum labore excepteur est proident excepteur ad velit occaecat qui minim occaecat veniam. Fugiat veniam incididunt anim aliqua enim pariatur veniam sunt est aute sit dolor anim. Velit non irure adipisicing aliqua ullamco irure incididunt irure non esse consectetur nostrud minim non minim occaecat. Amet duis do nisi duis veniam non est eiusmod tempor incididunt tempor dolor ipsum in qui sit. Exercitation mollit sit culpa nisi culpa non adipisicing reprehenderit do dolore. Duis reprehenderit occaecat anim ullamco ad duis occaecat ex. </div> <div class="tab-pane fade" id="nav-about" role="tabpanel" aria-labelledby="nav-about-tab"> Et et consectetur ipsum labore excepteur est proident excepteur ad velit occaecat qui minim occaecat veniam. Fugiat veniam incididunt anim aliqua enim pariatur veniam sunt est aute sit dolor anim. Velit non irure adipisicing aliqua ullamco irure incididunt irure non esse consectetur nostrud minim non minim occaecat. Amet duis do nisi duis veniam non est eiusmod tempor incididunt tempor dolor ipsum in qui sit. Exercitation mollit sit culpa nisi culpa non adipisicing reprehenderit do dolore. Duis reprehenderit occaecat anim ullamco ad duis occaecat ex. </div> </div> </div> </div> </div> <!-- card.// --> </div> <!--container.//--> <script src='https://unpkg.com/xzoom/dist/xzoom.min.js'></script> <script src='https://hammerjs.github.io/dist/hammer.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/js/foundation.min.js'></script>

/* Compatibility styles for frameworks like bootstrap, foundation e.t.c */ .xzoom-source img, .xzoom-preview img, .xzoom-lens img { display: block; max-width: none; max-height: none; -webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none; } /* --------------- */ /* xZoom Styles below */ .xzoom-container { display: inline-block; } .xzoom-thumbs { text-align: center; margin-bottom: 10px; } .xzoom { -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5); -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5); box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5); } .xzoom2, .xzoom3, .xzoom4, .xzoom5 { -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5); -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5); box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5); } /* Thumbs */ .xzoom-gallery, .xzoom-gallery2, .xzoom-gallery3, .xzoom-gallery4, .xzoom-gallery5 { border: 1px solid #cecece; margin-left: 5px; margin-bottom: 10px; } .xzoom-source, .xzoom-hidden { display: block; position: static; float: none; clear: both; } /* Everything out of border is hidden */ .xzoom-hidden { overflow: hidden; } /* Preview */ .xzoom-preview { border: 1px solid #888; background: #2f4f4f; box-shadow: -0px -0px 10px rgba(0,0,0,0.50); } /* Lens */ .xzoom-lens { border: 1px solid #555; box-shadow: -0px -0px 10px rgba(0,0,0,0.50); cursor: crosshair; } /* Loading */ .xzoom-loading { background-position: center center; background-repeat: no-repeat; border-radius: 100%; opacity: .7; background: url(../images/xloading.gif); width: 48px; height: 48px; } /* Additional class that applied to thumb when it is active */ .xactive { -webkit-box-shadow: 0px 0px 3px 0px rgba(74,169,210,1); -moz-box-shadow: 0px 0px 3px 0px rgba(74,169,210,1); box-shadow: 0px 0px 3px 0px rgba(74,169,210,1); border: 1px solid #4aaad2; } /* Caption */ .xzoom-caption { position: absolute; bottom: -43px; left: 0; background: #000; width: 100%; text-align: left; } .xzoom-caption span { color: #fff; font-family: Arial, sans-serif; display: block; font-size: 0.75em; font-weight: bold; padding: 10px; }

(function ($) { $(document).ready(function() { $('.xzoom, .xzoom-gallery').xzoom({zoomWidth: 400, title: true, tint: '#333', Xoffset: 15}); $('.xzoom2, .xzoom-gallery2').xzoom({position: '#xzoom2-id', tint: '#ffa200'}); $('.xzoom3, .xzoom-gallery3').xzoom({position: 'lens', lensShape: 'circle', sourceClass: 'xzoom-hidden'}); $('.xzoom4, .xzoom-gallery4').xzoom({tint: '#006699', Xoffset: 15}); $('.xzoom5, .xzoom-gallery5').xzoom({tint: '#006699', Xoffset: 15}); //Integration with hammer.js var isTouchSupported = 'ontouchstart' in window; if (isTouchSupported) { //If touch device $('.xzoom, .xzoom2, .xzoom3, .xzoom4, .xzoom5').each(function(){ var xzoom = $(this).data('xzoom'); xzoom.eventunbind(); }); $('.xzoom, .xzoom2, .xzoom3').each(function() { var xzoom = $(this).data('xzoom'); $(this).hammer().on("tap", function(event) { event.pageX = event.gesture.center.pageX; event.pageY = event.gesture.center.pageY; var s = 1, ls; xzoom.eventmove = function(element) { element.hammer().on('drag', function(event) { event.pageX = event.gesture.center.pageX; event.pageY = event.gesture.center.pageY; xzoom.movezoom(event); event.gesture.preventDefault(); }); } xzoom.eventleave = function(element) { element.hammer().on('tap', function(event) { xzoom.closezoom(); }); } xzoom.openzoom(event); }); }); $('.xzoom4').each(function() { var xzoom = $(this).data('xzoom'); $(this).hammer().on("tap", function(event) { event.pageX = event.gesture.center.pageX; event.pageY = event.gesture.center.pageY; var s = 1, ls; xzoom.eventmove = function(element) { element.hammer().on('drag', function(event) { event.pageX = event.gesture.center.pageX; event.pageY = event.gesture.center.pageY; xzoom.movezoom(event); event.gesture.preventDefault(); }); } var counter = 0; xzoom.eventclick = function(element) { element.hammer().on('tap', function() { counter++; if (counter == 1) setTimeout(openfancy,300); event.gesture.preventDefault(); }); } function openfancy() { if (counter == 2) { xzoom.closezoom(); $.fancybox.open(xzoom.gallery().cgallery); } else { xzoom.closezoom(); } counter = 0; } xzoom.openzoom(event); }); }); $('.xzoom5').each(function() { var xzoom = $(this).data('xzoom'); $(this).hammer().on("tap", function(event) { event.pageX = event.gesture.center.pageX; event.pageY = event.gesture.center.pageY; var s = 1, ls; xzoom.eventmove = function(element) { element.hammer().on('drag', function(event) { event.pageX = event.gesture.center.pageX; event.pageY = event.gesture.center.pageY; xzoom.movezoom(event); event.gesture.preventDefault(); }); } var counter = 0; xzoom.eventclick = function(element) { element.hammer().on('tap', function() { counter++; if (counter == 1) setTimeout(openmagnific,300); event.gesture.preventDefault(); }); } function openmagnific() { if (counter == 2) { xzoom.closezoom(); var gallery = xzoom.gallery().cgallery; var i, images = new Array(); for (i in gallery) { images[i] = {src: gallery[i]}; } $.magnificPopup.open({items: images, type:'image', gallery: {enabled: true}}); } else { xzoom.closezoom(); } counter = 0; } xzoom.openzoom(event); }); }); } else { //If not touch device //Integration with fancybox plugin $('#xzoom-fancy').bind('click', function(event) { var xzoom = $(this).data('xzoom'); xzoom.closezoom(); $.fancybox.open(xzoom.gallery().cgallery, {padding: 0, helpers: {overlay: {locked: false}}}); event.preventDefault(); }); //Integration with magnific popup plugin $('#xzoom-magnific').bind('click', function(event) { var xzoom = $(this).data('xzoom'); xzoom.closezoom(); var gallery = xzoom.gallery().cgallery; var i, images = new Array(); for (i in gallery) { images[i] = {src: gallery[i]}; } $.magnificPopup.open({items: images, type:'image', gallery: {enabled: true}}); event.preventDefault(); }); } }); })(jQuery);