Adblock Algılandı

Lütfen reklam engelleyicileri devre dışı bırakarak bizi destekleyebilirsiniz.

Reklam engelleyicinizin pasif olduğundan emin olun. Daha fazla bilgi

Resim üzerine büyüteç etkisi oluşturmak için JS ve CSS kodlarını kullanacağız. Bu kod sayesinde resimler üzerinde zoom etkisi yapılabilir. Fare işaretçisini resim üzerine getirdiğinizde büyüteç simgesi belirmektedir. Ziyaretçilerin görüntüyü büyütmelerine olanak sağlamaktadır.

1. HTML kısmı
Aşağıdaki kodu kopyalayarak istediğiniz yere yapıştırın. Adres yerine yerleştirmek istediğiniz resim kodunu ekleyin.
 
<img class="magniflier" src="https://images.adresi" width="200" />

2. CSS kısmı
Blog panelinize giriş yapın. > Tema menüsüne tıklayın. > HTML'yi düzenle bölümüne giriş yapın. Ardından aşağıdaki CSS kodunu </head> kısmının hemen üzerine gelecek şekilde yapıştırın.
<style type='text/css'>
/* Zoom CSS */
 .glass {
  width: 150px;
  height: 150px;
  position: absolute;
  border-radius: 50%;
  cursor: crosshair;
  box-shadow:
    0 0 0 7px rgba(255, 255, 255, 0.85),
    0 0 7px 7px rgba(0, 0, 0, 0.25), 
    inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
  display: none;}
</style>

3. JS kısmı
Bir sonraki adımda ise Javascript kısmını ekleyeceğiz. Bunun için aşağıdaki kodu </body> veya &lt;!--</body>--&gt;&lt;/body&gt; kodunun hemen üstüne gelecek şekilde eklemeliyiz.

