jcarousel, easyslider and lightbox compatibility?

pbul2004

New Member
Hi,

Just wondering if any of the above jquery can be used on the same page? I am try to use jcarousel and the easyslider on the same page but it wont work, if i comment out one or the other they are working fine on their own, but i need them to work at same time? Is this possible?

Script
HTML:
<!-- jcarousel -->
<script type="text/javascript" src="js/jquery-1.2.3.pack.js"></script>
<script type="text/javascript" src="js/jquery.jcarousel.pack.js"></script>
<!-- easyslider 1.5 -->
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/easySlider1.5.js" type="text/javascript"></script>

CSS
HTML:
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="skins/tango/skin.css" />
<link rel="stylesheet" type="text/css" href="js/jquery.jcarousel.css" />

HTML:
<script type="text/javascript">
            /* <![CDATA[ */
                        $(document).ready(function(){    
                            $("#slider").easySlider({
                                controlsBefore:    '<p id="controls">',
                                controlsAfter:    '</p>',
                                auto: true, 
                                continuous: true
                            });
                            $("#slider2").easySlider({
                                controlsBefore:    '<p id="controls2">',
                                controlsAfter:    '</p>',        
                                prevId: 'prevBtn2',
                                nextId: 'nextBtn2'    
                            });            
                        });    
            /* ]]> */
            </script>
            
            <script type="text/javascript">
            
            
                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();
                    });
                };
                
                
                
                jQuery(document).ready(function() {
                    jQuery('#mycarousel').jcarousel({
                        auto: 3,
                        wrap: 'last',
                        initCallback: mycarousel_initCallback
                    });
                });
                
                
            </script>

Easy Slider HTML

HTML:
                        <div id="sliderWrapper">
                            <div id="slider">
                                <ul>
                                    <li><a href="#"><img alt="1" src="images/test.png"/></a></li> 
                                    <li><a href="#"><img alt="2" src="images/test.png"/></a></li> 
                                    <li><a href="#"><img alt="3" src="images/test.png"/></a></li> 
                                    <li><a href="#"><img alt="4" src="images/test.png"/></a></li> 
                                    <li><a href="#"><img alt="5" src="images/test.png"/></a></li>
                                </ul>
                          </div>
                          </div>


HTML:
                     <ul id="mycarousel" class="jcarousel-skin-tango">
                            <li><a href="#"><img src="images/portfolio/sites/muckypaws.jpg" width="200" height="170" alt="" /></a></li>
                            <li><a href="#"><img src="images/portfolio/sites/muckypaws.jpg" width="200" height="170" alt="" /></a></li>
                            <li><a href="#"><img src="images/portfolio/sites/muckypaws.jpg" width="200" height="170" alt="" /></a></li>
                            <li><a href="#"><img src="images/portfolio/sites/muckypaws.jpg" width="200" height="170" alt="" /></a></li>
                            <li><a href="#"><img src="images/portfolio/sites/muckypaws.jpg" width="200" height="170" alt="" /></a></li>
                            <li><a href="#"><img src="images/portfolio/sites/muckypaws.jpg" width="200" height="170" alt="" /></a></li>
                        </ul>

Hope you can help us
Cheers
 
I'm thinking that your jquery.js might be overwriting elements in your jquery-1.2.3.pack.js. Try removing either one and putting the other one the top and see how that works out.

And if that doesn't work you should wait for Jaz or Harry to spot this topic :p
 
At the moment i have got the slider and the jcarousel working together, however i can not for the life of me get all 3 working together, last one standing is the lightbox!

HTML:
<script type="text/javascript" src="js/lightbox/prototype.js"></script>
<script type="text/javascript" src="js/lightbox/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox/lightbox.js"></script>

<script type="text/javascript" src="js/jquery-1.2.3.pack.js"></script>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/easySlider1.5.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.jcarousel.pack.js"></script>

I know it has something to do with the ordering of the above because when i swap them around they work, but cant get the lightbox to work!

