Problem with Parallax Slider

[dmwhipp]

1) Script Title: Parallax Slider

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...ider/index.htm, but I'm using a version updated by John Scheuer from http://www.dynamicdrive.com/dynamici...ider/index.htm

3) Describe problem: When I remove the second slide -- leaving just two slides with embedded videos -- it stops working.

• Here is the page with the script working, featuring 3 slides: http://www.cisleon.org/

• Here is the page with the script working, featuring 2 slides: http://www.cisleon.org/index2.html

I'm trying to have a 2-slide slideshow, with each slide an embedded video. I cannot figure out what I'm doing wrong.
Thanks for any assistance.
Deborah

[jscheuer1]

OK, there's a problem here with your post first that we need to work out or forget about if we can't. No big deal. The first two links in your post are broken (Script URL (on DD) and (version updated by John Scheuer from). Usually, but not always, this happens when someone copies their own post from the preview view, or after it's posted and then discards or deletes that version and then pastes what was copied into a new post. Easy to do, but it usually breaks the links as has happened here, making it harder for me or anyone to understand/help.

If you could please supply those two above mentioned links in unbroken form, that would a great help. In the meantime, I will see if there's still a way I can help without that information.

OK, added later - on the second page http://www.cisleon.org/index2.html there's no reference/link to parallaxslider.js, as a result I'm getting this error:

Uncaught ReferenceError: parallaxSlider is not defined on http://www.cisleon.org/index2.html line: 31

So basically you forgot to link to the parallaxslider.js script before that reference. There could also be other problems, but that has to be fixed first, and may well be the main problem.

[dmwhipp]

Hi John,
You're exactly right -- while looking for a solution, I found my old post regarding installing and editing this script, and copied the main info from there. By the time I'm posting in the forum, I've usually already spent quite a bit of time trying to solve a problem and am burnt out and not in top form, so I completely missed those posting errors -- thanks for catching them and sorry for the confusion.

I've edited the original post to ensure the link to the script on DD is correct (http://www.dynamicdrive.com/dynamici...ider/index.htm) and added the reference to the script on the second page (http://www.cisleon.org/index2.html)

I also created another test page that features 2 slides, with neither being a video, and it works just fine: http://www.cisleon.org/index3.html

So as far as I can tell, the issue is with the script having 2 embedded videos next each other. I'm still testing different tweaks, but am working on another page instead of one of the above.
Thanks,
Deborah

[jscheuer1]

Part of the problem is cookies. Set persist to false. But that still doesn't fix things completely. But with persist true, it's looking for the third slide sometimes, and you only have the two.

The real issue is that for some reason there must be at least one data-bgimage attribute for one of the class="bgoverlay" divs. Then it will work with just videos. It doesn't even have to exist, but it cannot be empty. For example, you can just add the highlighted:

   <div id="myparallaxslider" class="parallaxslider" style="margin:0px auto;">


<div class="slide">
   <div class="bgoverlay"><iframe id="thevidiframe1" style="position:relative; width:960px; height:530px; border:0;" src="http://www.youtube.com/embed/uUzYyo8ffGw?&amp;wmode=transparent&amp;rel=0&amp;showinfo=0" allowfullscreen></iframe></div>
   <div class="desc">
	<div style="position:absolute; width:410px; top:15px; left:15px; background:#000; padding:10px; border-radius:10px;">
	<span style="font-size:20px;"><b>Changing the Picture</b></span><br>Changing the picture of education in America.	
	</div>
   </div>
</div>


<div class="slide">
   <div class="bgoverlay" data-bgimage="bob.jpg"><iframe id="thevidiframe2" style="position:relative; width:960px; height:530px; border:0;" src="https://www.youtube.com/embed/h24kplFaiIo?&amp;wmode=transparent&amp;rel=0&amp;showinfo=0" allowfullscreen></iframe></div>
   <div class="desc">
	<div style="position:absolute; width:410px; top:15px; left:15px; background:#000; padding:10px; border-radius:10px;">
	<span style="font-size:20px;"><b>Whatever It Takes</b></span><br>Featuring Communities In Schools Chair Elaine Wynn.	
	</div>
   </div>
</div>


   </div>

Make sure to also set persist to false, clear the cache, and/or refresh the page, should take care of it.

Note: You can use persist true if you want, but then you need to have a unique wrapper id, otherwise it will use the same cookie as the other show that has 3 slides and get messed up if that cookie is on the third slide. If you change the wrapper id, it must be changed both in the init and the markup, for example (first the init):

<script type="text/javascript">
var firstparallaxslider=new parallaxSlider({
	wrapperid: 'myparallaxslider2', //ID of DIV on page to house slider
	displaymode: {type:'auto', pause:5000, cycles:0, stoponclick:true, pauseonmouseover:true},
	delaybtwdesc:  500 . . .

And to agree in the HTML markup:

   <div id="myparallaxslider2" class="parallaxslider" style="margin:0px auto;">


<div class="slide">
   <div class="bgoverlay"><iframe id="thevi . . .

[dmwhipp]

Thanks once again John ~ I went ahead and used the old transparent 1x1.gif so I wouldn't run into any issues on browsers or devices that I might miss checking, but setting persist to false and adding that did, indeed, fix the problem. I've now made that the homepage -- http://www.cisleon.org/ -- and made a permanent example of it here for myself: http://www.cisflorida.org/samples/slideshow04.html
Thanks again!
Deborah

[jscheuer1]

I didn't think of that. You're right. Some user agents/devices might take issue with a missing image. Doesn't hurt to actually have one, just in case.

[dmwhipp]

Thanks again John and Happy Easter!
Deborah