Lay Theme Forum

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

    Horizontal Scroll Gallery

    General Discussion
    4
    10
    266
    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.
    • felix_rabe
      felix_rabe last edited by felix_rabe

      Hello Layteam,

      check this pen:
      https://codepen.io/LeCorbeau/pen/XWWbPzm

      Its a horizontal gallery that scrolls sidewards even when you scroll down/up on your mouse, so it works for people who use a mouse with a classic mousewheel.
      I wrote it exactly like that in laytheme, the layout looks fine but the scroll-modification doesnt work. its just a normal scroll so far. It seems i have to give the Galerie-Div a overflow property to make it scrollable in laytheme, but this seems to deactivate the scroll-fix in the codepen.

      Thank you very much for taking a look.
      Felix

      1 Reply Last reply Reply Quote 0
      • mariusjopen
        mariusjopen Global Moderator last edited by

        Dear @fr
        it will be some try and error to achieve this. Especially because the site needs to be structured horizontally.

        Read here:
        http://laytheme.com/documentation.html#custom-javascript

        Try on an empty Laytheme page and work your step forward little by little :-)

        Keep us updated!

        Best!

        Marius

        www.mariusjopen.world

        felix_rabe 1 Reply Last reply Reply Quote 0
        • felix_rabe
          felix_rabe last edited by

          Marius, thank you for your reply. I could not find a fix for that. But i have a nother issue on the same Layout.
          Please visit this sample page:

          https://www.stellaachenbach.com/radiolaria-2

          The Problem:
          When i scale the Window down to a mobile size, the width of my Images gets cropped to the device width. you can see this when you scroll sideways in the gallery. I think this might be some responsive-thing i cant get around so far? Thank you for taking a look into it again.

          Felix

          felix_rabe 1 Reply Last reply Reply Quote 0
          • felix_rabe
            felix_rabe @felix_rabe last edited by

            Okay, i found a hidden "widht: 100%" that was attached to the img, so it’s fixed.

            1 Reply Last reply Reply Quote 0
            • mariusjopen
              mariusjopen Global Moderator last edited by

              Dear @fr
              ah great! Thank you for sharing!

              Best!

              Marius

              www.mariusjopen.world

              1 Reply Last reply Reply Quote 0
              • felix_rabe
                felix_rabe @mariusjopen last edited by

                Hey @mariusjopen

                I fixed the issue with the horizontal arranged gallery that scrolls sideways when you use a vertical mousewheel. Here is a function that works with laytheme.
                it hast to be written directly into the custom html for the div.

                What also came in handy is to add »style="-webkit-transform: translateZ(0);"« inside every <img> tag. Because the mobile device has a bit of a difficulty to show images correctly when using » -webkit-overflow-scrolling: touch;« in a horizontal layout.

                Cheers
                Felix

                p.s. I don’t know how to use the »coding-look« with black background in this forum?

                <script>jQuery(function () {
                jQuery.fn.hScroll = function (amount) {
                amount = amount || 120;
                jQuery(this).bind("DOMMouseScroll mousewheel", function (event) {
                var oEvent = event.originalEvent,
                direction = oEvent.detail ? oEvent.detail * -amount : oEvent.wheelDelta,
                position = jQuery(this).scrollLeft();
                position += direction > 0 ? -amount : amount;
                jQuery(this).scrollLeft(position);
                event.preventDefault();
                })
                };
                });

                jQuery(document).ready(function() {
                jQuery('.div').hScroll(30); // You can pass (optionally) scrolling amount
                });
                </script>

                1 Reply Last reply Reply Quote 0
                • arminunruh
                  arminunruh Global Moderator last edited by

                  hey man!

                  all of this can be a little difficult to achieve, good luck with that!
                  i won't do support for this, cause this is too much custom functionality, better hire a developer for this

                  1 Reply Last reply Reply Quote 0
                  • felix_rabe
                    felix_rabe last edited by

                    hey @arminunruh,

                    read the last post again, it works ;-)

                    1 Reply Last reply Reply Quote 0
                    • dani
                      dani last edited by

                      @felix_rabe said in Horizontal Scroll Gallery:

                      <script>jQuery(function () {
                      jQuery.fn.hScroll = function (amount) {
                      amount = amount || 120;
                      jQuery(this).bind("DOMMouseScroll mousewheel", function (event) {
                      var oEvent = event.originalEvent,
                      direction = oEvent.detail ? oEvent.detail * -amount : oEvent.wheelDelta,
                      position = jQuery(this).scrollLeft();
                      position += direction > 0 ? -amount : amount;
                      jQuery(this).scrollLeft(position);
                      event.preventDefault();
                      })
                      };
                      });
                      jQuery(document).ready(function() {
                      jQuery('.div').hScroll(30); // You can pass (optionally) scrolling amount
                      });
                      </script>

                      Hey Felix,

                      Can you show the working code (HTML)?

                      Thanks!

                      https://danielcampbell.ca

                      1 Reply Last reply Reply Quote 0
                      • felix_rabe
                        felix_rabe last edited by

                        pen with the code:
                        https://codepen.io/LeCorbeau/pen/YzVmKWv

                        1 Reply Last reply Reply Quote 1
                        • First post
                          Last post
                        Post a link to where the problem is
                        I don't answer or check forum DMs, please just post on the forum.
                        Forgot your key, lost your files, need a previous Lay Theme or Addon version? Go to www.laykeymanager.com

                        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

                        G
                        J
                        E
                        K
                        S

                        Recent Topics

                        • T

                          scroll element transitions mobile

                        • L

                          HTML

                        • M

                          Burger menu in desktop and tablet view

                        • M

                          WPForms Lite not working with new theme update (5.5.5)

                        laytheme.com