December 6, 201015 yr Hi im building my first proper website and have come across this one problem! for my page banner I am using a JQuery Slideshow (which is linked in the head) of my photographic work, this has worked on all pages, until i also linked lightbox ? here is what it looks like on the pages with lightbox: <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Chris Chapman Creative Media</title> <link href="css/style.css" rel="stylesheet" type="text/css" /> <link href="css/slideshow.css" rel="stylesheet" type="text/css" /> <link href="css/lightbox.css" rel="stylesheet" type="text/css" media="screen" /> <script type="text/javascript" src="js/jquery-1.2.6.min.js"></script> <script type="text/javascript" src="js/slideshow.js"></script> <script type="text/javascript" src="js/rollover_buttons.js"></script> <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="js/lightbox.js"></script> <link rel="shortcut icon" href="images/icon/CCCM16.png" type="image/x-icon" /> </head> <body> <div id="container"> <div id="header"><a href="index.html"><img src="images/header/CCCM Header_2.png" alt="Chris Chapman Creative Media Header" border="none" /></a> </div> <div id="slideshow"> <img src="images/banner/P1030191.jpg" alt="image1" class="active" /> <img src="images/banner/CC2211.jpg" alt="image7" /> <img src="images/banner/P1020229.jpg" alt="image2" /> <img src="images/banner/TC0547edit.jpg" alt="image3" /> <img src="images/banner/P1020807.jpg" alt="image4" /> <img src="images/banner/CC2067.jpg" alt="image5" /> <img src="images/banner/CC2172.jpg" alt="image6" /> </div> I just cant figure out why it wont work! p.s. this page is not live but feel free to see the other pages at Chris Chapman Creative Media Thanks in advance!
December 6, 201015 yr I think its something to do with the prototype.js file conflicting. I remember... erm... what you will have to do is this: At the start of your jquery put this; var $j = jQuery.noConflict(); then put a j infront of the $ signs in your jquery. Example: <script type="text/javascript"> var $j = jQuery.noConflict(); $j(document).ready(function(){ $j("div").hide(); }); <script>
December 8, 201015 yr Author is this to do in the actual jquery-1.2.6min.js or the slideshow.js i made?
December 8, 201015 yr is this the lightbox or one you have created? the common lightbox.js always gave me conflict problems so I switched to colorbox. (others are available http://planetozh.com/projects/lightbox-clones/)
December 9, 201015 yr Author I have used Lightbox2.04 so no but i have made a slideshow (not lightbox but jquery)
December 9, 201015 yr I'm guessing this is a conflict I'll have a look tonight when I get home from work I've done something like this recently can't remember who it was for, try looking through some of my posts
December 9, 201015 yr Well I can't get these 2 to work together I'm quite annoyed about this any jQuery gurus any ideas? I'd swap to a jquery lightbox clone http://line25.com/articles/rounding-up-the-top-10-jquery-lightbox-scripts I didn't see that Zed had already give you a link
December 12, 201015 yr Author At the start of your jquery put this;var $j = jQuery.noConflict(); then put a j infront of the $ signs in your jquery. Problem Solved!! thanks, Alias! lots of head scratching minimized!
Create an account or sign in to comment