Lay Theme Forum

obliek

@Bwise Thanks again for the help!

I remade this whole swinger.js contraption outside of laytheme to find the best way to make it adapt to different browser sizes.

This is the css now and it seems to work quite well:

div.swinger-container {
    text-align: center; /* ensures the image is always in the h-middle */
    overflow: hidden; 
    width: 100vw;
height: calc(100vh);

}

div.swinger-container img {
    object-fit: cover;
-o-object-position: center center;
object-position: center center;
width: 100%;
height: 100% !important;
  }

now I'm off to figuring out how to add the caption to the images, which is a whole other thing (if you have any idea please let me know). On stackoverflow someone suggested using a title attribute in the img scr and adjusting the jquery to display this.
But it seems to limit styling and position of the text (afaik)

obliek

@Bwise yes sorry I had removed the class temporarily.
I have come to the conclusion that the css is being overridden in some way by the page styling.

If I extend the html box to full width it becomes full width to some extent, like we saw until now.

If I manipulate the dimensions of the box it becomes small and uncentered again.

Maybe there is a different way to add the html on a page?

Schermafbeelding 2021-04-09 om 15.31.15.png

Schermafbeelding 2021-04-09 om 15.31.41.png

obliek

@Bwise

I tried it and it seems to work! (maybe dragging the html box to full width on the page editor helped too)
there is still some overlapping glitch thing happening when loading the page, but I changed the images to optimized file sizes and dimensions so this seems to make it load faster at least.

However I noticed the image either gets clipped at the bottom (instead of full vh) or there is some scrolling so there seems to be a responsive issue going on. You can see the white space beneath the images when resizing the browser a little.

I tried to adress it with css but alas no succes yet.

this is the code I'm using:

.swinger_img {
    position: absolute;
    top: 0%;
    left: 0%;
    height: 100%;
    overflow: hidden;
}

.swinger-container {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    overflow: hidden;
}

In any case, thank you so much for being so helpful!

obliek

Excuse me for the frequent updates, but I'm having too much fun figuring this out.

So far I managed to get rid of the issues I had:

Figured out that I don't need to use the carousel on the page design itself, just paste the html swinger container. This got rid of the weird glitchy stuff upon loading the website for the first time.

This in turn also made my menu clickable again, but sadly the container was no longer 100vh -> I fixed this with css

.swinger-container {
    width: 100vw;
    height: 100vh;
}

Now there is an "issue" that the site displays the container at small size first before loading fully to 100vh.
So I'm guessing something is stopping the css from loading instantly.
Any guesses on how to make this a smooth experience?
The rest seems quite snappy and fast.

obliek

@Bwise I got it to work somewhat, thank you so much

The general concept is there, working great but upon loading the page there is a slow glitchy image loading phase.
How would I get rid of that?

I ended up placing all code in the <head> html space and that seemed to make it work, but maybe it makes the page too heavy now?

I set up a test page at www.a-r-d.eu/155-2 to try this all out, maybe you can spot the issue?

Anyway I'm well pleased that you got me this far so easily.

Alex

obliek

@Bwise Thank you!
That sounds like a very convenient alternative, if you have the time could you roughly tell me how to implement this?

I added the script in the Custom <head> content box in lay options (which is where it should be I assume?)
For the remaining part do I place a carousel at 100vh and target these images right?```
Where should I place this?

<div class="swinger-container">
    <img src="1.jpg" />
    <img src="2.jpg" />
    <img src="3.jpg" />
    <img src="4.jpg" />
    <img src="5.jpg" />
    <img src="6.jpg" />
    <img src="7.jpg" />
</div>

obliek

@Richard thank you for the thorough explanation!
looks like I have some studying to do, but I'm glad to know this might possible with laytheme.

obliek

Hi,

I'm wondering what the feature of this particular website would be called and if it is possible to get something similar with laytheme.

The browser window is divided in sections and every "section" shows a different picture when hovering over it.

https://www.bureaukayser.com

Would this be possible with some custom code? Also I'm wondering what this is called because my bad description seems to give me the wrong search results.

Thanks

obliek

Hi
I was wondering how I could change the padding of the carousel numbering so the text of the caption breaks before it collides with the numbering.
I know this is easily possible with custom css but I can't seem to figure out how to adress the caption box.

Any help?

Schermafbeelding 2020-07-27 om 11.31.20.png

Lay Theme Forum

obliek

Posts