Image zoom
JavaScript based component that adds "zoom on hover" functionality to images.
The image zoom is powered by Drift.js plugin. Ensure that you include links to the plugin's CSS and JavaScript files in your document.
CSS file is linked in the <head> section and above theme.min.css reference in your document:
<link rel="stylesheet" href="assets/vendor/drift-zoom/dist/drift-basic.min.css">JavaScript file is linked before the closing </body> tag and above theme.min.js reference in your document:
<script src="assets/vendor/drift-zoom/dist/Drift.min.js"></script>You can apply any Drift.js option by specifying it within the data-zoom-options="{}" attribute in JSON format.
Usefull links:
External zoom pane
Apple iPhone 14 Plus 128GB
- Model: 128GB
- Color: Gray blue
- Capacity: 128GB
$940.00
<!-- External ZoomPane example -->
<div class="row align-items-md-center justify-content-center g-0">
<div class="col-10 col-sm-6">
<div class="ratio ratio-1x1">
<img src="assets/img/shop/electronics/product/gallery/01.png" data-zoom="assets/img/shop/electronics/product/gallery/01.png" data-zoom-options='{
"paneSelector": "#zoomPane",
"hoverDelay": 300
}' alt="Image">
</div>
</div>
<div class="col-sm-6 col-lg-5">
<div class="position-relative p-2" id="zoomPane">
<div class="d-none d-md-flex align-items-center gap-2 text-decoration-none mb-3">
<div class="d-flex gap-1 fs-sm">
<i class="ci-star-filled text-warning"></i>
<i class="ci-star-filled text-warning"></i>
<i class="ci-star-filled text-warning"></i>
<i class="ci-star-filled text-warning"></i>
<i class="ci-star-half text-warning"></i>
</div>
<span class="text-body-tertiary fs-xs">68 reviews</span>
</div>
<h2 class="h4">Apple iPhone 14 Plus 128GB</h4>
<ul class="list-unstyled">
<li class="form-label fw-semibold m-0">
Model: <span class="text-body fw-normal" id="colorOption">128GB</span>
</li>
<li class="form-label fw-semibold m-0">
Color: <span class="text-body fw-normal" id="colorOption">Gray blue</span>
</li>
<li class="form-label fw-semibold m-0">
Capacity: <span class="text-body fw-normal" id="colorOption">128GB</span>
</li>
</ul>
<div class="h4 mb-4">$940.00</div>
<button type="button" class="btn btn-lg btn-primary animate-slide-end order-sm-2 order-md-4 order-lg-2">
<i class="ci-shopping-cart fs-lg animate-target me-2"></i>
Add to cart
</button>
</div>
</div>
</div>Inline zoom pane
<!-- Inline ZoomPane example -->
<div class="ratio ratio-1x1 overflow-hidden" style="max-width: 540px">
<img src="assets/img/shop/grocery/product/02.png" data-zoom="assets/img/shop/grocery/product/02.png" data-zoom-options='{
"inlinePane": true,
"hoverDelay": 300
}' alt="Image">
</div>