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

A

ACordel

@ACordel
About
Posts
3
Topics
2
Shares
0
Groups
0
Followers
0
Following
0

Posts

Recent Best Controversial

  • custom magnifier cursor
    A ACordel

    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.

    Need Custom Coding for Lay Theme? Find 3rd Party Developers here.

  • carousel / fixed & Centered
    A ACordel

    Thanks a lot for your quick feedback !
    The method indeed placed me on the right track. I still had to add an offset to the carousel element as per some particularities of my page. Here is the final :)

    https://arnaudcordel.fr/prismes/
    https://arnaudcordel.fr/matter-of-matter/

    Little feedback before closing.. I noticed what could be a little bug on the "Site Title". My text format created for this element have the "Full Cap" transform option. But it is not written in full cap on the site's settings. So i get it classical in Google but in full cap on my website. It does get full cap on desktop, but fails on mobile were the text style transformation doesn't apply. Maybe something to fix, or it is an issue on my side ?

    Thanks a lot,
    A.

    Addons

  • carousel / fixed & Centered
    A ACordel

    Hi there !

    I am trying to achieve a carousel with images filling most part of the screen, but on a setting that would not "push" the footer more than the height of screen. I'd like a page without scroll and with the footer placed at the bottom. I think there are gridder options to achieve but I seem to struggle finding how to get there ...

    Here an exemple bellow.

    Page with carousel : https://arnaudcordel.fr/chronos/
    What I try to achieve* : https://arnaudcordel.fr/totems/

    *Not related to this addon.. but on this page, how could I also have the video or a single image perfectly centered and responsive ? Now is just a bit of luck-looking playing with percentages

    Thanks a lot for any help,
    A.

    Addons
  • Login

  • Don't have an account? Register

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