Answers for "Zoom image using html js php"

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>