Spoiler und Slider

[Fabi]

Hi,

ich möchte einen Spoiler erstellen, der einen Slider mit Bildern enthält. Jedoch kann ich keine Bilder einfügen, Text geht Spoiler aber nicht.

Mein Code:

<style type="text/css" media="screen">  
.infiniteCarousel .wrapper {  
  width: 952px; /* .infiniteCarousel width - (.wrapper margin-left + .wrapper margin-right) */  
  overflow: auto;  
  height: 430px;  
  margin: 0 40px;  
  position: relative;  
  margin: 0 auto;  
  
}  
  
.infiniteCarousel ul a img {  
  border: 0px solid #fff;  
  -moz-border-radius: 0px;  
  -webkit-border-radius: 0px;  
}  
  
.infiniteCarousel .wrapper ul {  
  width: 9999px;  
  list-style-image:none;  
  list-style-position:outside;  
  list-style-type:none;  
  margin:0;  
  padding:0;  
  position: absolute;  
  top: 0;  
}  
  
.infiniteCarousel ul li {  
  display:block;  
  float:left;  
  padding: 10px;  
  height: 400px;  
  width: 952px;  
}  
  
.infiniteCarousel ul li a img {  
  display:block;  
}  
  
  
  
  
  
-->  
</style>  
  
        <style>  
                * { margin: 0; padding: 0; }  
  
                #bg { position: fixed; top: 0; left: 0; z-index: -999;}  
                .bgwidth { width: 100%; }  
                .bgheight { height: 100%; }  
  
                #page-wrap {position: relative; width: 400px; margin: 50px auto; padding: 20px; background: white; -moz-box-shadow: 0 0 20px black; -webkit-box-shadow: 0 0 20px black; box-shadow: 0 0 20px black; }  
                p { font: 15px/2 Georgia, Serif; margin: 0 0 30px 0; text-indent: 40px; }  
        </style>  
  
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>  
        <script>  
                $(function() {  
  
                        var theWindow        = $(window),  
                            $bg              = $("#bg"),  
                            aspectRatio      = $bg.width() / $bg.height();  
  
                        function resizeBg() {  
  
                                if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {  
                                    $bg  
                                        .removeClass()  
                                        .addClass('bgheight');  
                                } else {  
                                    $bg  
                                        .removeClass()  
                                        .addClass('bgwidth');  
                                }  
  
                        }  
  
                        theWindow.resize(function() {  
                                resizeBg();  
                        }).trigger("resize");  
  
                });  
        </script>  
  
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>  
  
  
<script type="text/javascript">  
  
$.fn.infiniteCarousel = function () {  
  
    function repeat(str, num) {  
        return new Array( num + 1 ).join( str );  
    }  
  
    return this.each(function () {  
        var $wrapper = $('> div', this).css('overflow', 'hidden'),  
            $slider = $wrapper.find('> ul'),  
            $items = $slider.find('> li'),  
            $single = $items.filter(':first'),  
  
            singleWidth = $single.outerWidth(),  
            visible = Math.ceil($wrapper.innerWidth() / singleWidth), // note: doesn't include padding or border  
            currentPage = 1,  
            pages = Math.ceil($items.length / visible);  
  
  
        // 1. Pad so that 'visible' number will always be seen, otherwise create empty items  
        if (($items.length % visible) != 0) {  
            $slider.append(repeat('<li class="empty" />', visible - ($items.length % visible)));  
            $items = $slider.find('> li');  
        }  
  
        // 2. Top and tail the list with 'visible' number of items, top has the last section, and tail has the first  
        $items.filter(':first').before($items.slice(- visible).clone().addClass('cloned'));  
        $items.filter(':last').after($items.slice(0, visible).clone().addClass('cloned'));  
        $items = $slider.find('> li'); // reselect  
  
        // 3. Set the left position to the first 'real' item  
        $wrapper.scrollLeft(singleWidth * visible);  
  
        // 4. paging function  
        function gotoPage(page) {  
            var dir = page < currentPage ? -1 : 1,  
                n = Math.abs(currentPage - page),  
                left = singleWidth * dir * visible * n;  
  
            $wrapper.filter(':not(:animated)').animate({  
                scrollLeft : '+=' + left  
            }, 500, function () {  
                if (page == 0) {  
                    $wrapper.scrollLeft(singleWidth * visible * pages);  
                    page = pages;  
                } else if (page > pages) {  
                    $wrapper.scrollLeft(singleWidth * visible);  
                    // reset back to start position  
                    page = 1;  
                }  
  
                currentPage = page;  
            });  
  
            return false;  
        }  
  
        $wrapper.after('<a class="arrow back"></a><a class="arrow forward"></a>');  
  
        // 5. Bind to the forward and back buttons  
        $('a.back', this).click(function () {  
            return gotoPage(currentPage - 1);  
        });  
  
        $('a.forward', this).click(function () {  
            return gotoPage(currentPage + 1);  
        });  
  
        // create a public interface to move to a specific page  
        $(this).bind('goto', function (event, page) {  
            gotoPage(page);  
        });  
    });  
};  
  
$(document).ready(function () {  
  $('.infiniteCarousel').infiniteCarousel();  
});  
</script>  
</head>  
<body>  
  
<!-- Hintergrundbild -->  
<img src="images/background.jpg" id="bg" alt="">  
  
<!-- Headerbereich -->  
<div style="width: 952px; height: 104px;">  
<!--Logo -->  
<div style="padding-top: 20px; padding-left: 675px;">  
<a href="index.html"><img src="images/logo.png" alt="" border="0"></a>  
</div>  
</div>  
  
<!-- Content1bereich -->  
  
<div style="width: 952px;">  
  
<!-- Navi -->  
  
  
  
<div id="nav1">  
<ul>  
<li><a href="index.html#a">Nav 01</a></li>  
<li><a href="index.html#b">Nav 02</a></li>  
<li><a href="index.html#c">Nav 03</a></li>  
<li><a href="index.html#d">Nav 04</a></li>  
</ul>  
</div>  
<div style="width:952px; margin: 0 auto; margin-left: 325px; ">  
  
  
    <div class="pre-spoiler containerHead" style="background-image: url(images/nav_hintergrund.png); height: 31px;">  
        <input name="button" type="image" src="images/remove.png" style="float: right;font-size:10px;margin-right: 40px; margin-top: 8px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.src = 'images/remove.png'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.src = 'images/plus.png';}" value=""/>&nbsp;  
    </div>  
  
    <div style="background: #fff; opacity: 0.9; width: 952px;">  
        <div class="spoiler">  
        <div class="infiniteCarousel" style=""">  
      <div class="wrapper">  
  
    <ul>  
    <li>  
  
<div><img src="pic_left.jpg" alt=""></div>  
</li>  
</ul>  
</div>  
</div>  
<!-- SliederEnde -->  
</div>  
</div>  
<!-- SpoilerEnde -->  
  
</div>  
  
<!-- Content1Ende -->  
  
  
  
</body>

Nun meine Frage: Wie bekomme ich eshin, dass im Spoilercontent Bilder angezgit werden?
Und wie kann ich es einstellen, dass beim Klick des jeweieligen Navigationpunktes zum richtigen Sliderteil gegslidet wird? Mit Anker wird das irgendwie ein bisschen komisch dargestellt...

Bitte wenig Fachbegriffe und für Dumme erklären. Danke :-)