[JS] Circular jCarousel + Thickbox

[Knetterhard]

Ben al een poos bezig geweest met Circular jCarousel + Thickbox, geen enkele methode die ik probeerde werkte en weet het echt niet meer.

Het probleem is dat hij de 'modal' box niet opent, maar gewoon een directe link maakt van het plaatje.

Voorbeeld staat op osb2000.nl (zie onderkant van website)

en hieronder het script:

JavaScript:

        // Set thickbox loading image
        tb_pathToImage = "http://www.osb2000.nl/wp-content/themes/osb/img/loading-thickbox.gif";
         
         
        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: ""},  
 {url: "http://www.osb2000.nl/wp-content/uploads/Afbeelding-296.jpg", title: ""},  
 {url: "http://www.osb2000.nl/wp-content/uploads/Afbeelding-297.jpg", title: ""},  
 {url: "http://www.osb2000.nl/wp-content/uploads/Afbeelding-299.jpg", title: ""},  
 {url: "http://www.osb2000.nl/wp-content/uploads/Afbeelding-313.jpg", title: ""},  
 {url: "http://www.osb2000.nl/wp-content/uploads/Afbeelding-314.jpg", title: ""},  
 {url: "http://www.osb2000.nl/wp-content/uploads/Afbeelding-330.jpg", title: ""},  
 {url: "http://www.osb2000.nl/wp-content/uploads/Afbeelding-346.jpg", title: ""},  
 {url: "http://www.osb2000.nl/wp-content/uploads/Afbeelding-359.jpg", title: ""},  
 {url: "http://www.osb2000.nl/wp-content/uploads/Afbeelding-360.jpg", title: ""},  
 {url: "http://www.osb2000.nl/wp-content/uploads/Afbeelding-372.jpg", title: ""},  
 {url: "http://www.osb2000.nl/wp-content/uploads/Afbeelding-377.jpg", title: ""},  
 {url: "http://www.osb2000.nl/wp-content/uploads/Afbeelding-378.jpg", title: ""},  
 {url: "http://www.osb2000.nl/wp-content/uploads/Afbeelding-382.jpg", title: ""},  
 {url: "http://www.osb2000.nl/wp-content/uploads/Afbeelding-386.jpg", title: ""},  
 {url: "http://www.osb2000.nl/wp-content/uploads/Afbeelding-401.jpg", title: ""},  
 {url: "http://www.osb2000.nl/wp-content/uploads/Afbeelding-405.jpg", title: ""},  
 {url: "http://www.osb2000.nl/wp-content/uploads/Afbeelding-412.jpg", title: ""},  
 {url: "http://www.osb2000.nl/wp-content/uploads/Afbeelding-419.jpg", title: ""},  
 {url: "http://www.osb2000.nl/wp-content/uploads/Afbeelding-444.jpg", title: ""},  
 {url: "http://www.osb2000.nl/wp-content/uploads/Afbeelding-463.jpg", title: ""},  
 {url: "http://www.osb2000.nl/wp-content/uploads/Afbeelding-464.jpg", title: ""},  
 {url: "http://www.osb2000.nl/wp-content/uploads/Afbeelding-469.jpg", title: ""},  
 {url: "http://www.osb2000.nl/wp-content/uploads/Afbeelding-481.jpg", title: ""},  
 {url: "http://www.osb2000.nl/wp-content/uploads/Afbeelding-486.jpg", title: ""},  
 {url: "http://www.osb2000.nl/wp-content/uploads/Afbeelding-490.jpg", title: ""},  
 {url: "http://www.osb2000.nl/wp-content/uploads/Afbeelding-495.jpg", title: ""},  
 {url: "http://www.osb2000.nl/wp-content/uploads/Afbeelding-504.jpg", title: ""},  
 {url: "http://www.osb2000.nl/wp-content/uploads/Afbeelding-526.jpg", title: ""},  
 {url: "http://www.osb2000.nl/wp-content/uploads/Afbeelding-569.jpg", title: ""},  
 {url: "http://www.osb2000.nl/wp-content/uploads/Afbeelding-575.jpg", title: ""},  
 {url: "http://www.osb2000.nl/wp-content/uploads/Afbeelding-603.jpg", title: ""},  
 {url: "http://www.osb2000.nl/wp-content/uploads/Afbeelding-639.jpg", title: ""},  
 {url: "http://www.osb2000.nl/wp-content/uploads/Afbeelding-650.jpg", title: ""},  
 {url: "http://www.osb2000.nl/wp-content/uploads/Afbeelding-673.jpg", title: ""},  
 {url: "http://www.osb2000.nl/wp-content/uploads/Afbeelding-292.jpg", title: ""},  
 {url: "http://www.osb2000.nl/wp-content/uploads/Afbeelding-293.jpg", title: ""},  
        ];
         
    function mycarousel_itemVisibleInCallback(carousel, item, i, state, evt)
    {
        // The index() method calculates the index from a
        // given index who is out of the actual item range.
        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);
    };
    
    /**
     * Item html creation helper.
     */
    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}
    });
});

[MueR]

Zorg dat je pagina valideert en fix de javascript errors, misschien dat het dan werkt. Lees ook: Debuggen: hoe doe ik dat? eens..

[ Voor 17% gewijzigd door MueR op 03-02-2010 13:22 ]

[Woy]

Dit staat sowieso op de verkeerde plek, want JS hoort in WEB, echter zal hij daar ook snel op slot gaan, aangezien je een grote lap code dumpt, met weinig uitleg over wat je allemaal al geprobeerd hebt. Als je een wat uitgebreidere post maakt, en alleen relevante code plaatst kun je in WEB een nieuw topic openen.

Deze gaat dus op slot