Product Details

Style 1 (zoom With Fancybox)

                
<div class="imgs-area">
    <img id="zoom_03" src="images/product/a1.jpg" data-zoom-image="images/product/a1.jpg"
    alt="">
    <div class="row">
        <div class="col-lg-12 col-md-12 col-12">
            <div id="gallery_01" class="carsoule-btn cb-3 cb-3-small">

                <div class="p-c">
                    <a href="#" data-image="images/product/a2.jpg"
                        data-zoom-image="images/product/a2.jpg">
                        <img class="zoom_03" src="images/product/a2.jpg" alt="">
                    </a>
                </div>
                <div class="p-c">
                    <a href="#" data-image="images/product/a3.jpg"
                        data-zoom-image="images/product/a3.jpg">
                        <img class="zoom_03" src="images/product/a3.jpg" alt="">
                    </a>
                </div>
                <div class="p-c">
                    <a href="#" data-image="images/product/a4.jpg"
                        data-zoom-image="images/product/a4.jpg">
                        <img class="zoom_03" src="images/product/a4.jpg" alt="">
                    </a>
                </div>
                <div class="p-c">
                    <a href="#" data-image="images/product/a5.jpg"
                        data-zoom-image="images/product/a5.jpg">
                        <img class="zoom_03" src="images/product/a5.jpg" alt="">
                    </a>
                </div>
                <div class="p-c">
                    <a href="#" data-image="images/product/a6.jpg"
                        data-zoom-image="images/product/a6.jpg">
                        <img class="zoom_03" src="images/product/a6.jpg" alt="">
                    </a>
                </div>
                <div class="p-c">
                    <a href="#" data-image="images/product/a7.jpg"
                        data-zoom-image="images/product/a7.jpg">
                        <img class="zoom_03" src="images/product/a7.jpg" alt="">
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

                

#gallery_01 img, img#zoom_03 {
  border: 1px solid #ccc;
  width: 100% !important;
}
.p-c {
  margin: 10px 3px 10px 0;
}

		
$('#gallery_01').slick({
slidesToShow: 4,
slidesToScroll: 1,
autoplay: false,
autoplaySpeed: 5000,
dots: false,
arrows: true,
prevArrow: '',
nextArrow: '',
responsive: [
{  breakpoint: 1169,  settings: { slidesToShow: 4,  }  },
{  breakpoint: 969,   settings: { slidesToShow: 3,  }  },
{  breakpoint: 767,   settings: { slidesToShow: 2, }   },
]
});	
/*----------------------------
fancybox active
------------------------------ */
$(document).ready(function() {
$('.fancybox').fancybox();
});

/*----------------------------
Elevate Zoom active
------------------------------ */
$("#zoom_03").elevateZoom({
constrainType: "height",
zoomType: "lens",
containLensZoom: true,
gallery: 'gallery_01',
cursor: 'pointer',
galleryActiveClass: "active"
});

//pass the images to Fancybox
$("#zoom_03").bind("click", function(e) {
var ez = $('#zoom_03').data('elevateZoom');
$.fancybox(ez.getGalleryList());
return false;
});

Style 2 (Portrait Slider & tab With fancybox)

                
<div class="portfolio-thumbnil-area">
    <div class="tab-content active-portfolio-area">
        <div role="tabpanel" class="tab-pane fade show active" id="view11">
            <div class="product-img">
                <a class="fancybox" data-fancybox-group="group" href="images/product/a1.jpg">
                    <img src="images/product/a1.jpg" alt="Single portfolio" />
                </a>
            </div>
        </div>
        <div role="tabpanel" class="tab-pane show" id="view22">
            <div class="product-img">
                <a class="fancybox" data-fancybox-group="group" href="images/product/a2.jpg">
                    <img src="images/product/a2.jpg" alt="Single portfolio" />
                </a>
            </div>
        </div>
        <div role="tabpanel" class="tab-pane show" id="view33">
            <div class="product-img">
                <a class="fancybox" data-fancybox-group="group" href="images/product/a3.jpg"><img
                        src="images/product/a3.jpg" alt="Single portfolio" /></a>
            </div>
        </div>
        <div role="tabpanel" class="tab-pane show" id="view44">
            <div class="product-img">
                <a class="fancybox" data-fancybox-group="group" href="images/product/a4.jpg"><img
                        src="images/product/a4.jpg" alt="Single portfolio" /></a>
            </div>
        </div>
    </div>
    <div class="product-more-views">
        <div class="tab_thumbnail" data-tabs="tabs">
            <div class="nav">
                <a class="nav-link" href="#view11" aria-controls="view11"
                    data-toggle="tab"><img src="images/product/a1.jpg" alt="" /></a>
                <a class="nav-link" href="#view22" aria-controls="view22"
                    data-toggle="tab"><img src="images/product/a2.jpg" alt="" /></a>
                <a class="nav-link" href="#view33" aria-controls="view33"
                    data-toggle="tab"><img src="images/product/a3.jpg" alt="" /></a>
                <a class="nav-link" href="#view44" aria-controls="view44"
                    data-toggle="tab"><img src="images/product/a4.jpg" alt="" /></a>
            </div>
        </div>
    </div>
</div>

                
.active-portfolio-area {
  float: left;
  padding-right: 15px;
  width: 70%;
}
.product-more-views {
  float: left;
  padding: 0 10px;
  width: 15%;
}
.thumbnail-carousel img {
    width: 100%;
}
.thumbnail-carousel a {
	padding: 6px 0
}

		
$('.thumbnail-carousel').slick({
slidesToShow: 5,
slidesToScroll: 1,
autoplay: false,
autoplaySpeed: 5000,
dots: false,
draggable: true,
arrows: false,
vertical: true,
verticalSwiping: true,
responsive: [
{  breakpoint: 1169,  settings: { slidesToShow: 5,  }  },
{  breakpoint: 969,   settings: { slidesToShow: 4,  }  },
{  breakpoint: 767,   settings: { slidesToShow: 3, }   },
]
});