Lay Theme Forum

Thank you so much, it works perfectly! 🙏

Hello everyone,

I'm having an issue with the marquee. I try to toggle a div when I hover the linked images of my marquee but nothing happens…

I tested it, but it seems to be impossible to reach the “a” elements – or even the “img” – inside the marquee for some reason :

    jQuery('.lay-marquee a').hover(function(){
	console.log("yay!");
});

This doesn't work either:

    jQuery('.lay-marquee > div > div > div > a').hover(function(){
	console.log("yay!");
});

Here, I circled the image I hovered, and we can see that nothing is happening in the console regarding the hovering:

It works when I target the marquee and not the elements inside it though… :

jQuery('.lay-marquee').hover(function(){
	console.log("yay!");
});

Did someone else already have that problem?

Thanks in advance for your help!

Cheers :)

Yep, I used javascript but abandoned the idea since. So I would not be able to tell you how I did in details now… But basically I used Thumbnails Grid both for the grid AND for the Index and coded the style and modified the images sources using javascript!

I just wanted to have different hover images for my projects in my Thumbnails Grid and my Project Index. I understand it is a very specific case scenario, so I figured out how to achieve that “manually” ;)

Thanks!

Alright, no worries, thanks for your answer @arminunruh ! :)

Hey guys!

Do you know if it's possible to add custom text to projects in Project Index? Like a description for example.

Thanks for your help and your work!

Cheers :)

Hey guys!

I was wondering if there was a way to display the “thumbnail mouseover image” instead of the “regular thumbnail image” in the project index, when hovering on a project.

For now, I managed to do it by changing the source of the “data-hoverimageid” attribute for each project using Jquery, but it's not the most practical method…

Also, if there is no solution except this one, I was wondering if there was an easy way to find the “data-hoverimageid” for each image – it would really help me to put everything in place faster.

Thanks for your help and your work!

Cheers :)

Done! It works perfectly on desktop AND mobile now. Thanks @arminunruh !! :)

Thanks for your answer @arminunruh

I will make a special layout for the mobile version then, no worries.

And thanks for the support! ;)

So sorry I forgot to put the link…!

Here you go: https://theomarielle.com

Thanks for your help @arminunruh :)

It seems I have the same problem – on mobile as well – but also on desktop using Chrome or Safari (no problem using Firefox). Elements that are supposed to be centred in a row with a fixed height are now always positioned at the top of the row, no matter what.

EDIT: The first image is in Firefox and how it is supposed to be. The 2nd one is in Safari.

Hi guys!

I'm currently (re)designing my portfolio, and I would like to have a different style of carousel for the desktop version and the mobile version.

For the desktop version, I currently have “multiple slides” carousels with a height of 80vh and that works pretty well in terms of design and UX. BUT, for the mobile version it's not working well, so I'd like to have simple carousels instead, with only one slide shown at a time – and more important a size that have the aspect ratio of the first element and a width that takes all the window (so a smaller height than 80vh).

Here's a link to my website: https://office.theomarielle.com/

Do you think it's possible to achieve that using only custom CSS and without using a custom phone layout?

Thanks in advance for your help and advices :)

Cheers!

Théo

@Richard

I tested my website on my Huawei mate 20 lite, but I guess it's not considered as a “new device” anymore… I will try to test it on other phones. Thanks for your help!

Best! :)

@Richard

Thanks for your answer! I deactivated the “Autoplay” setting for the individual videos and now it works perfectly on desktop, but the videos don't autoplay on mobile anymore… Do you know how I could fix that?

Best,

TYLM

Hello everyone!

I'm currently using the fullscreen slider on my website, and I'd like to know if it is possible to autoplay a video BUT only when we arrive on its slide – and not when the page is loaded. Because I would like the users to watch a video from the beginning everytime they reach the video's slide.

Here's an example of one of my project with videos on some of the slides :
https://theomarielle.com/untitled-19-website/

Thanks in advance for your help!

Cheers,

TYLM

@julienfelixweb Unfortunately I didn't… ;( But I'm definitely interested if you do!

I manage to fix the problem! Apparently with multilingual websites, having every languages of your site displayed in the menu cause the “Cart” to double (if you have two languages, in my case english and french). FYI you can get around this by hiding the current langage in the menu :)

@leoncov Hey! Did you and @Richard found out a solution? Because I have the exact same problem on a website I'm designing and as I saw on your website it seems you don't have that problem anymore. I removed the cart from the mobile menu but it didn't fix the problem…

I'd really appreciate your help! :)

Cheers,

@Richard Ok I'm gonna try to find a solution for this. Thanks again for your help!

@Richard

Thanks to the links you sent me, I manage to make a custom code that works great on desktop! 🔥🙏

But it doesn't work on mobile tho… The elements don't switch back when .lay-carousel-slide-html5video has NOT is-selected as a class. Do you know what could cause that difference of behavior? It looks like when on mobile, every time I change slide, it still detects a is-selected class.

Here's my code – it may not be the cleanest code but, as I said, it works perfectly on desktop:

window.laytheme.on("newpageshown", function(layoutObj, type, obj) {
var videoSlide = jQuery(".lay-carousel").find(".lay-carousel-slide-html5video").first();

videoSlide.on("DOMAttrModified", function (e) {
    if (e.originalEvent.attrName === "class") {
        console.log("##DOMAttrModified, class changed");
        if (jQuery(this).hasClass("is-selected")) {
            console.log("##Element has 'is-selected' class, changing");
            jQuery("body").addClass('black-bg');
            jQuery(".lay-carousel-sink-parent").addClass('negative');
            jQuery(".sitetitle img").addClass('negative');
            jQuery(".mobile-title").addClass('negative');
            jQuery("._Menu").addClass('negative');
            jQuery(".flickity-prev-next-button").addClass('negative');
            jQuery(".lay-mobile-icons-wrap").addClass('negative');
        }else{
            jQuery("body").removeClass('black-bg');
            jQuery(".lay-carousel-sink-parent").removeClass('negative');
            jQuery(".sitetitle img").removeClass('negative');
            jQuery(".mobile-title").removeClass('negative');
            jQuery("._Menu").removeClass('negative');
            jQuery(".flickity-prev-next-button").removeClass('negative');
            jQuery(".lay-mobile-icons-wrap").removeClass('negative'); 
        }
    }
});
});

Thanks again @Richard !