Playing a landing page slide show only once during a website visit

Hi Rowby,

yes, in most cases a cookie will do the job.

couple of questions:

1. do you want the slideshow to play only once for a given user no matter what browser or device they are using?
In this case, a cookie is not sufficient, and the user would require a login. I suspect this is not your case.

2. Do you want the slideshow to play only once in the given browser, ever? OR,
3. Do you want the slideshow to play once per session - in other words, if the user closes the browser window, or quits their browser, and then returns to the home page a week later, do you want he slide show to play once more?

these two questions have to do with cookie expiration, which can be set arbitrarily, but most times is either set to some very distant future date (to never expire for all intents and purposes), or per session.

Hi Kyle,

Thanks for helping here.

I don't want a login.  

Yes, I want the slideshow to play once per session.   If the user closes their browser or quits and returns to the home page an hour later, a week later  --or a year later the slideshow will indeed play again.

Rowby

One more thing.  And it may require a modification by the slideshow developer.

I would like there to be an "X Exit" on the upper right corner of the slideshow -- so the visitor could exit out of the slideshow instead of having to view it.

I might have to put the slideshow inside of a modal to do that.  And I can do that too.  I have various joomla modal plugins I could use.

So if it can't be easily handled within this question I think I can still do the "eXit" out of the slideshow -- but thought I should add this comment FYI.

Rowby

You could use session storage. Set the session item when the page is unloaded. then test for session item, and if it exists, delete the slideshow element. In theory, this should work. give it a try. I added it to your existing script.

<script type="text/javascript">
(window.lsjq||jQuery)(document).ready(function($) {

$( window ).unload(function() {
  // Save data to the current session's store
  sessionStorage.setItem("slider", "shown");

});

if(sessionStorage.getItem("slider") == "shown"){
 $(".ls-wp-fullwidth-container").remove();
}

if(typeof $.fn.layerSlider == "undefined") { lsShowNotice('layerslider_13','jquery'); }
else {
$("#layerslider_13").layerSlider({pauseOnHover: false, forceLoopNum: false, skin: 'borderlessdark3d', globalBGColor: 'transparent', globalBGSize: 1100, hoverBottomNav: true, thumbnailNavigation: 'disabled', yourLogoStyle: 'left: 10px; top: 10px;', cbInit: function(element) { }, cbStart: function(data) { }, cbStop: function(data) { }, cbPause: function(data) { }, cbAnimStart: function(data) { }, cbAnimStop: function(data) { }, cbPrev: function(data) { }, cbNext: function(data) { }, skinsPath: 'http://rowbytesting.com/components/com_layer_slider/base//static/skins/'})
}
});
</script>

Hi

I added your script to the head, and, well because the other code was generated by the joomla component, it messed with your code.

So I think I need to go into whatever generated the original script -- from the component and modify with your code -- rather than put your code into the header.

Right?  

I've removed your script from the head and now I'm looking into the php for the original php from the developer that I will modify with yours.

Stay tuned.
...Rowby

how did it mess with my code? what did it do?

You should be able to put my script in the HEAD if you want. make sure it goes below jQuery, like this:

<script>
jQuery(function($) {

$( window ).unload(function() {
  // Save data to the current session's store
  sessionStorage.setItem("slider", "shown");

});

if(sessionStorage.getItem("slider") == "shown"){
 $("body").find("._SlideshowPlayOnce").remove(); // << you can delete the whole container if you want
}

})(jQuery);
</script>

Great.  Working perfectly.  If I go to another page and return to the home page it does not show again.

And if I close browsers or switch to another browser the slideshow shows again.

You might want to test it. Otherwise it looks like points time! :)

working fine!!

Rowby

One thing would be good.  While I test the site I need to disable the jquery so I can review the slideshow over and over again.

Is there a switch you can put in the header code so I can just go into it change it from YES to NO to turn the script on and off?  Rather than having to delete it and paste it back in whenever I need to go in and out of test mode.

Rowby

For now I have temporarily removed your working script so that I can test the slideshow over and over :)

But I will put it back in when hopefully you add an on-off "switch" to the header code.

Rowby

Rowby: This article gives some of the background you may want to know about.
https://www.experts-exchange.com/Web_Development/Web_Languages-Standards/PHP/A_3314-How-to-Show-an-Introductory-Web-Page-Once-Using-PHP.html

Thanks Kyle  I'll comment it out.  

And thanks Ray for the underlining concept of cookies.

Rowby