[JS] Conflict tussen jCarousel en Fancybox

[Rogier.V]

Hallo allemaal,

Ik wil op mijn website jCarousel Lite en Fancybox combineren. Dit houd dus in dat de plaatjes die langs komen in de carousel na een klik openen in een 'lightbox'.

Echter zit ik met een probleem: het werkt maar deels.

In eerste instantie werkt het perfect: je klikt op de miniatuur in de Carousel, en het plaatje springt tevoorschijn in een lightbox. Echter: zoals bekend rouleren de miniaturen wanneer je door de Carousel heen bladert. Wanneer je weer terug komt bij dezelde afbeelding (je dus een hele ronde hebt gemaakt) werkt de Lightbox niet meer: het plaatje wordt geladen als een nieuwe pagina, en niet in een lightbox.

Ik heb Fancybox gekozen omdat deze net als jCarousel Lite werkt met jQuery, zodat daar iig geen problemen mee zouden komen.

Script voor Fancybox:

code:

<!-- Lightbox -->
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.1.pack.js"></script>
<link rel="stylesheet" href="fancybox/jquery.fancybox-1.3.1.css" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/jquery.easing-1.3.pack.js"></script><br />
<script type="text/javascript">
$(document).ready(function() {

    $("a#single_image").fancybox({
        'transitionIn'  :   'fade',
        'transitionOut' :   'fade',
        'speedIn'       :   800, 
        'speedOut'      :   200, 
        'overlayShow'   :   true,
        'titlePosition' : 'inside',
        'hideOnContentClick': true
    });
    

});
</script>
<!-- /Lightbox -->

Script voor jCarousel Lite:

code:

<script type="text/javascript">
        $(function() {
             //carousel begin 
             $(".carousel").jCarouselLite({
                  btnNext: ".next",
                  btnPrev: ".prev"
             });
             
             //rollover hover
             $(".carousel li").hover(function() { //On hover...
    
                var thumbOver = $(this).find("img").attr("src"); //Get image url and assign it to 'thumbOver'
                
                $(this).find("a").css({'background' : 'url(' + thumbOver + ') no-repeat center bottom'});
        
                //Animate the image to 0 opacity (fade it out)
                $(this).find("span").stop().fadeTo('normal', 0 , function() {
                    $(this).hide() //Hide the image after fade
                });
            } , function() { //on hover out...
                //Fade the image to full opacity 
                $(this).find("span").stop().fadeTo('normal', 1).show();
            });
        });
    </script>

En op deze manier gecombineerd:

code:

<div class="carousel">
                           <ul>
                              <li><a id="single_image" title="test" href="AFBEELDING"><span><img alt="" src="AFBEELDING" /></span></a></li>

En dan natuurlijk de scripts zelf, misschien dat ik daarin iets moet veranderen.

Wie o wie kent dit probleem, of kan mij hier iets over vertellen?

[ Voor 0% gewijzigd door Rogier.V op 02-04-2010 01:13 . Reden: typo ]

[disjfa]

Je bouwd je constructors op aan het begin als je document klaar is. Daarna gaat de carousel opnieuw domelementen aanmaken. Dus lijkt me logisch dat er dan geen functie meer op zit. Kijk eens naar de live functie in jquery, en kijk of je dat om je lightbox heen kan bouwen.

[Rogier.V]

Zo had ik het nog niet bekeken, en klinkt erg logisch.
Een oplossing zal dan inderdaad de Live functie zijn, ik ga er morgen eens uitgebreider naar kijken.

[Rogier.V]

Voorlopig heb ik het probleem omzeild door dit stukje code in jcarousellite.js:

code:

        vertical: false,
        circular: true,
        visible: 5,
        start: 0,
        scroll: 1,

te vervangen door:

code:

        vertical: false,
        circular: false,
        visible: 5,
        start: 0,
        scroll: 1,

Hierdoor zorg je er dus voor dat de afbeeldingen niet rouleren, en er dus ook geen nieuwe afbeeldingen bij 'geladen' worden. Dus werkt alles naar behoren.

Maar t blijft geen oplossing, meer een omzeiling van het probleem.