Built in Slide show

[Lasa]

I have a site where the slideshow is below the fold (not in sight) but it seems that by the time the viewer gets to the slideshow it's already gone through some slides. My first slide set up the rest of the slides, so if missed the rest don't make sense. Is there a way to have the slideshow start when it comes into view?
Thanks,
Lasa

[Pablo]

You can use the 'onscrollreveal' event to start the slideshow when it comes into view.

[Lasa]

I'll try it, thanks!

[Lasa]

I'm setting up the page events but which ACTION do I use?
Also, tried events on the slideshow itself but can't seem to figure out the action to use.

Lasa

[Lasa]

I think I tried every action ... doing something wrong.
The slideshow is in a layoutgrid. I've tried onscrollreveal events with targeting the slideshow but I'm doing something wrong.
If you could give me a link to or play by play how to it would help me big time.
Thanks,
Lasa

[Pablo]

To be able to help you, I need a DEMO project (.wbs file) so I can see all your settings.

I do not need the complete project because that will only take more time to figure out what you have done.
Basically, I just need a small project with one page and object(s) that are relevant to your question.

For further details about how to share a project file, please see this FAQ:
https://www.wysiwygwebbuilder.com/forum ... 10&t=82134

[Lasa]

Thanks I'll try to give you'll a sample.
It's official, I did an onscrollreveal events and tried ever action and nothing worked... the slidershow starts before the onscrollreveal.
Oh well.
Lasa

[Lasa]

Hi Pablo,
I hope I did this right. I uploaded a sample of the issue I am having...plus a downloadable zip with .wbs and image folder.

If you follow this link http://threefooter.com/slider you will see a page full of ispum text... at the bottom of the text (hopefully beyond the break on your pc) is a wb slider with 5 numbered slides.

If you open the page and count to 10, then move down to see the slider the slider will be on 3-4. I need the slider to start on onscrollreveal because they need to be seen in sequence.

ZIP only is here:
http://threefooter.com/slider/slider-issue.zip

Thanks,
Lasa

[Pablo]

You are using the wrong event action. 'Show' will do nothing on a visible element...

First you will need to stop the slideshow on page load, otherwise it will start automatically.
event: ondocumenready
action: run JavaScript

Code: Select all

$('#SlideShow2').slideshow('stop');

Then you will have to add an onscrollreleal event to start the slideshow.

Code: Select all

$('#SlideShow2').slideshow('start');

[Lasa]

That all makes perfect sense...
Thanks!

[Lasa]

I set up the page properties as indicated, stop and start ... the slideshow stops upon loading but does not start on reveal...?
Lasa

[Lasa]

Ok...
On my test site it works perfectly.
On a different version of the same site it works perfectly.
but on the site at hand, the minute I add the onscrollreveal and $('#SlideShow2').slideshow('start');
It breaks the page.. the above paralax does not appear, the slider is out of layergrid all hell breaks loose?
The different version of the same site has all the same stuff just in a different order...
again it seems to be a glitch in my system not the program.

Lasa

[Lasa]

So, I compared the two versions... My newer version had a tip of the layergrid containing the slide show showing on the page load...
So when I added the onreveal that was breaking the page? the paralax i have above it wouldn't show...the slideshow would not be contained in the layergrid... weird.

So I placed the reveal even another layergrid below the layergrid containing the slideshow... and it works perfectly because it isn't revealed on page loading....at least on my screen size. So I got around this but, the weird thing is that if I am "watching" the slideshow and press the browser page refresh, wham it again totally breaks the page. If I return to the top of the page, and refresh, it works again.
Normal people aren't going to refresh the page in the middle of a slideshow but it really shouldn't break the site if they do

http://threefooter.com/tradefair2023
Lasa

[Pablo]

I cannot see what you have done based on the HTML code of the page.
But, I think the order of the elements is not correct. The slideshow should be above the onscrollevent, otherwise the slideshow has not been initialized yet.

[Lasa]

Thanks for sticking with me here...
"The slideshow should be above the onscrollevent"..

It is... I placed the onscrollreveal a couple of layergrids under the slideshow so the slideshow would be showing in full before starting.
What I find strange is that a page refresh breaks the page if the slideshow is running... does it break for you?
Lasa

[Pablo]

Yes, it breaks for me. You can see the reason in the error console of the browser.
I still think the problem is related to the order of the elements.

[Lasa]

I made the source default for easy viewing in case it helps.
I'll look at the order see if I figure it out.
Lasa

[Lasa]

The event is on the indexlayoutgrid13 which is under the slideshow...if viewing the source code
line 256, while the slideshow is on line 226

[Pablo]

I think the order is wrong.

Please look at the script, the scroll event is before the slideshow initialization.

Code: Select all

function onScrollindexLayoutGrid13()
   {
      var $obj = $("#wb_indexLayoutGrid13");
      if (!$obj.hasClass("in-viewport") && $obj.inViewPort(false))
      {
         $obj.addClass("in-viewport");
         $('#SlideShow2').slideshow('start');;
      }
   }
   onScrollindexLayoutGrid13();
   $(window).scroll(function(event)
   {
      onScrollindexLayoutGrid13();
   });
   $("#SlideShow2").slideshow(
   {
      interval: 4500,
      type: 'sequence',
      effect: 'clip',
      direction: 'horizontal',
      pagination: false,
      fullscreen: 4,
      maxWidth: 1200,
      effectlength: 1500
   });

[Lasa]

I had the option for JS to be at the bottom...
I unchecked that, so no it appears at the top but it's still breaking?
Lasa

[Pablo]

You will need to change the order of the elements or add the 'onscrollevent' to another element.