Issue with Jquery slideshow

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 ri开发者_C百科ght 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!

---

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>

---

fix your selectors there is not ULs nor LIs then try again

---

The problem is probably here, in your CSS:

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

Copy + pasting code isn't a good idea. This rule isn't applied at all, as you don't have any ul element with an id of slider_reel. You have div tags.

I'd try hiding the images beforehand, then running it:

$('#slider_reel img').hide();
// Innerfade code