<script type='text/javascript'>
//<![CDATA[
$(function() {var native_width = 0;
  var native_height = 0;
  var mouse = {x: 0, y: 0};
  var magnify;
  var cur_img;
  var ui = {magniflier: $('.magniflier')};
  if (ui.magniflier.length) {
    var div = document.createElement('div');
    div.setAttribute('class', 'glass');
    ui.glass = $(div);
    $('body').append(div);}
    var mouseMove = function(e) {var $el = $(this);
    var magnify_offset = cur_img.offset();
    mouse.x = e.pageX - magnify_offset.left;
    mouse.y = e.pageY - magnify_offset.top;
    if (
      mouse.x < cur_img.width() &&
      mouse.y < cur_img.height() &&
      mouse.x > 0 &&
      mouse.y > 0) {magnify(e);}
    else { ui.glass.fadeOut(100);}return;};
    var magnify = function(e) {
    var rx = Math.round(mouse.x/cur_img.width()*native_width - ui.glass.width()/2)*-1;
    var ry = Math.round(mouse.y/cur_img.height()*native_height - ui.glass.height()/2)*-1;
    var bg_pos = rx + "px " + ry + "px";
    var glass_left = e.pageX - ui.glass.width() / 2;
    var glass_top  = e.pageY - ui.glass.height() / 2;
    ui.glass.css({
      left: glass_left,
      top: glass_top,
      backgroundPosition: bg_pos});return;};
    $('.magniflier').on('mousemove', function() {
    ui.glass.fadeIn(200);  
    cur_img = $(this);
    var large_img_loaded = cur_img.data('large-img-loaded');
    var src = cur_img.data('large') || cur_img.attr('src');
    // Set large-img-loaded to true
    // cur_img.data('large-img-loaded', true)
       if (src) {ui.glass.css({
        'background-image': 'url(' + src + ')',
        'background-repeat': 'no-repeat'});}
    //if(!native_width && !native_height) 
        {if (!cur_img.data('native_width')) 
        {var image_object = new Image();
        image_object.onload = function() 
        {native_width = image_object.width;
         native_height = image_object.height;
         cur_img.data('native_width', native_width);
         cur_img.data('native_height', native_height);
    //console.log(native_width, native_height);
         mouseMove.apply(this, arguments);
         ui.glass.on('mousemove', mouseMove);};
         image_object.src = src;return;} else {
       native_width = cur_img.data('native_width');
       native_height = cur_img.data('native_height');}
    //}
    //console.log(native_width, native_height);
       mouseMove.apply(this, arguments);
       ui.glass.on('mousemove', mouseMove);});
       ui.glass.on('mouseout', function() {
       ui.glass.off('mousemove', mouseMove);});
}); //]]>
</script>


Temayı kaydet düğmesine tıklayın. Tamamladıktan sonra yayınlayarak sonuçları blogunuzda görün.

Kaynak: https://codepen.io/philipsacht/pen/wzaGF

Resim Üzerine Büyüteç Etkisi Ekleme

Resim üzerine büyüteç etkisi oluşturmak için JS ve CSS kodlarını kullanacağız. Bu kod sayesinde resimler üzerinde zoom etkisi yapılabilir. Fare işaretçisini resim üzerine getirdiğinizde büyüteç simgesi belirmektedir. Ziyaretçilerin görüntüyü büyütmelerine olanak sağlamaktadır.

1. HTML kısmı
Aşağıdaki kodu kopyalayarak istediğiniz yere yapıştırın. Adres yerine yerleştirmek istediğiniz resim kodunu ekleyin.
 
<img class="magniflier" src="https://images.adresi" width="200" />

2. CSS kısmı
Blog panelinize giriş yapın. > Tema menüsüne tıklayın. > HTML'yi düzenle bölümüne giriş yapın. Ardından aşağıdaki CSS kodunu </head> kısmının hemen üzerine gelecek şekilde yapıştırın.
<style type='text/css'>
/* Zoom CSS */
 .glass {
  width: 150px;
  height: 150px;
  position: absolute;
  border-radius: 50%;
  cursor: crosshair;
  box-shadow:
    0 0 0 7px rgba(255, 255, 255, 0.85),
    0 0 7px 7px rgba(0, 0, 0, 0.25), 
    inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
  display: none;}
</style>

3. JS kısmı
Bir sonraki adımda ise Javascript kısmını ekleyeceğiz. Bunun için aşağıdaki kodu </body> veya &lt;!--</body>--&gt;&lt;/body&gt; kodunun hemen üstüne gelecek şekilde eklemeliyiz.

<script type='text/javascript'>
//<![CDATA[
$(function() {var native_width = 0;
  var native_height = 0;
  var mouse = {x: 0, y: 0};
  var magnify;
  var cur_img;
  var ui = {magniflier: $('.magniflier')};
  if (ui.magniflier.length) {
    var div = document.createElement('div');
    div.setAttribute('class', 'glass');
    ui.glass = $(div);
    $('body').append(div);}
    var mouseMove = function(e) {var $el = $(this);
    var magnify_offset = cur_img.offset();
    mouse.x = e.pageX - magnify_offset.left;
    mouse.y = e.pageY - magnify_offset.top;
    if (
      mouse.x < cur_img.width() &&
      mouse.y < cur_img.height() &&
      mouse.x > 0 &&
      mouse.y > 0) {magnify(e);}
    else { ui.glass.fadeOut(100);}return;};
    var magnify = function(e) {
    var rx = Math.round(mouse.x/cur_img.width()*native_width - ui.glass.width()/2)*-1;
    var ry = Math.round(mouse.y/cur_img.height()*native_height - ui.glass.height()/2)*-1;
    var bg_pos = rx + "px " + ry + "px";
    var glass_left = e.pageX - ui.glass.width() / 2;
    var glass_top  = e.pageY - ui.glass.height() / 2;
    ui.glass.css({
      left: glass_left,
      top: glass_top,
      backgroundPosition: bg_pos});return;};
    $('.magniflier').on('mousemove', function() {
    ui.glass.fadeIn(200);  
    cur_img = $(this);
    var large_img_loaded = cur_img.data('large-img-loaded');
    var src = cur_img.data('large') || cur_img.attr('src');
    // Set large-img-loaded to true
    // cur_img.data('large-img-loaded', true)
       if (src) {ui.glass.css({
        'background-image': 'url(' + src + ')',
        'background-repeat': 'no-repeat'});}
    //if(!native_width && !native_height) 
        {if (!cur_img.data('native_width')) 
        {var image_object = new Image();
        image_object.onload = function() 
        {native_width = image_object.width;
         native_height = image_object.height;
         cur_img.data('native_width', native_width);
         cur_img.data('native_height', native_height);
    //console.log(native_width, native_height);
         mouseMove.apply(this, arguments);
         ui.glass.on('mousemove', mouseMove);};
         image_object.src = src;return;} else {
       native_width = cur_img.data('native_width');
       native_height = cur_img.data('native_height');}
    //}
    //console.log(native_width, native_height);
       mouseMove.apply(this, arguments);
       ui.glass.on('mousemove', mouseMove);});
       ui.glass.on('mouseout', function() {
       ui.glass.off('mousemove', mouseMove);});
}); //]]>
</script>


Temayı kaydet düğmesine tıklayın. Tamamladıktan sonra yayınlayarak sonuçları blogunuzda görün.

Kaynak: https://codepen.io/philipsacht/pen/wzaGF

Diğer Yayınlar

Bültenimize Abone Ol

Bildirimler

Disqus Logo