Results 1 to 7 of 7

Thread: Problem with Parallax Slider

  1. #1
    Join Date
    Sep 2004
    Location
    Tallahassee, FL USA
    Posts
    264
    Thanks
    71
    Thanked 2 Times in 2 Posts

    Default Problem with Parallax Slider

    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.




    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
    Last edited by dmwhipp; 03-24-2016 at 02:01 PM.
    Deborah Whipp
    Web Designer
    Tallahassee, FL
    www.DWWebDesigns.com

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    Last edited by jscheuer1; 03-24-2016 at 03:10 AM.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Sep 2004
    Location
    Tallahassee, FL USA
    Posts
    264
    Thanks
    71
    Thanked 2 Times in 2 Posts

    Default

    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
    Deborah Whipp
    Web Designer
    Tallahassee, FL
    www.DWWebDesigns.com

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

    Code:
       <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):

    Code:
    <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:

    Code:
       <div id="myparallaxslider2" class="parallaxslider" style="margin:0px auto;">
    
    
    <div class="slide">
       <div class="bgoverlay"><iframe id="thevi . . .
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. The Following User Says Thank You to jscheuer1 For This Useful Post:

    dmwhipp (03-24-2016)

  6. #5
    Join Date
    Sep 2004
    Location
    Tallahassee, FL USA
    Posts
    264
    Thanks
    71
    Thanked 2 Times in 2 Posts

    Default

    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
    Deborah Whipp
    Web Designer
    Tallahassee, FL
    www.DWWebDesigns.com

  7. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #7
    Join Date
    Sep 2004
    Location
    Tallahassee, FL USA
    Posts
    264
    Thanks
    71
    Thanked 2 Times in 2 Posts

    Default

    Thanks again John and Happy Easter!
    Deborah
    Deborah Whipp
    Web Designer
    Tallahassee, FL
    www.DWWebDesigns.com

  9. The Following User Says Thank You to dmwhipp For This Useful Post:

    jscheuer1 (03-25-2016)

Similar Threads

  1. Parallax Slider - Full Width
    By dmwhipp in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 08-11-2015, 05:08 AM
  2. Parallax Slider Question
    By NoobsterD in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 08-06-2015, 06:41 PM
  3. Parallax Slider - Link Entire Slide/div?
    By dmwhipp in forum Dynamic Drive scripts help
    Replies: 7
    Last Post: 11-27-2014, 02:42 AM
  4. Embed Video in Parallax Slider?
    By dmwhipp in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 11-25-2014, 10:45 PM
  5. Anylink JS Menu appears behind Parallax Slider
    By dmwhipp in forum Dynamic Drive scripts help
    Replies: 14
    Last Post: 11-20-2014, 03:16 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •