[JS] Circular jCarousel + Thickbox

[Knetterhard]

Ik zit al dagenlang met een probleem waar ik absoluut niet uitkomt.

Het gaat om de site: http://www.osb2000.nl/ (aan de onderzijde zie je de plaatjes.)

Mijn opdracht was om de jCarousel te implenteren met Thickbox (zie http://sorgalla.com/projects/jcarousel/ voor source van jCarousel). Normaal werkt jCarousel + Thickbox gewoon, zolang je niet de waarde "wrap: circular" mee geeft. Dit geeft echter voor mij een groot probleem omdat ze mij hebben gevraagt om de jCarousel te implenteren met een loop functie (de circular) en thickbox.

Ik heb al verschillende manieren geprobeerd maar het mocht allemaal niet baten, ik had een blog post op google gevonden waarin ze de image een 'hardcoded' value mee gegeven en die is als volgt;

JavaScript:

return '<a href="' + url_m + '" onclick="tb_show(' + item.title + ', \'#TB_inline?height=800&amp;width=600&amp;inlineId=hiddenModalContent\', \'false\');return false" ><img src="' + item.url + '" border="0" alt="' + item.title + '" width="96" height="75" /></a>';

Deze lost echter niets op, als ik op het plaatje klik opent hij gewoon in een nieuwe pagina en dus niet in de modal box van Thickbox.

Vervolgens heb ik de thickbox op een andere manier aangeroepen die ook niet bleek te werken;

JavaScript:

return '<a class="thickbox" href="' + url_m + '" title="' + item.title + '"><img src="' + item.url + '" width="96" height="75" border="0" alt="' + item.title + '" /></a>';

Uiteindelijk werkt hij nog steeds niet en raakt mij geduld op

Volledige code:

JavaScript:

 <script type="text/javascript">         
         
        var mycarousel_itemList = [
           {url: "http://www.osb2000.nl/wp-content/uploads/Afbeelding-684.jpg", title: ""},  
       {url: "http://www.osb2000.nl/wp-content/uploads/Afbeelding-680.jpg", title: ""},  
       {url: "http://www.osb2000.nl/wp-content/uploads/Afbeelding-290.jpg", title: ""}
        ];
         
    function mycarousel_itemVisibleInCallback(carousel, item, i, state, evt)
    {
        var idx = carousel.index(i, mycarousel_itemList.length);
        carousel.add(i, mycarousel_getItemHTML(mycarousel_itemList[idx - 1]));
    };
    
    function mycarousel_itemVisibleOutCallback(carousel, item, i, state, evt)
    {
        carousel.remove(i);
    };
    

    function mycarousel_getItemHTML(item)
    {
        var url_m = item.url.replace(/_s.jpg/g, '_m.jpg');
        //return '<a href="' + url_m + '" title="' + item.title + '" class="lightbox"><img src="' + item.url + '" width="96" height="75" border="0" alt="' + item.title + '" /></a>';
        //return '<a class="thickbox" href="' + url_m + '" title="' + item.title + '"><img src="' + item.url + '" width="96" height="75" border="0" alt="' + item.title + '" /></a>';
        return '<a href="' + url_m + '" onclick="tb_show(' + item.title + ', \'#TB_inline?height=800&amp;width=600&amp;inlineId=hiddenModalContent\', \'false\');return false" ><img src="' + item.url + '" border="0" alt="' + item.title + '" width="96" height="75" /></a>';

    };
    
    jQuery(document).ready(function() {
        $('#mycarousel').jcarousel({
            wrap: 'circular',
        visible: 9,
            itemVisibleInCallback: {onBeforeAnimation: mycarousel_itemVisibleInCallback},
            itemVisibleOutCallback: {onAfterAnimation: mycarousel_itemVisibleOutCallback}
        });
    });


    </script>

Normaliter werkt jCarousel met de tb_init functie, maar dat werkt niet met de "circular" functie.

Hoop dat ik zo voldoende infromatie heb gegeven, en zie hier graag een reactie tegemoet.

[MueR]

Zoals ik in MueR in "[JS] Circular jCarousel + Thickbox" zei: zorg dat je pagina valideert, niet langer in quirksmode staat, misschien dat het dan werkt. Met validerende HTML is het al lastig genoeg om javascript cross-browser compatible te krijgen, zonder is het een ramp. Gooi daar Quirksmode bij en het is helemaal feest.