Question

I’m using two jQuery plugins on the same page, namely jflickrfeed and bxSlider. jflickrfeed pulls my 10 most recent photo thumbnails from flickr and puts them into a div, and bxSlider takes the contents of the div and scrolls them in a nice ticker fashion. They work seperately when on the same page, but when I try and make them work together on the same div, bxSlider just seems to give up.

This is in the head of the page:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="jflickrfeed.min.js"></script>
<script src="setup.js"></script>
<script src="jquery.bxSlider.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('#slider2').bxSlider({
displaySlideQty: 10,
ticker: true,
tickerSpeed: 3000,
tickerHover: true,
});
});
</script>

setup.js contains the following:

$(document).ready(function(){

    $('#slider2').jflickrfeed({
        limit: 10,
        qstrings: {
            id: '22264049@N00', tags: 'gigsw, peoplew, miscw, lomow', tagmode: 'any'
        },
        itemTemplate: '<div><a href="{{link}}"><img src="{{image_s}}" alt="{{title}}" border=0 /></a></div>'
    });
});

and the body just contains

<div id="slider2"></div>

And I’ll just link to the other two as they are pretty lengthy with all the optional bits.

Can anyone help with getting these two to work together?

Answer 1

I haven’t used these plugins, but it looks like the flickr one supports a callback function. Perhaps you should use that to apply the slider when loaded.

$(function(){
     var jflckoptions = {...};
     var jflcktemplate = "...";
     var bxoptions = {...};
     $("#slider2").jflickrfeed(jflckoptions,jflcktemplate,function() { $("#slider2").bxSlider(bxoptions); });
    });