Search code examples
jqueryslideshoweasyslider

Please help me in solving jquery slideshow

I have created a slideshow using jquery easyslider. But its not happening. I am not able to find where exactly the problem.

The Javascript is as follows:

<script type="text/javascript">
    $(document).ready(function(){   
        $("#slider").easySlider({
            auto: true, 
            continuous: true
        });
    }); 
</script>

..and the corresponding HTML:

<div id="slider">
    <ul>                
        <li><img src="Beauty/1.jpg" /></li>
        <li><img src="Beauty/2.jpg" /></li>
        <li><img src="Beauty/3.jpg" /></li>
        <li><img src="Beauty/4.jpg" /></li>
        <li><img src="Beauty/5.png" /></li>         
    </ul>
</div>
Solution

  • The code you posted here is working. I've setup a fiddle : http://jsfiddle.net/jomanlk/jFePh/

    Looking at your code in the HTML pages there are a couple of problems.

    1. The images don't actually exist so you wouldn't know whether it's working properly anyway

    2. Your show/hide code doesn't seem to be working (toggleMe('para2') I think). It doesn't actually show all the containers.

    3. #slider remains hidden and the UL inside just keeps switching between pt/px.

    Your markup seems to be ok, but your JS is not working as you expect. There's a lot of JS that's been included at the top of the page, by Dreamweaver I assume. You might want to clean out all that and get the basics working before you add any functionality to the page.

    EDIT

    The problem you're having is related to how easySlider figures out the dimensions.

    You start out with 

    <div id="para3" style="display:none">

    When the easySlider code kicks in, it tries to figure out the dimensions. Since the height and the width are set to 0 it figures it can't actually do the slideshow and gives up (this is an oversimplification)

    This can be seen in this fiddle I setup : http://jsfiddle.net/jomanlk/jFePh/2/

    The solution for this would be to remove the display:none from your DIVs and hide it using JS AFTER easySlider has loaded and done its bit.

    So to fix this problem.

    1. Remove the style attribute and add a class so it looks like this <div id="para1" class="hideMeLater">

    2. Change the JS at the top of your document so it looks like the below 

        $(document).ready(function(){   
        $("#slider").easySlider({
           auto: true, 
           continuous: true
        });
        $('.hideMeLater').hide();//hiding all the divs we removed display:none from
    });

    This should do fix your slideshow problem. I've set up a fiddle with a sample here : http://jsfiddle.net/jomanlk/jFePh/3/

    As an aside, I suggest you get familiar with JS and jquery so that you understand what is actually happening when you include plugins. There are some excellent tutorials available on the net.

    Also, you should clean up your HTML.