Member Offer
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

jcarousel, easyslider and lightbox compatibility?

Discussion in 'Website Design Forum:' started by pbul2004, Feb 20, 2010.

  1. pbul2004

    pbul2004 New Member


    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?

    <!-- 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>
    <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" />
    <script type="text/javascript">
                /* <![CDATA[ */
                                    controlsBefore:    '<p id="controls">',
                                    controlsAfter:    '</p>',
                                    auto: true, 
                                    continuous: true
                                    controlsBefore:    '<p id="controls2">',
                                    controlsAfter:    '</p>',        
                                    prevId: 'prevBtn2',
                                    nextId: 'nextBtn2'    
                /* ]]> */
                <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.buttonPrev.bind('click', function() {
                        // Pause autoscrolling if the user moves with the cursor over the clip.
                        carousel.clip.hover(function() {
                        }, function() {
                    jQuery(document).ready(function() {
                            auto: 3,
                            wrap: 'last',
                            initCallback: mycarousel_initCallback

    Easy Slider HTML

                            <div id="sliderWrapper">
                                <div id="slider">
                                        <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 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>
    Hope you can help us
  2. Kevin

    Kevin Senior Member

    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
  3. ralphsaunders

    ralphsaunders Senior Member

    Having 2 jquery packs can't be good. Scrap both the packs and download 1.4 :)
  4. pbul2004

    pbul2004 New Member

    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!

    <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???
  5. pbul2004

    pbul2004 New Member

    anyone please?
  6. ralphsaunders

    ralphsaunders Senior Member

    remove both

    <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
  7. pbul2004

    pbul2004 New Member

    ive tried that mate, still have the same problem
  8. Levi

    Levi Moderator Staff Member

    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 :)
  9. ralphsaunders

    ralphsaunders Senior Member

    Doh, I should've spotted that.
  10. pbul2004

    pbul2004 New Member

    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!
  11. tbwcf

    tbwcf Active Member

    You need to use jQuery in no conflict mode to play nice with other libaries jQuery.noConflict() – jQuery API

  12. tbwcf

    tbwcf Active Member

    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.
  13. heinbach

    heinbach Junior Member

    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 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']);

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


    <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(>(actualheight*(-1)+8))"px"

    function initializemarquee(){
    if (window.opera || navigator.userAgent.indexOf("Netscape/7")!=-1){ //if Opera or Netscape 7x, add scrollbars to scroll and exit"px""scroll"
    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)

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

    <style type="text/css">

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

Share This Page