Ürün Görselleri için Zoom Eklentisi

Merhabalar,

Özellikle e-ticaret web sitelerinde ürün detay sayfasında, ürün görsellerinin ayrıntılı olarak incelenmesi için zoom eklentilerine ihtiyaç duyulmaktadır. Bu durumda en iyi ve en stabil çalışan eklentilerden birisi magnify diyebilirim.

<script src="https://thdoan.github.io/magnify/js/jquery.magnify.js"></script>
<link rel="stylesheet" href="https://thdoan.github.io/magnify/css/magnify.css">

<script>
    var $zoom;
    $(document).ready(function() {
        $zoom = $('.zoom').magnify({
            afterLoad: function() {console.log('Magnification powers activated!');}
        });
    });
</script>

<style>
    .zoom {
        width: auto !important;
        height: 400px;
        display: inline-block !important;
    }
</style>

.zoom class’ının verildiği tüm images öğelerinde magnify çalışacaktır.

<img class="zoom" src="" />