[jQuery] How to have two javascript dynamically loaded jcarousel on one page ?
Hi,
i'm using the fantastic jCarousel script on my page.
I copied the full code for one carousel twice, changing
That gives me :
var mycarousel_itemList = [ my vars];
function mycarousel_initCallback(carousel)
{
// Disable autoscrolling if the user clicks the prev or next
button.
carousel.buttonNext.bind(\'click\', function() {
carousel.startAuto(0);
});
carousel.buttonPrev.bind(\'click\', function() {
carousel.startAuto(0);
});
// Pause autoscrolling if the user moves with the cursor over the
clip.
carousel.clip.hover(function() {
carousel.stopAuto();
}, function() {
carousel.startAuto();
});
};
function mycarousel_itemLoadCallback(carousel, state)
{
for (var i = carousel.first; i <= carousel.last; i++) {
if (carousel.has(i)) {
continue;
}
if (i > mycarousel_itemList.length) {
break;
}
carousel.add(i,
mycarousel_getItemHTML(mycarousel_itemList[i-1]));
}
};
/**
* Item html creation helper.
*/
function mycarousel_getItemHTML(item)
{
return \' \' + item.url +\' \' + item.img + \' <strong>\' +
item.title + \'</strong><br/>\' + item.nb + \' photo(s) \';
};
jQuery(document).ready(function() {
jQuery(\'#mycarousel\').jcarousel({
auto: 3,
size: mycarousel_itemList.length,
itemLoadCallback: {onBeforeAnimation:
mycarousel_itemLoadCallback}
});
});
</script>
<div id="wrap">
<ul id="mycarousel" class="jcarousel-skin-ie7">
</ul>
</div>
var myfriends_itemList = [my vars];
function myfriends_initCallback(carousel)
{
// Disable autoscrolling if the user clicks the prev or next
button.
carousel.buttonNext.bind(\'click\', function() {
carousel.startAuto(0);
});
carousel.buttonPrev.bind(\'click\', function() {
carousel.startAuto(0);
});
// Pause autoscrolling if the user moves with the cursor over the
clip.
carousel.clip.hover(function() {
carousel.stopAuto();
}, function() {
carousel.startAuto();
});
};
function myfriends_itemLoadCallback(carousel, state)
{
for (var i = carousel.first; i <= carousel.last; i++) {
if (carousel.has(i)) {
continue;
}
if (i > myfriends_itemList.length) {
break;
}
carousel.add(i,
myfriends_getItemHTML(myfriends_itemList[i-1]));
}
};
/**
* Item html creation helper.
*/
function myfriends_getItemHTML(item)
{
return \' \' + item.url +\' \' + item.img + \' \' + item.title +
\' /DESIGN/GENERAL/\' + item.connecte + \' <div class="texte">Now : \' +
item.activite + \'</div> \';
};
jQuery(document).ready(function() {
jQuery(\'#myfriends\').jcarousel({
auto: 5,
size: myfriends_itemList.length,
itemLoadCallback: {onBeforeAnimation:
myfriends_itemLoadCallback}
});
});
</script>
<div id="wrap">
<ul id="myfriends" class="jcarousel-skin-ie7">
</ul>
</div>
It works perfectly on mozilla, but not on IE. I think there is something to
do to load two jCarousel on the same page, but i cannot figure out what. Can
you help me ?
--
View this message in context: http://www.nabble.com/How-to-have-two-javascript-dynamically-loaded-jcarousel-on-one-page---tf4364613.html#a12440528
Sent from the jCarousel mailing list archive at Nabble.com.