|
JavaScript - Conflict Between Lightbox And Jquery
Hi all
I have a page on a website I am creating that has both a lightbox rel link and a quick calculator to work out a size of a product. Here are the links to the java files I am using: <link rel="stylesheet" href="css/style.css" type="text/css" media="all" /> <link rel="stylesheet" href="css/jquery.lightbox.css" type="text/css" media="screen" /> <script type="text/javascript" src="scripts/jquery.js"></script> <script type="text/javascript" src="scripts/jquery.lightbox.js"></script> <script type="text/javascript" src="scripts/swfobject.js"></script> <script type="text/javascript" src="scripts/sandstone.js"></script> <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> <script src="scripts/prototype.js" type="text/javascript"></script> <script src="scripts/scriptaculous.js?load=effects,builder" type="text/javascript"></script> <script src="scripts/lightbox.js" type="text/javascript"></script> Here is the actual lightbox link: <a href="testimage.jpg" rel="lightbox" ><img src="testimage.jpg" > And finally the calculator: <form method="post" action=""> <table width="220" border="0" cellpadding="2" cellspacing="0"> <tr align="left"><td width="87" height="30" class="meter-calc-text">Width (m)</td> <td width="117" height="30" align="left"> <input name="width" type="text" id="calc-width" size="6" /></td> </tr> <tr align="left"><td height="30" class="meter-calc-text">Length (m)</td> <td height="30" align="left"><input name="length" type="text" id="calc-length" size="6" /></td> </tr> <tr align="left"><td height="40" colspan="2"> <select name="packcontents" class="meter-calc-dropdown" id="calc-packcontents" onchange="updateProduct(this.options[this.selectedIndex].id)" style="width:140px;"> <option value="0" selected class="meter-calc-text">Product Select</option> <option value="1" selected class="meter-calc-text">1</option> <option value="2" selected class="meter-calc-text">2</option> </select> <input type="button" name="go" value="Go" id="calc-trigger" class="calc-go" /> </td> </tr> <tr> </tr> </table> <table width="220" border="0" cellpadding="2" cellspacing="0"> <tr> <td width="83" height="30" class="meter-calc-text">You Requi </td> <td width="121" height="30" align="left" class="product-cell-info-table-text"> <input name="meters" type="text" class="small" id="calc-meters" value="" size="5" /> <span class="meter-calc-text">m2</span> </td> </tr> <tr> <td height="30" class="meter-calc-text"> </td> <td height="30" align="left" class="product-cell-info-table-text"> <input name="packs" type="text" class="small" id="calc-packs" value="" size="5" /> <span class="meter-calc-text">Packs</span> </td> </tr> </table> <input type="hidden" name="productid" id="productid" value=""> <div id="addit" style="display:none"> <a name="addit" class="meter-calc-text" onclick="location.href='basket.php?action=add&id='+$('#productid').val()+'&quantity='+$('#calc-packs').val()+'&return=http://www.cq-designs.co.uk/clientarea/sandstonecentre/clientarea/sandstonecentre/product.php?category=2&type=&colour=1'">Add To Cart</a> </div> </form> The problem I am having is that they both don't work together. If I comment out the lightbox javascript the calcukator works but not the lightbox and Vice Versa! Please help Thanks Pete Similar TutorialsPlease see URL: http://www.freedommd.com/Freedom10/index.shtml 1. On the navbar, click on "Demos > EMR Features" (using jQuery for the navbar) 2. On the "FreeDOM EMR" page, in addition to the jQuery navbar, I am using Lightbox to display images (click on the "dashboard" thumbnail). There is a conflict of some sort here between scripts. Code: <!--jquery menu code directly below--> <script type="text/javascript" language="javascript" src="js/jquery.js"></script> <script type="text/javascript" language="javascript" src="js/navmenus.js"></script> <!--end jquery nav--> <!--Lightbox code directly below--> <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> <!--end Lightbox --> As is, on this page, my Lightbox code works fine, but my navbar will not expand the sub menus. If I remove the Lightbox code, then the navbar works fine. I'd really like for them both to work. : ) I tried putting the .js in different directories, separating the Lightbox code from the jQuery code but that didn't help. All .js files are attached. Much appreciated if someone can tell me what I need to do. Thanks, John I have a web page and on the click of one button I wish to play a video using videobox. On the click of a different button I wish to show an image in lightbox. On the page works Videobox works with just the videobox code or the Lightbox works with just the lightbox code. Neither of them work with both codes. I have all the code elements (including the css) for videobox in a folder called js All the code elements for lightbox in a folder called js2 Does anyone know why this is happening and how I can get to use both from seperate buttons on the same webpage? All help much appreciated This is the code I have used for them on the webpage: (The top code is for the videobox followed by the lightbox code) Code: <link rel="stylesheet" href="../../js/videobox.css" type="text/css" media="screen" /> <script type="text/javascript" src="../../js/mootools.js"></script> <script type="text/javascript" src="../../js/swfobject.js"></script> <script type="text/javascript" src="../../js/videobox.js"></script> <link rel="stylesheet" href="../../js2/lightbox.css" type="text/css" media="screen" /> <script type="text/javascript" src="../../js2/prototype.js"></script> <script type="text/javascript" src="../../js2/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="../../js2/lightbox.js"></script> Hi, I'm just putting the finishing touches on my new website and decided to include a custom scroll bar to really finish off the look of a couple of pages. I've managed to implement it successfully into one of my pages, however on another it seems to be a bit hit and miss as to whether it works in different browsers. After some experimentation I think I've managed to determine that the problem is that the javascript for the custom scrollbar is conflicting with some other javascript on the same page (lightbox image viewer). I came to this conclusion as prior to adding the custom scrollbar lightbox worked fine, and now after adding the addition javascript for the scrollbar lightbox has stopped working (and the scrollbar is hit and miss as to whether it works). In addition as I say, I have implemented the scrollbar into a different page (which doesn't have any other javascript to conflict with) which seems to work fine. Here's the page prior to adding the new scrollbar and with lightbox working: Here's the page with the scrollbar added and lightbox not working: The code that I suspect is conflicting is as follows: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Ryan Robinson | Gear</title>
<!-- lightbox script -->
<link rel="stylesheet" href="lightbox/css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="lightbox/js/prototype.js"></script>
<script type="text/javascript" src="lightbox/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="lightbox/js/lightbox.js"></script>
<!-- scrollbar script -->
<link rel="stylesheet" href="scrollbar/css/scrollbar_gear.css" type="text/css" media="screen"/>
<script type="text/javascript" src="scrollbar/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="scrollbar/js/jquery.tinyscrollbar.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#scrollbar1').tinyscrollbar();
});
</script>
I could be wrong, but considering they work separately but whenever I put them together one or both stops it leads me to believe this must be the problem. Anyone have any idea of how I might fix this? (PS. I am still a bit of a noob when it comes to code, so please make any suggestions as simple as possible!) Thanks There is a serious conflict b/w Google plus button and lightbox script the buttons works fine in all other pages but when lightbox script is added to the page there is some problem. It has a JavaScript error and the Google plus one button wont show up in the header. the error says uncaught error for the length. the length parameter is used in both lightbox.js and plusone.js here is the link http://www.ornusweb.com/what_we_done.html can some one please give me a code snippet to solve this issue hi guys! i was building a website using two jquery codes . first one for the slideshow banner and the other one for the menu but only one of them works, i've search on the web and i fouond something called jquery no conflict() is this good? this is the code inside de <head> tags Code: <!-- JavaScripts-->
<script type="text/javascript">
jQuery.noConflict();
</script>
/*This is the menu's*/
<script type='text/javascript' src="jquery-1.2.6.min.js"></script>
<script type='text/javascript' src="kwicks.js"></script>
<script type='text/javascript' src="custom.js"></script>
/*Here starts the sideshow*/
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/s3Slider.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#slider').s3Slider({
timeOut: 3000
});
});
</script>
</head>
Hi All, I am simply trying to get 2 booking systems working on the 1 page but it seems that they have a conflict, they both access the exact sames files but whatever one is at the top get priority and works and the 2nd one below doesn't. See he http://www.albergodelsenato.it/test2.php How can I fix this? Please help ASAP. Thanks I have read that if i have to use jquery with other libraries then i have to use jquery in no conflict mode. I understand that and and it works. i use Code: $j = jquery.noconflict() so that $ of jquery does not mix with $ of other libraries Now my question is that i use any jquery plugin , and i include that JS file Code: e,g plugin.jquery.js I am not sure whether i am correct or not i think that plugin is coded by using $ sign not the $j and i think it will conflict with other libraries. So it means i have to chnage the plugin code as well or there is no need to change plugin Can someone correct me if i am wrong The following code is needed for the prettyphoto javascript popup. It works fine in Firefox and Safari, but not in any version of IE. Can anyone suggest why? <script> jQuery.noConflict(); $(document).ready(function(){ jQuery("a[rel^='prettyPhoto']").prettyPhoto(); }); </script> I currently have to run jQuery.noConflict(); so my other scripts work correctly, examples: Code: prototype.js validation.js And i have this Code: $( document ).ready( function() {
$( window ).scroll( function( e ) {
if( $( window ).scrollTop() > 160 ) {
$( '.navigation' ).addClass( 'fixed' );
} else {
$( '.navigation' ).removeClass( 'fixed' );
}
} );
} );
witch works when i take jQuery.noConflict(); out, but with it in it dont work and thats my main feature is there anyway round it, thanks. Hello all I have been trying in vain for many days to resolve a conflict between javascript libraries. I have read far and wide and still have failed to fix this problem, most likely because my programming skills are just about copy and pasting. My homepage uses jquery horizontal css menubar + a combined mootool and prototype accordian type sliding information box in the middle of the webpage. I find that the highlighter of the css menubar does not work when prototype.js is also loaded on the same page. I have read somewhere that $ should be replaced however I have tried every possible option and none works. I have jquery loading first as it is on my template, with this <script type='text/javascript' src='../Web/Templates/jquery-1.3.2.js'></script> <script type='text/javascript' src='js/example.js'></script> And my mootool and prototype loades further below like this <script type="text/javascript" src="scripts/intro/prototype.lite.js"></script> <script type="text/javascript" src="scripts/intro/moo.fx.js"></script> <script type="text/javascript" src="scripts/intro/moo.fx.pack.js"></script> <script type="text/javascript"> function init(){ var stretchers = document.getElementsByClassName('box'); var toggles = document.getElementsByClassName('tab'); var myAccordion = new fx.Accordion( toggles, stretchers, {opacity: false, height: true, duration: 600} ); //hash functions var found = false; toggles.each(function(h3, i){ var div = Element.find(h3, 'nextSibling'); if (window.location.href.indexOf(h3.title) > 0) { myAccordion.showThisHideOpen(div); found = true; } }); if (!found) myAccordion.showThisHideOpen(stretchers[0]); } </script> Could someone please offer me further assistance and enlighten me what other information you require to assist me further. I have attached the example.js inside example.zip file if someone could kindly edit it for myself. Looking forward to your assistance. Sincerely, Lex Hi, I am trying to make the below jquery code to work, and the second click event does nothing. I understand this probably relates to the document ready section, that I am calling my form in the first click, but I am not sure the way around this. I have seen mention of using unbind, but I am not sure if it would apply in my case? My code is: Code: <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function (){
$('#submitmessage').click(function(){
$('#messageboard').load('getloadCompose.php', function (){
$.ajax{(url:'getloadMessageBoard.php', sucess:function (result){
$("txtHint").html(result){
$('#submitFirst, #submitSecond').click(function(){
var btn = $(this).attr('id');
if(btn == 'submitFirst){
file = 'insertFirst.php';
Msg = 'Your comment has been registered;
} else if(btn == 'submitSecond'){
file = 'insertSecond.php';
Msg = 'Your report has been registered;
}
var data = $('#messageboard').serialize();
$.post (file,data, function(){
alert(Msg);
$('#messageboard').each (function(){
this.reset();
});
});
return false;
});
});
});
});
});
});
</script>
<body>
<input type="button" name="submitmessage" id="sumitmessage" value="Add Message">
<div id="txtHint"></div>
And then message board is: Code: <form action="" name="messageboard" id="messageboard" method="post"> <input type="text" name="subject" id="subject" value="Subject" /> <br /> <br /> <textarea rows="5" cols="40" name="message" id="message"></textarea> <br /> <br /> <input type="button" name="submitFirst" id="submitSecond" value="Send"> <input type="button" name="subitSecond" id="submitSecond" value="Report"> <br /> </form> This isn't the final form I shall be using, hence some of the names, I stripped back the form to basics to try and get it working in principle (and failed). So what I want to happen is the visitor clicks on the Add Message button (this will be from a list of choices) and then the messageboard form is called - it works up until here - then the visitor fills out the form and decides whether the want to send or report it. It is here that nothing happens, e.g. if the visitor clicks on either the report or send button there is nothing. If I have the form directly in the first page then this all works fine, it is just when I want to have an event calling the form that it doesn't work. As a very small aside, I took this bit of code $("txtHint").html(result){ from a tutorial which originally had the code phrased as $("div").html(result){ . The problem I have is that I have a number of divs with different names, so I tried to identify my div by using it's id "txtHint", the correct page is still being called but it is not being posted inside my div txtHint, the correct way of doing this would be appreciated. Hey guys I should preface this by saying that this is not for my own site, or my own code; a friend has gone on holiday and needed this project fixing while he was away. Unfortunately my experience with jQuery is almost nil and everything was coded by someone else, so I'm really tearing my hair out. This is a Wordpress installation running Thematic with two child themes, one of which uses Ajax calls to grab page content. The issue is that the Ajaxified calls stop the swfObject content from being loaded. Compa http://dev.segolondon.com/wp292/media/ <- Flash content loads versus: http://dev.segolondon.com/wp292/#wp292/media/ If you take a look at the code of the two pages, you'll see there are no swfobject.embedSWF() calls on the Ajaxified page. It seems as though the jQuery calls are pre-empting the JS/Flash detection, so the swfObject code is never even written to the page. The actual custom, handwritten code (i.e. not from a library or a plugin) on this site is minimal, so I'm grasping at straws to fix this. I read somewhere about using a script block like this: Code: <script>
$(document).ready(
function() {
// Make the swfObject call
}
);
</script>
But I'm not really sure where to put it since there are so many plugins used, all with slightly different embed methods. Any help would be very gratefully received! hi guys i really dont understand where i am going wrong.I've read countless articles including http://blog.nemikor.com/2009/10/03/u...ons-of-jquery/ but still having trouble with multiple versions of jquery not working. either the jquery slideshow doesnt work or the jquery ie select width fix doesnt work! rrghhh Code: <head>
<link href="/css/styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/ie6pngfix/iepngfix_tilebg.js"></script><!-- ie6 png fix -->
<script type="text/javascript" src="/js/ddlevelsmenu.js"></script><!-- drop down menu js -->
<script type="text/javascript" src="/js/jquery-1.4.4.min.js"></script><!-- slideshow jquery file 1 -->
<script type="text/javascript" src="/js/slides.min.jquery.js"></script><!-- slideshow jquery file 2 -->
<!-- slideshow jquery controls -->
<script type="text/javascript">
jQuery(function () {
// Set starting slide to 1
var startSlide = 1;
// Get slide number if it exists
if (window.location.hash) {
startSlide = window.location.hash.replace('#', '');
}
// Initialize Slides
jQuery('#slides').slides({
preload: true,
preloadImage: 'img/loading.gif',
generatePagination: true,
play: 5000,
pause: 2500,
slideSpeed: 1200,
hoverPause: true,
// Get the starting slide
start: startSlide,
animationComplete: function (current) {
// Set the slide number as a hash
// window.location.hash = '#' + current;
}
});
});
</script>
<script type="text/javascript">
var jQuery_1_4_4 = $.noConflict(true);
</script>
<script type="text/javascript" src="/js/prototype.js"></script><!-- lightbox aka image viewer js file 1 -->
<script type="text/javascript" src="/js/scriptaculous.js?load=effects,builder"></script><!-- lightbox aka image viewer js file 2 -->
<script type="text/javascript" src="/js/lightbox.js"></script><!-- lightbox aka image viewer js file 3 -->
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function(jQuery) {
</script>
<script type="text/javascript" src="/js/test/jquery.1-4-2.min.js"></script>
<script type="text/javascript" src="/js/test/jquery.ie-select-width.js"></script>
<!--[if lte ie 6]>
<script type="text/javascript" src="/js/test/jquery.bgiframe.js"></script>
<![endif]-->
<script type="text/javascript">
$(function ()
{
// Set the width via the plugin.
$('select#fixed-select-no-css').ieSelectWidth
({
width : 200,
containerClassName : 'select-container',
overlayClassName : 'select-overlay'
});
// Set the width via CSS.
$('select#fixed-select-css').ieSelectWidth
({
containerClassName : 'select-container',
overlayClassName : 'select-overlay'
});
// Borders and padding etc for Internet Explorer 6/7.
$('select#select-styleable').ieSelectWidth
({
containerClassName : 'select-container',
overlayClassName : 'select-overlay'
});
});
</script>
<script type="text/javascript">
var jQuery_1_4_2 = $.noConflict(true);
</script>
<!-- Share this button script -->
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script><script type="text/javascript">stLight.options({publisher:'c0b04a1e-f627-42e8-b040-cbfb63bd9b1c'});</script>
<script type="text/javascript" src="/js/showtab.js"></script>
</head>
I've tried re ordering the scripts around but still no joy? either the slideshow works or the ie select width fix doesnt but not both at the same time? please advise Omar. I have a request for a lightbox that has the image which expands to fit the height or width, and also displays the thumbnails of the previous and next image. They want it to behave similar to this: http://www.karamann.com/#/interiors/...lakeshore/zoom Can someone point me to either a tutorial or an existing script? I've found dozens of lightboxes, but none with the thumbnails. I do have a lightbox that has static prev/next buttons. Is there any way I can have the script replace those buttons with thumbnails? Would this be the way to go? I had this filterable thing working perfectly but seem to have done something that just makes all the items flash constantly when you try and filter (click the blue section All | Illustration | Animation). Can someone take a look and help at all? http://bit.ly/4yWiDZ Hello again, just noticed that the Jquery slider I installed appears to be stopping my lightbox from working. Here's my head code: Code: <head>
<title>Design Prohibited - James Clarke</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<link rel="shortcut icon" href="favicon.ico">
<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>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn-slide").click(function(){
$("#panel").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
</script>
</head>
Is there any way I can use them both together? I'm using this Lightbox plugin with jQuery and wanted to know if there's a way to place a link inside the lightbox caption or anywhere inside. Or is there another lightbox plugin that can do this?
Hi everybody I have a problem I want a beautiful accordion header on my website and use pirobox that is a lightbox version. I had this problem before but then u used a slideshow instead of this accordion header. If I use this code: only the accordion works Code: <script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/pirobox.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$().piroBox({
my_speed: 300, //animation speed
bg_alpha: 0.5, //background opacity
slideShow : 'true', // true == slideshow on, false == slideshow off
slideSpeed : 3, //slideshow
close_all : '.piro_close' // add class .piro_overlay(with comma)if you want overlay click close piroBox
});
});
</script>
<script language="javascript" type="text/javascript" src="js/mootools.js"></script>
<script language="javascript" type="text/javascript" src="js/script.js"></script>
but if I change the order like this: only the pirobox works Code: <script language="javascript" type="text/javascript" src="js/mootools.js"></script>
<script language="javascript" type="text/javascript" src="js/script.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/pirobox.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$().piroBox({
my_speed: 300, //animation speed
bg_alpha: 0.5, //background opacity
slideShow : 'true', // true == slideshow on, false == slideshow off
slideSpeed : 3, //slideshow
close_all : '.piro_close' // add class .piro_overlay(with comma)if you want overlay click close piroBox
});
});
</script>
Then in the demo version there is this code: Code: <script type="text/javascript">
new LofmCordion( {wapperSelector: $E('#lof-cordion-1 .lof-cordion-wapper') } );
</script>
I don't know where to use it. In the demo version it's in the end, but I tried that and it still didn't work. I also used it immidiately after: Code: <script language="javascript" type="text/javascript" src="js/mootools.js"></script> <script language="javascript" type="text/javascript" src="js/script.js"></script> But it still doesn't work.. Please help me I'm kinda new to javascript and I really want to know how to solve this! thanks So, i have this code which retrieves php files for me using jquery and id love to get it working with Jquery history plugin. I tried modifying the code i got from the ajax demo to work for me, but i just couldnt do it as i do not know any javascript really.. ( actually what i tried was simply to change "#ajax-links a" to "#menu li a" and .html to .php ..but nothing.. :rolleyes: Id be very gratefull if someone would help me out with this one. All related code can be found bellow (the ones that should be needed anyways): This is the code that retrieves php files inside "#content" when item from "#menu li a" with the specified id is clicked Code: $(document).ready(function(){
//References
var change = $("#menu li a");
var loading = $("#loading");
var content = $("#content");
//Manage click events
change.click(function(){
//show the loading bar
showLoading();
//load selected section
if(this.id == "home")
{
change.load(this.className='current-page');
content.slideUp();
content.load("pages/index.php", hideLoading);
content.slideDown();
}
else if(this.id == "secondpage")
{
change.load(this.className='current-page');
content.slideUp();
content.load("pages/secondpage.php", hideLoading);
content.slideDown();
}
else
{
//hide loading bar if there is no selected section
hideLoading();
}
});
//show loading bar
function showLoading(){
loading
.css({visibility:"visible"})
.css({opacity:"1"})
.css({display:"block"})
;
}
//hide loading bar
function hideLoading(){
loading.fadeTo(1000, 0);
};
});
Heres the structure of the menu/content Code: <ul id="menu"> <li><a id="home" class="normal" href="#Home"></a></li> <li><a id="secondpage" class="normal" href="#Secondpage"></a></li> </ul> <div id="content"> <ul id="sec-menu"> <li><a id="link1" class="normal" href="#">Link1</a></li> <li><a id="link2" class="normal" href="#">Link2</a></li> </ul> </div> Heres the code that jquery history plugin uses in demo for ajax Code: jQuery(document).ready(function($) {
function load(num) {
$('#content').load(num +".html");
}
$.history.init(function(url) {
load(url == "" ? "1" : url);
});
$('#ajax-links a').live('click', function(e) {
var url = $(this).attr('href');
url = url.replace(/^.*#/, '');
$.history.load(url);
return false;
});
});
|
|||||||