Skip to content
  • Recent
  • Tags
  • Popular
  • Users
  • Search
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse

Lay Theme Forum

  1. Home
  2. Need Custom Coding for Lay Theme? Find 3rd Party Developers here.
  3. custom magnifier cursor

custom magnifier cursor

Scheduled Pinned Locked Moved Need Custom Coding for Lay Theme? Find 3rd Party Developers here.
2 Posts 2 Posters 295 Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • A Offline
    A Offline
    ACordel
    wrote on last edited by
    #1

    Hi there !

    I am trying to add a "magnifier glass" cursor to my website, as I found the code online:
    // there is a mistake that I corrected in my code, with the function called "magniflier" instead of "magnifier"
    https://jsfiddle.net/2Blogger/00sjjfbq/

    It targets <img> but ideally I would like it to target project thumbnails (photo & if possible video). I managed to make it work on image appearing via HTML "+Shortcode", but it doesn't seems to work on image added via "+Image", or the image of "+Projects Thumbnails" // Even while they have the ".magnifier" CSS class.
    See here my test page : https://arnaudcordel.fr/test/
    // Order : +Shortcode // +Image // +Project Thumbnail

    If anyone could help me making it work, it would be so kind <3

    Here is the JS code that I edited from the original code :

    <script>
    jQuery(function() {
      var native_width = 0;
      var native_height = 0;
      var mouse = {x: 0, y: 0};
      var magnify;
      var cur_img;
      var ui = {
        magnifier: jQuery('.magnifier')
      };
      // Connecting to the magnifying glass
      if (ui.magnifier.length) {
        var div = document.createElement('div');
        div.setAttribute('class', 'glass');
        ui.glass = jQuery(div);
        jQuery('body').append(div);
      }
     
      // All the magnifying will happen on "mousemove"
      var mouseMove = function(e) {
        var $el = jQuery(this);
        // Container offset relative to document
        var magnify_offset = cur_img.offset();
        // Mouse position relative to container
        // pageX/pageY - container's offsetLeft/offetTop
        mouse.x = e.pageX - magnify_offset.left;
        mouse.y = e.pageY - magnify_offset.top;
       
        // The Magnifying glass should only show up when the mouse is inside
        // It is important to note that attaching mouseout and then hiding
        // the glass wont work cuz mouse will never be out due to the glass
        // being inside the parent and having a higher z-index (positioned above)
        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) {
        // The background position of div.glass will be
        // changed according to the position
        // of the mouse over the img.magniflier
        //
        // So we will get the ratio of the pixel
        // under the mouse with respect
        // to the image and use that to position the
        // large image inside the magnifying glass
        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";
       
        // Calculate pos for magnifying glass
        //
        // Easy Logic: Deduct half of width/height
        // from mouse pos.
        // var glass_left = mouse.x - ui.glass.width() / 2;
        // var glass_top  = mouse.y - ui.glass.height() / 2;
        var glass_left = e.pageX - ui.glass.width() / 2;
        var glass_top  = e.pageY - ui.glass.height() / 2;
        //console.log(glass_left, glass_top, bg_pos)
        // Now, if you hover on the image, you should
        // see the magnifying glass in action
        ui.glass.css({
          left: glass_left,
          top: glass_top,
          backgroundPosition: bg_pos
        });
        return;
      };
      jQuery('.magnifier').on('mousemove', function() {
        ui.glass.fadeIn(100);
       
        cur_img = jQuery(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'
          });
        }
        // When the user hovers on the image, the script will first calculate
        // the native dimensions if they don't exist. Only after the native dimensions
        // are available, the script will show the zoomed version.
        //if(!native_width && !native_height) {
          if (!cur_img.data('native_width')) {
            // This will create a new image object with the same image as that in .small
            // We cannot directly get the dimensions from .small because of the
            // width specified to 200px in the html. To get the actual dimensions we have
            // created this image object.
            var image_object = new Image();
            image_object.onload = function() {
              // This code is wrapped in the .load function which is important.
              // width and height of the object would return 0 if accessed before
              // the image gets loaded.
              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>
    

    I tried adding this JS to make sure every <img> has the magnifier class

    <script>
    window.laytheme.on("newpageshown", function(){
        jQuery("img").addClass("magnifier")
    });
    </script>
    

    Here is the CSS of the ".glass" element that I edited from the original code, to my design

    .glass {
      width: 70px;
      height: 70px;
      position: absolute;
      border-radius: 50%;
      cursor: crosshair;
    
      /* Multiple box shadows to achieve the glass effect */
      box-shadow:
        inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
        display: none;
    }
    

    Thanks a lot for any help of tips,
    A.

    1 Reply Last reply
    0
    • CyberSlayersC Offline
      CyberSlayersC Offline
      CyberSlayers
      wrote on last edited by
      #2

      Hi,

      Sometimes I notice that it helps to target the "img" within ".magnifier"

      ✦ Audrey@CyberSlayers.work ✦
      www.cyberslayers.work

      1 Reply Last reply
      0
      Reply
      • Reply as topic
      Log in to reply
      • Oldest to Newest
      • Newest to Oldest
      • Most Votes


      I also code custom websites or custom Lay features.
      šŸ’æ Email me here: šŸ’æ
      info@laytheme.com

      Before you post:
      1. When using a WordPress Cache plugin, disable it or clear your cache.
      2. Update Lay Theme and all Lay Theme Addons
      3. Disable all Plugins
      4. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"

      This often solves issues you might run into

      When you post:
      1. Post a link to where the problem is
      2. Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
      3. If the problem is difficult to explain, post screenshots / link to a video to explain it
      Online Users
      A
      alasdair17
      Forgot your key, lost your files, need a previous Lay Theme or Addon version? Go to www.laykeymanager.com
      laytheme.com
      • Login

      • Don't have an account? Register

      • Login or register to search.
      • First post
        Last post
      0
      • Recent
      • Tags
      • Popular
      • Users
      • Search