Lay Theme Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Popular
    • Users
    • Search

    Help plugin - Swap Images on Hover JS

    Need Custom Coding for Lay Theme? Find 3rd Party Developers here.
    2
    2
    65
    Loading More Posts
    • 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.
    • L
      leamarque last edited by leamarque

      Hi everybody,

      I'm trying to implement some JS into my website to swap images when mouse hover an image (js plugin) "https://www.jqueryscript.net/other/Swap-Images-Cursor-Move-Swinger.html" - I've tried the code with an online editor and it works. See code pen here : https://codepen.io/leamarque/pen/JjKERVq

      I've tried to follow the laytheme JS documentation but I don't seem to get it so I would love some help :)

      Here is what I've wrote into the head section and other screenshots to help you understand :
      Capture d’écran 2020-11-12 à 16.42.50.png
      Capture d’écran 2020-11-12 à 16.43.35.png
      bbebe23b-e33f-4177-9915-d0a8f4357591-image.png
      Here is what the console said:
      Capture d’écran 2020-11-12 à 16.48.28.png

      1 Reply Last reply Reply Quote 0
      • K
        kalamakumaran last edited by kalamakumaran

        Here you go!

        Put this in your custom js:

        <script>
            window.laytheme.on("newpageshown", function(layoutObj, type, obj){
            jQuery.fn.swinger = function () {
            return this.each(function () {
                var $container = jQuery(this);
                $container.css({
                    "position": "relative"
                });
                var $images = $container.find("img");
                $images.css({
                    "position": "absolute",
                    "top": "0%",
                    "left": "0%",
                    "width": "100%"
                });
                var $middleImage = jQuery($images[Math.floor($images.length / 2)]);
                $middleImage.css({
                    "z-index": "2",
                    "position": "relative"
                });
                var columnsCount = $images.length;
                $images.each((i, img) => {
                    var left = `${100 / columnsCount * i}%`;
                    var width = `${100 / columnsCount}%`;
                    var $column = jQuery(`<span style="z-index:999;position:absolute;top:0;bottom:0;left:${left};width:${width}"></span>`);
                    jQuery(img).after($column);
                    $column.hover(() => {
                        $images.css({
                            "z-index": "1",
                            "position": "absolute"
                        });
                        jQuery(img).css({
                            "z-index": "2",
                            "position": "relative"
                        });
                    });
                })
            });
        }
        });   
        </script>
        
        <script>
        window.laytheme.on("newpageshown", function(layoutObj, type, obj){
              jQuery(".img-area").swinger();
        });
        </script>
        

        Then add your images via "+More" > +HTML" in your laygridder. Give the row the class "img-area". Should work like this.

        1 Reply Last reply Reply Quote 1
        • First post
          Last post

        Try this to fix issues before you post:

        Use the Search Feature. Maybe there is already a solution to your issue.

        1. Update Lay Theme and all Lay Theme Addons
        2. Disable all Plugins
        3. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code ", click "Save Changes"
        4. Now see if your problem solved itself
        5. Go here, see if your problem is listed here:
        Troubleshooting

        When you post:
        1. Post a link to where the problem is
        2. If the problem is difficult to explain, post screenshots / link to a video to explain it

        Thanks!

        Online Users

        I
        T
        M
        K
        C
        G

        Recent Topics

        • C

          centred Carousel fixed width and proportions

        • text underline

        • open all links in a thumbnail grid in a new tab

        • lazy loading affects project thumbnail mouseover images

        laytheme.com