I have uploaded it to an old site ive done, ive have done a quick table with an image of my dog, when clicked on it just opens the larger image in the window and not lightbox. But strip out the jquery packs and it works???

http://www.mucky-paws.com/pbweb/webdesign.html
 
remove both

Code:
<script type="text/javascript" src="js/jquery-1.2.3.pack.js"></script><script src="js/jquery.js" type="text/javascript"></script>

and replace with jQuery 1.4 (you can DL it from jquery.com).
 
the issue is most likely trying to mix 2 different javascript frameworks (jquery for the working bits and prototype for the lightbox). They don't usually mix well without some alteration to the codes.

Try replacing the prototype based lightbox with a jquery option like this (note first from google search) - remember you don't need jquery.js as you already have it :)
 
Thanks for the reply, yeah that makes sense! I will have a go at this when i get home and try it.

Thanks for the replies everyone!
 
You need to use jQuery in no conflict mode to play nice with other libaries jQuery.noConflict() – jQuery API

<script type="text/javascript">
/* <![CDATA[ */
var j$ = jQuery.noConflict();
j$(document).ready(function(){
j$("#slider").easySlider({
controlsBefore: '<p id="controls">',
controlsAfter: '</p>',
auto: true,
continuous: true
});
j$("#slider2").easySlider({
controlsBefore: '<p id="controls2">',
controlsAfter: '</p>',
prevId: 'prevBtn2',
nextId: 'nextBtn2'
});
});
/* ]]> */
</script>

<script type="text/javascript">


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();
});
};


// this bit is ok as it uses jQuery rather than the shortcut $ (dollar) - both do the same thing
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
auto: 3,
wrap: 'last',
initCallback: mycarousel_initCallback
});
});


</script>
 
Also like previously stated you only need the jQuery script on your page once - and where possible you should use the same libary for all functions.
 
I think my job depends on it.. I am having real issues with the script conflicting on the Lightbox2 and easySlider... I have been working on this for a couple days now.. I know that is sad. I tried the no conflict but I may have messed something up.. This is what I have:

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>


<script language="JavaScript" type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/easySlider1.7.js"></script>

<script type="text/javascript">

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-22530867-2']);
_gaq.push(['_trackPageview']);

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

</script>

<script type="text/javascript">
var delayb4scroll=2000 //Specify initial delay before marquee starts to scroll on page (2000=2 seconds)
var marqueespeed=1 //Specify marquee scroll speed (larger is faster 1-10)
var pauseit=1 //Pause marquee onMousever (0=no. 1=yes)?

///

var copyspeed=marqueespeed
var pausespeed=(pauseit==0)? copyspeed: 0
var actualheight=''

function scrollmarquee(){
if (parseInt(cross_marquee.style.top)>(actualheight*(-1)+8))
cross_marquee.style.top=parseInt(cross_marquee.style.top)-copyspeed+"px"
else
cross_marquee.style.top=parseInt(marqueeheight)+8+"px"
}

function initializemarquee(){
cross_marquee=document.getElementById("vmarquee")
cross_marquee.style.top=0
marqueeheight=document.getElementById("marqueecontainer").offsetHeight
actualheight=cross_marquee.offsetHeight
if (window.opera || navigator.userAgent.indexOf("Netscape/7")!=-1){ //if Opera or Netscape 7x, add scrollbars to scroll and exit
cross_marquee.style.height=marqueeheight+"px"
cross_marquee.style.overflow="scroll"
return
}
setTimeout('lefttime=setInterval("scrollmarquee()",30)', delayb4scroll)
}

if (window.addEventListener)
window.addEventListener("load", initializemarquee, false)
else if (window.attachEvent)
window.attachEvent("onload", initializemarquee)
else if (document.getElementById)
window.onload=initializemarquee
</script>

<link href="css/screen10.css" rel="stylesheet" type="text/css" media="screen" />

<style type="text/css">
body{...

I moved them around so many times I am confussed at where I started..
Please help...
Thank you :confused:
 
Back
Top