Lay Theme Forum

Hello @arminunruh

I've come across this feature in many gallery slideshows, which is if the mouse is idle for ex. 4 seconds only the main element (picture/video) is visible, the remaining elements (caption, menu, whatever) fade out. When the mouse moves the elements fade in back to normal.

Example: https://www.galeriezander.com/artists/65272/robert-adams/works/973411/thurman-colorado/

I have searched for this using javascript with the FullscreenSlider, but something is wrong and nothing fades. It's an idea for future updates.

<script>
$(document).ready(function() {
    var idleTimer;
    var idleTime = 3000;
    
    // Track mouse movements on fullScreenSlider
    $("fp-slide.active").mousemove(function(e) {
        // Clear the idle timer
        clearTimeout(idleTimer);
        
        // Show the menu and texts if hidden
        $(".laynav.desktop-nav").fadeIn(100);
        $("._Caption").fadeIn(100);
        
        // Set a new idle timer
        idleTimer = setTimeout(function() {
            // Hide the menu and texts after 3 seconds of inactivity
            $(".laynav.desktop-nav").fadeOut(100);
            $("_.Caption").fadeOut(100);
        }, idleTime);
    });
});
</script>

Thanks!

@arminunruh thanks for the css.

.laynav.desktop-nav{
z-index: 200;
}
.sitetitle{
z-index: 200;
}

But now I have the menu and sitetitle hover the intro feature. How can I create an exception for the intro page?

@arminunruh thanks again!

One last question, is there any way through code to use the "x-close" icon on the mobile version and the text setting on desktop?

Hello @arminunruh,

Thank you very much for this feature, works great.

I have two questions, first is it possible to choose text instead of an icon? Let's say I call the overlay with a link "Read" on a grid and want to "Close" it with text too?

Second question concerns the z-index of the overlay, is it possible the overlay not to cover the site title/menu?

Thanks!

@arminunruh said in A modal/pop up window displaying extra info:

hey i will start working on this soon!

looking forward to it too. will be possible to add project infos via modal? thanks

@arminunruh thanks a lot!

Thanks @arminunruh! I tried to use the project arrow option, with both thumbnail or text, and hiding the left arrow, but its not perfect!

How can I find the last slide and link it to '#laynextproject'? OpenAI gave me this but not working!

<script>
  $(document).ready(function() {
    $(document).on('fpAfterSlideLoad', function(origin, destination, direction) {
      if (destination.index == lastSlideIndex && destination.item.isLast) {
        window.location.href = '#laynextproject';
      }
    });
  });
</script>

Hello @arminunruh,

On the project index, want the vertical images to be bigger than the horizontal ones, let's say vertical is 50% and horizontal ones are the width of the verticals. I can't achieve this result in the Imageover options below... At the moment the horizontal images are privileged to the verticals. Thanks!

Re: Link to Next Project using Fullscreen Slider click on last slide

I've found an old topic about this idea, but this would be gold.
http://laythemeforum.com:4567/topic/5433/link-to-next-project-using-fullscreen-slider-click-on-last-slide

By clicking forward on the last slide of the Fullscreen Slider, to go to the next project, in chronological order, as you do in the project index feature. With this would be possible to see the entire portfolio without even using the menu.

Cheers! =)

@arminunruh thanks!

Hello,

Is there anyway to have anchor positions on desktop and mobile? With the code below, found here in the forum, on mobile the content doesn't scroll enough to be seen. Thanks!

<script>
    window.laytheme.on('newpageshown', function(){
       if(window.location.hash.length > 0){
           var id = window.location.hash;
           if(jQuery(id).length > 0){
                jQuery('html, body').animate(
                { scrollTop: jQuery(id).offset().top+10},
                { duration: 1500 });
           }
       } 
    });
</script>

@arminunruh I'm using Local to build the website offline =(

Also if I add the class "black" to consecutive rows, there's a transition to white in between... what's making this happen? Thanks!

<script>
jQuery(window).on('fpAfterSlideLoad', function (e, obj) {
  var $row = jQuery('.row-' + (obj.slideIndex));
  var $navcolor = jQuery('._Caption, nav.primary a span');
  if ($row.hasClass("black")) {
    $row.css({
        'background-color': '#08090b',
        'transition': 'background-color 700ms ease-in-out',
        '-webkit-transition': 'background 700ms ease-in-out',
        '-moz-transition': 'background 700ms ease-in-out',
        '-ms-transition': 'background 700ms ease-in-out',
        '-o-transition': 'background 700ms ease-in-out'
    });  
    $navcolor.css({
        'color': '#fff',
        'transition': 'color 600ms ease-in',
        '-webkit-transition': 'color 600ms ease-in'
    });
  } else {
    $navcolor.css({
      'color': '', // Reset font color
      'transition': '' // Reset transition
    });
  }
});
</script>

@arminunruh

I used your code and have made some progress. Now if I add the class "black" to any row, the previous row(slide) is also targeted, and transition only happens once. I tried both "obj.slideIndex" and "obj.slideIndex - 1".
Can you please help me?

<script>
jQuery(window).on('fpAfterSlideLoad', function (e, obj) {
  var $row = jQuery('.row-' + (obj.slideIndex));
  var $fontcolor = jQuery('._Caption, nav.primary a span');
  if ($row.hasClass("black")) {
    $row.css({
        'background-color': '#08090b',
        'transition': 'background-color 0.7s ease-in-out'});  
    $fontcolor.css({
        'color': '#fff',
        'transition': 'color 0.4s ease'
    });
  } else {
    $fontcolor.css({
      'color': '', // Reset font color
    });
  }
});
</script>

Thanks,
Paola

Hi Armin and friends,

On the fullscreenslider horizontally I have many slides with black background, at the moment I'm targeting each of these slides with the below CSS. But every time I add a new slide the fp-viewing number changes and the code won't work anymore.

body.fp-viewing-0-39, body.fp-viewing-0-25 {
background-color: rgb(8, 9, 11);
-webkit-transition: background 700ms ease;
-moz-transition: background 700ms ease;
-ms-transition: background 700ms ease;
-o-transition: background 700ms ease;
transition: background 700ms ease;
}

body.fp-viewing-0-39 .laynav a, body.fp-viewing-0-25 .laynav a {
color: #fff !important;
transition: color 600ms ease;
-webkit-transition: color 600ms ease;
}

body.fp-viewing-0-39 ._Caption, body.fp-viewing-0-25 ._Caption {
color: #fff;
transition: color 600ms ease;
-webkit-transition: color 600ms ease;
}

Is possible to add a id/class to the specific row to change menu and caption color, anyone achieved this with javascript?
Thanks in advance.

Hello everyone!

Great theme! Any way to change the order of the news element: title (separator) date to date (separator) title

Thank you.