treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Anything Slider 1st video Jumping

  • Hi,

    I'm wondering if its normal for the 1st slide in its second rotation to jump from a smaller thumbnail to fullsize?
  • Hi Jerseygreg!

    It sounds like the image dimensions aren't defined. It's difficult to tell without seeing the code. It would help if you shared the HTML, css and javascript and the easiest way to do so would be to modify this demo with your code.
  • Hi Mottie,

    thx again it's the same code as my last post. I appreciate the help!
  • <link rel="stylesheet" type="text/css" href="css/style1.css" />
    <link rel="stylesheet" href="css/anythingslider.css">

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script&gt;
    <script type="text/javascript" src="js/jquery.easing.1.2.js"></script>
    <script src="js/jquery.anythingslider.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/jquery.anythingslider.video.js"></script>
    <script src="js/swfobject.js"></script>


    This is the jquerey

    <script type="text/javascript">
    $(function(){
    $('#slider').anythingSlider({
    resumeOnVideoEnd : true,
    }); })

    </script>


    And here is the html

    <div id="img_box">
    <ul id="slider">
    </li>
    <object width="560" height="315">
    <param name="movie" value="http://www.youtube.com/v/-R5h6fmpQD4? version=3&amp;hl=en_US"></param>
    <param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param>
    <embed src="http://www.youtube.com/v/-R5h6fmpQD4?version=3&amp;hl=en_US&quot; type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed>
    </object>
    </li>
    <li>
    <object width="420" height="315">
    <param name="movie" value="http://www.youtube.com/v/oo7bnhoyFig?version=3&amp;hl=en_US"></param&gt;
    <param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param>
    <embed src="http://www.youtube.com/v/oo7bnhoyFig?version=3&amp;hl=en_US&quot; type="application/x-shockwave-flash" width="420" height="315" allowscriptaccess="always" allowfullscreen="true"></embed>
    </object>
    </li>
    <object width="420" height="315">
    <param name="movie" value="http://www.youtube.com/v/rJNfnR_3wLc?version=3&amp;hl=en_US"></param&gt;
    <param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param>
    <embed src="http://www.youtube.com/v/rJNfnR_3wLc?version=3&amp;hl=en_US&quot; type="application/x-shockwave-flash" width="420" height="315" allowscriptaccess="always" allowfullscreen="true"></embed>
    </object>
    </li>
    </ul>
    </div><!--end of img_box-->
    <div id="video_box">

  • Hiya!

    Well I can already see some issues that may or may not be causing the problem. First, I think the swfobject file should be loaded immediately after the jQuery. The video extension may not be detecting it properly if loaded after.

    The "resumeOnVideoEnd" is set to true by default, so no need to set it, but the trailing comma will cause an error in IE and stop the slider from initializing.

    The html for the third slide is missing an opening <li> tag which my be associated with the problem you are describing.
  • tags fixed...skipping problem is fixed!

    however the resumeOnVideoEnd problem is still persisiting. Here is how the scripts look now
    <link rel="stylesheet" type="text/css" href="css/style1.css" />
    <link rel="stylesheet" href="css/anythingslider.css">

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script&gt;
    <script src="js/swfobject.js"></script>
    <script src="js/jquery.anythingslider.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/jquery.anythingslider.video.js"></script>
    <script type="text/javascript" src="js/jquery.easing.1.2.js"></script>

    <script type="text/javascript">
    $(function(){

    $('#slider').anythingSlider({

    }); })

    </script>

    and the HTML
    <div id="img_box">
    <ul id="slider">
    <li>
    <object width="560" height="315">
    <param name="movie" value="http://www.youtube.com/v/-R5h6fmpQD4?version=3&amp;hl=en_US"></param&gt;
    <param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param>
    <embed src="http://www.youtube.com/v/-R5h6fmpQD4?version=3&amp;hl=en_US&quot; type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed>
    </object>
    </li>
    <li>
    <object width="420" height="315">
    <param name="movie" value="http://www.youtube.com/v/oo7bnhoyFig?version=3&amp;hl=en_US"></param&gt;
    <param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param>
    <embed src="http://www.youtube.com/v/oo7bnhoyFig?version=3&amp;hl=en_US&quot; type="application/x-shockwave-flash" width="420" height="315" allowscriptaccess="always" allowfullscreen="true"></embed>
    </object>
    </li>
    <li>
    <object width="420" height="315">
    <param name="movie" value="http://www.youtube.com/v/rJNfnR_3wLc?version=3&amp;hl=en_US"></param&gt;
    <param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param>
    <embed src="http://www.youtube.com/v/rJNfnR_3wLc?version=3&amp;hl=en_US&quot; type="application/x-shockwave-flash" width="420" height="315" allowscriptaccess="always" allowfullscreen="true"></embed>
    </object>
    </li>
    </ul>
    </div><!--end of img_box-->
  • Hey Mottie,

    I've just been trying to troubleshoot. I've noticed that on the video demo page, the resumeOnVideoEnd behaves the same way. The autoplay continues after the movie starts playing.
  • Hmm, are you testing this live on the web or locally on your computer? When you test it locally, it doesn't work properly because of a flash security block. If it is online, and still having this same problem, then please share a link so I can get a better look at the problem.
  • I am testing locally. I will keep you posted when I get it online.

    Thx again for your help