Lay Theme Forum

Bwise

So to fix the clipping at the bottom, I just changed height: 100% to height:100vh as you can see in the image below. You can also add object-fit here and play around with that to size the images.

I would keep the html box full width within Lay grid.

Bwise

Yea the loading is much better now on my end too.

Just looking at the code I can't see the swinger_img class on the images.

I suspect this would be causing the odd behavior or at least adding to it.

Bwise

Sorry that was so badly written. Basically my idea is :

Add a class to each image within swinger-container, for example "swinger-img"
Set "swinger-img" class to the following rules :

position: absolute
top: 0%
left: 0%
width: 100%

Delete the following from swinger.js

$images.css({
   "position": "absolute",
   "top": "0%",
   "left": "0%",
   "width": "100%"
});

Bwise

Hi, sorry for the delay. That's great you have it working, I had a look at your page and it looks great.

Sorry I should have said you don't need the carousel.

I see what you mean with the images loading in a bit smaller then stretching.

As the code for the swinger function is wrapped in

$( document ).ready(function() {
//swinger code
}

Until the DOM fully loads, the JS will not execute and it is here that the image is set to 100% width.

You could give each image within the "swinger-container" a class such has "swinger-img" and then just copy the CSS rules from swinger.js and set it directly in CSS instead? Then just delete the part from swinger.js that changes the CSS.

Hopefully Lay loads CSS before JS and that way the images should appear full size straight away?

I don't know if this is the best way to do things but it's what I would try first.

Bwise

Also don't forget to replace $ with jQuery, something I know you have to do with Lay.

You could alternatively try this code so you can use $, I'm not 100% sure about the jQuery setup that Lay uses so it might not work. A few examples anyway.

(function($) {
    $(document).ready(function() {
       //jQuery code here
    });
})(jQuery);

jQuery( document ).ready(function( $ ) {
  // Code that uses jQuery's $ can follow here.
});

Bwise

So the way he has it setup is:

Add a custom HTML element/code block onto your page and paste the "swinger-container" html in there.
Link to the swinger.js file, in the <head> should be fine. I don't actually use Lay myself I just helped my friend with the code, but either there or before the closing <body> tag should work also.
Add the below script to initialise swinger.js, just make sure to include it after you include the swinger.js file :

<script>$(".swinger-container").swinger();</script>

It should then be functional, you may have to play around with the CSS of the images. Depending on what you want you could set height to 100vh and width to 100%.
The object-fit property could give you a bit more control also.
https://www.w3schools.com/csS/css3_object-fit.asp.

Any issues let us know.

Bwise

Hi there,

I just helped a friend setup this exact effect on Lay using a jQuery plugin called Swinger.

You can find the necessary files here:
https://github.com/FrancescoLorenzetti84/Swinger

It will create this exact effect for you and it works really well with Lay.

If you need any help with the setup then I'll gladly try and guide you through it.

All the best.

Lay Theme Forum

Bwise

Posts