Horizontal Scroll Gallery

[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

[mariusjopen]

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

[felix_rabe]

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]

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

[mariusjopen]

Dear @fr
ah great! Thank you for sharing!

Best!

Marius

[felix_rabe]

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>

[arminunruh]

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

[felix_rabe]

hey @arminunruh,

read the last post again, it works ;-)

[dani]

@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!

[felix_rabe]

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