Zoom image using html js php
<div id="gridview">
<div class="heading">Zoom for Product Images in PHP Shopping
Cart</div>
<?php
$query = $db_handle->runQuery("SELECT * FROM tbl_products ORDER BY id ASC");
if (! empty($query)) {
foreach ($query as $key => $value) {
?>
<div class="image">
<img id="image<?php echo $key+1; ?>"
src="<?php echo $query[$key]["product_image"] ; ?>"
xoriginal="
<?php echo $query[$key]["product_image"] ; ?>
" />
<button class="quick_look" data-id="<?php echo $query[$key]["id"] ; ?>">View
More</button>
</div>
<?php
}
}
?>
</div>
<div id="demo-modal"></div>
<script>
$(".quick_look").on("click", function() {
var product_id = $(this).data("id");
var options = {
modal : true,
height : $(window).height() - 20,
width : "98%"
};
$('#gridview').load('get-product-info.php?id=' + product_id);
});
$(document).ready(function() {
$(".image").hover(function() {
$(this).children(".quick_look").show();
}, function() {
$(this).children(".quick_look").hide();
});
});
</script>