Question

I stayed up all night just trying to resolve the JQuery slideshow but I am not sure why it is not working as expected. I forgot to snap the example but right now my laptop is not with me, so I will post later in several hours’ time, if you need to see the example.

i borrowed plugin’s function: http://medienfreunde.com/lab/innerfade/

    <script>

                   jQuery.noConflict();
                   $(document).ready( function(){
                   $('li#slider_reel').innerfade({
                   animationtype:'fade',
                   speed: 'slow',
                   timeout: 4000,
                   type: 'sequence',
                   containerheight: '648px'; });

                   });

                   </script>


    <div id="slider_view">
    <div id="slider_reel">

    <ul>
    <li><img src="slide/A.jpg"></li>
    <li><img src="slide/B.jpg"></li>
    <li><img src="slide/C.jpg"></li>
    <li><img src="slide/D.jpg"></li>
    </ul>
    </div>
    </div>
    <!--end reel-->

ul#slider_reel li img{
    border: 1px solid #ccc;
    padding: 4px;
}


.fade{
    margin-bottom: 2em;
}

.fade p{
    margin-bottom: 2em;
    text-align: center;
    width: 100%;
    background: #fff;
}

The result: all images appear in long vertically order (just like stack or pile to one another). Couldn’t figure why it is behaving like this. Thank you in advance for your help

EDIT
My apologises. It did have ul and li – i forgot to add them inside. got the same result.

EDIT II
I finally got it working. i think i missed some ‘}’ or something and also I replaced the script with actual file instead of href.

Thank you so much for your help!

Answer 1

I have got it working,
http://jsfiddle.net/BceNn/6/

One of the problems:

containerheight: '648px'; /*REMOVE THIS SEMICOLON*/ });/*REMOVE THIS SEMICOLON*/

EDIT: Here is working code.

<script type="text/javascript">
$(document).ready( function(){
    $('#slider_reel').innerfade({
        animationtype:'fade',
        speed: 'slow',
        timeout: 4000,
        type: 'sequence',
        containerheight: '648px' 
    })
});
</script>


    <ul id="slider_reel">
    <li><img src="slide/A.jpg"></li>
    <li><img src="slide/B.jpg"></li>
    <li><img src="slide/C.jpg"></li>
    <li><img src="slide/D.jpg"></li>
    </ul>