The Scarecrow Posted April 8, 2013 Share Posted April 8, 2013 I am trying to use a Jquery Slideshow and the Lightwindow 2.0. Their must be a conflict when both on the page neither work. Does anyone have any experience with this and could give me some help? Link to comment Share on other sites More sharing options...
0 n_K Posted April 8, 2013 Share Posted April 8, 2013 Give some example code? If you don't give us any help or anything you've tried, we can't help you. Link to comment Share on other sites More sharing options...
0 The Scarecrow Posted April 8, 2013 Author Share Posted April 8, 2013 ok I am not sure how much code you want. This about a 9 page html page (including CSS). but I have tried changing the $ to JQ$ in all related documents to the lightwindow. live sample here The lower right hand cornor items ( lowest ones ) are for the lightwindow. (right now it just opens a new window instead of the light window) The lightwindow and the image slider both use $ in the JQuery and I am guessing that is the problem. Link to comment Share on other sites More sharing options...
0 lnmnky Posted April 8, 2013 Share Posted April 8, 2013 Link so I can Firebug it? Link to comment Share on other sites More sharing options...
0 The Scarecrow Posted April 8, 2013 Author Share Posted April 8, 2013 Sent you a PM with the website link to firebug. Link to comment Share on other sites More sharing options...
0 the better twin Posted April 9, 2013 Share Posted April 9, 2013 You are getting the following errors: SCRIPT5009: 'jQuery' is undefined index2.cfm, line 184 character 1 SCRIPT5009: 'Prototype' is undefined effects.js, line 138 character 1 SCRIPT5009: 'Class' is undefined lightwindow.js, line 24 character 1 First things first - you need to put your call to jQuery before you use any jQuery code in the document. (also do the same with your prototype library) Your prototype script has been commented out? Assuming that you are testing it? I would also use a different way for no conflict which still lets you use the $ function. Finally, you can put all your init code together in one document ready function, preferably in an external file too. Compare the two below: <!-- CSS --><link rel="stylesheet" type="text/css" href="lightwindow/css/lightwindow.css" /><link rel="stylesheet" href="coin-slider/coin-slider-styles.css" type="text/css" /><!-- Libraries--><script type="text/javascript" src="coin-slider/jquery-1.7.2.js"></script><script type="text/javascript" src="lightwindow/javascript/prototype.js"></script><!-- required scripts --><script type="text/javascript" src="coin-slider/coin-slider.min.js"></script><script type="text/javascript" src="lightwindow/javascript/lightwindow.js"></script><script type="text/javascript" src="lightwindow/javascript/effects.js"></script><!-- init script --><script>// JavaScript Document$.noConflict(); jQuery(document).ready(function($) { // Code that uses jQuery's $ can follow here. //function on links <a> $("a").click(function(event){ //add a class to your html //<p class="hideMe"> $(".hideMe").hide("slow"); event.preventDefault(); }); // Coin slider $('#coin-slider').coinslider({ width: 960, navigation: false, delay: 5000 }); });function MM_openBrWindow(theURL,winName,features) { //v2.0 window.open(theURL,winName,features);}</script>[/CODE] Your current code: [CODE]<script>// JavaScript Documentvar $jQ = jQuery.noConflict();$jQ(document).ready(function(){ //function on links <a> $jQ("a").click(function(event){ //add a class to your html //<p class="hideMe"> $jQ(".hideMe").hide("slow"); event.preventDefault(); });});//end document ready function<br></script><!-- CSS --><link rel="stylesheet" type="text/css" href="lightwindow/css/lightwindow.css" /><script type="text/javascript" src="coin-slider/jquery-1.7.2.js"></script><script type="text/javascript" src="coin-slider/coin-slider.min.js"></script><!--<script type="text/javascript" src="lightwindow/javascript/prototype.js"></script>---><script type="text/javascript" src="lightwindow/javascript/effects.js"></script><script type="text/javascript" src="lightwindow/javascript/lightwindow.js"></script><link rel="stylesheet" href="coin-slider/coin-slider-styles.css" type="text/css" /> </script><script type="text/javascript"> $(document).ready(function() { $('#coin-slider').coinslider({ width: 960, navigation: false, delay: 5000 }); });function MM_openBrWindow(theURL,winName,features) { //v2.0 window.open(theURL,winName,features);}</script>[/CODE] Link to comment Share on other sites More sharing options...
0 The Scarecrow Posted April 9, 2013 Author Share Posted April 9, 2013 OK Thanks that makes sense I like your code much more clean. I have implemented this code. Now the slider nor the lightwindow work now. Link to comment Share on other sites More sharing options...
0 the better twin Posted April 9, 2013 Share Posted April 9, 2013 OK Thanks that makes sense I like your code much more clean. I have implemented this code. Now the slider nor the lightwindow work now. Ok we can go through one error at a time. I swapped round these two scripts when i shouldnt have: <script type="text/javascript" src="lightwindow/javascript/lightwindow.js"></script><script type="text/javascript" src="lightwindow/javascript/effects.js"></script>[/CODE] Lightwindow requires effects so move the effects one above the lightwindow. Link to comment Share on other sites More sharing options...
0 the better twin Posted April 9, 2013 Share Posted April 9, 2013 Also there is still a conflict, try this alternative: <script>(function($){// Code that uses jQuery's $ can follow here. $(document).ready( function(){ //function on links <a> $("a").click(function(event){ //add a class to your html //<p class="hideMe"> $(".hideMe").hide("slow"); event.preventDefault(); }); // Coin slider $('#coin-slider').coinslider({ width: 960, navigation: false, delay: 5000 });})(jQuery);function MM_openBrWindow(theURL,winName,features) { //v2.0 window.open(theURL,winName,features);}</script>[/CODE] Link to comment Share on other sites More sharing options...
0 The Scarecrow Posted April 9, 2013 Author Share Posted April 9, 2013 (edited) I have made that change and I am getting an error on that scripting Link to comment Share on other sites More sharing options...
0 the better twin Posted April 9, 2013 Share Posted April 9, 2013 I have made that change and I am getting an error on that scripting Can you change the init script as shown above? Link to comment Share on other sites More sharing options...
0 The Scarecrow Posted April 9, 2013 Author Share Posted April 9, 2013 Yes and it tells me there is a Syntax Error on line 269. Which is the end of the script you posted. Link to comment Share on other sites More sharing options...
0 the better twin Posted April 9, 2013 Share Posted April 9, 2013 Yes and it tells me there is a Syntax Error on line 269. Which is the end of the script you posted. Yeah sorry, its missing the closing brackets. add : });[/CODE] before: [CODE]})(jQuery);[/CODE] Link to comment Share on other sites More sharing options...
0 The Scarecrow Posted April 9, 2013 Author Share Posted April 9, 2013 Dude that is so awesome. One problem. The text bar on the image slider appears over the lightwindow. Is there a solution for that? Link to comment Share on other sites More sharing options...
0 the better twin Posted April 9, 2013 Share Posted April 9, 2013 Dude that is so awesome. One problem. The text bar on the image slider appears over the lightwindow. Is there a solution for that? Yep thats an easy one. The z-index on your lightwindow is 999, whereas on the coinslider it is 1000. You could change line 14 of lightwindow.css to the following: #lightwindow {display: none;visibility: hidden;position: absolute;z-index: 1001; /* puts the lightwindow above everything else */line-height: 0px;}[/CODE] Link to comment Share on other sites More sharing options...
0 The Scarecrow Posted April 9, 2013 Author Share Posted April 9, 2013 You are a lifesaver thank you so much for helping me with this. Link to comment Share on other sites More sharing options...
0 the better twin Posted April 9, 2013 Share Posted April 9, 2013 No problem. We got there in the end. Good luck with your site. Link to comment Share on other sites More sharing options...
Question
The Scarecrow
I am trying to use a Jquery Slideshow and the Lightwindow 2.0. Their must be a conflict when both on the page neither work. Does anyone have any experience with this and could give me some help?
Link to comment
Share on other sites
16 answers to this question
Recommended Posts