Content Glider and Lighbox Conflict

**modermo** · 02-11-2008, 12:31 AM

1) Script Title:
Featured Content Glider
2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...tentglider.htm
3) Describe problem:
Hi

I have a little problem.

I have two major pieces of javascript. There is the feature content glider and lightbox.

Now, when I place the 3 lightbox javascripts files AFTER the feature content glider in the <head>, lightbox works, but feature content glider doesnt.

The same is vice versa. When lightbox comes first, then feature content glider, feauture content glider works, but lightbox doesnt.

Here is the code::

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>Black</title>
	
	<link type="text/css" rel="stylesheet" href="global.css" media="screen">
	<link rel="stylesheet" type="text/css" href="scripts/featuredcontentglider.css" />
	<link rel="stylesheet" href="scripts/lightbox.css" type="text/css" media="screen" />

	<script type="text/javascript" src="scripts/prototype.js"></script>
	<script type="text/javascript" src="scripts/scriptaculous.js?load=effects"></script>
	<script type="text/javascript" src="scripts/lightbox.js"></script>
	
	<script type="text/javascript" src="scripts/jquery-1.2.2.pack.js"></script>
	<script type="text/javascript" src="scripts/featuredcontentglider.js">
	/***********************************************
	* Featured Content Glider script- (c) Dynamic Drive DHTML code library ([url]www.dynamicdrive.com[/url])
	* Visit [url]http://www.dynamicDrive.com[/url] for hundreds of DHTML scripts
	* This notice must stay intact for legal use
	***********************************************/
	</script>

</head>

<body>

	<div id="container">
		
		<div id="stage">
			
			<div id="header">
				<h1>Black</h1>
				<h2>Design</h2>
			</div>
		
			<div id = "nav">
				<ul>
					<li><h3><a href="about_us.html">about us</a></h3></li>
					<li><h3><a href="portfolio.html">portfolio</a></h3></li>
					<li><h3><a href="process.html">process</a></h3></li>
					<li><h3><a href="contact_us.html">contact us</a></h3></li>
				</ul>
			</div>
		
			<div id = "content">
				
				<div id="web_col">
					
					<div id="po_writing">
					
					<h4 id="writing_heading">po</h4>
					
					<h4><a href="web.html" id="selected">web </a>::<a href="design.html"> brand</a> ::<a href="test.html"> test</a></h4>
					
					<script type="text/javascript">

					featuredcontentglider.init({
					gliderid: "portfolio_web_container", //ID of main glider container
					contentclass: "client", //Shared CSS class name of each glider content
					togglerid: "web_client_chooser", //ID of toggler container
					selected: 0, //Default selected content index (0=1st)
					persiststate: false, //Remember last content shown within browser session (true/false)?
					speed: 700, //Glide animation duration (in milliseconds)
					direction: "rightleft", //set direction of glide: "updown", "downup", "leftright", or "rightleft"
					autorotate: false, //Auto rotate contents (true/false)?
					autorotateconfig: [3000, 2] //if auto rotate enabled, set [milliseconds_btw_rotations, cycles_before_stopping]
					})

					</script>
						
					<div id="portfolio_web_container" class="portfolio_web">	
						
						<div class="client">
							<h5 class="h5_client">Blackmint Web Design &amp Development Scene</h5>
							<p>Everyone bang bang</p>
							<div id="client_images">
							</div>
							
						</div><!---ends glidecontent-->
					
						<div class="client">
							<h5 class="h5_client">Client 1 --- DMW's Dynamic Profiling</h5>
							<p>Dynamic</p>
								<div id="client_images">
									<a href="images/dmw_but_1c.jpg" rel="lightbox[dmw_images]"><img src="images/dmw_but_1.jpg"/></a>
									<a href="images/dmw_but_1c.jpg" rel="lightbox[dmw_images]"><img src="images/dmw_but_1.jpg"/></a>
									<a href="images/dmw_but_1c.jpg" rel="lightbox[dmw_images]"><img src="images/dmw_but_1.jpg"/></a>
									<a href="images/dmw_but_1c.jpg" rel="lightbox[dmw_images]"><img src="images/dmw_but_1.jpg"/></a>
									<h4><a href="http://dy.com.au">:::::::::Visit Site:::::::::</a>
								</div>
						</div><!---ends "glidecontent"-->
					
					</div> <!--ends "canada provinces"-->
					
					<div id="web_client_chooser" class="web_client_nav">
					<a href="#" class="prev">Prev</a> 
					<a href="#" class="toc">'web' intro</a> <a href="#" class="toc">client 1</a>
					<a href="#" class="next">Next</a>
					
					</div><!--ends "portfolio_writing"-->
				
				</div><!--ends "right_col"-->
		
			</div><!--"ends content"-->
			
		</div><!--ends "stage"-->
		
	</div><!--ends "container"-->

</body>
</html>

Any help would be greatly appreciated

**jscheuer1** · 02-11-2008, 03:57 AM

It will be difficult to get those two working together, far beyond the scope of this forum. You see, ordinarily it is just a minor conflict between both scripts needing the same event handler and/or having a variable or two in common but defined differently. These two scripts rely upon two completely different frameworks (prototype and jquery) that need to define a host of functions from a primary object or function and both of them want to use the same name for it. You would have to change the name in one of them, but then trace through all the internal and external code dependant upon that one to change all references to it in that code, while at the same time making sure you didn't pick another name that would conflict with it or the other framework. I'm getting tired just thinking about it.

You might do a search on getting prototype and jquery working together.

One possibility might be to use lytebox:

http://www.dolem.com/lytebox/

instead. It can be placed on an external page and show through onto your current page via an iframe. It may still conflict with jquery because it needs to access the top page, but since the script goes on the external page, it would be less likely to conflict.

**jscheuer1** · 02-11-2008, 06:24 AM

I actually figured out a way to work these two scripts together. First you need to add this (highlighted) before the code in featuredcontentglider.js:

Code:

     jQuery.noConflict();
     
     // Put all your code in your document ready area
     jQuery(document).ready(function($){

//Featured Content Glider: By http://www.dynamicdrive.com
//Created: Dec 22nd, 07'
//Updated (Jan 29th, 08): Added four possible slide directions: "updown", "downup", "leftright", or "rightleft"
//Updated (Feb 1st, 08): Changed glide behavior to reverse direction when previous button is clicked

var featuredcontentglider={
	csszindex: 100,
	glide:function(config, showpage, isprev){
		var selected=pars . . .

Next you need to remove the script code from Step 2 of the glider, the part that goes on the page (from the demo):

Code:

<script type="text/javascript">

featuredcontentglider.init({
	gliderid: "canadaprovinces", //ID of main glider container
	contentclass: "glidecontent", //Shared CSS class name of each glider content
	togglerid: "p-select", //ID of toggler container
	selected: 0, //Default selected content index (0=1st)
	persiststate: false, //Remember last content shown within browser session (true/false)?
	speed: 500, //Glide animation duration (in milliseconds)
	direction: "downup", //set direction of glide: "updown", "downup", "leftright", or "rightleft"
	autorotate: true, //Auto rotate contents (true/false)?
	autorotateconfig: [3000, 2] //if auto rotate enabled, set [milliseconds_btw_rotations, cycles_before_stopping]
})

</script>

Place its code section only (minus the script tags) at the end of featuredcontentglider.js:

Code:

				. . . config.$prev.unbind('click')
				if (config.persiststate)
					featuredcontentglider.setCookie(config.gliderid, config.$togglerdiv.attr('lastselected'))
				config=null
				
			})
		})
	}
}

featuredcontentglider.init({
	gliderid: "canadaprovinces", //ID of main glider container
	contentclass: "glidecontent", //Shared CSS class name of each glider content
	togglerid: "p-select", //ID of toggler container
	selected: 0, //Default selected content index (0=1st)
	persiststate: false, //Remember last content shown within browser session (true/false)?
	speed: 500, //Glide animation duration (in milliseconds)
	direction: "downup", //set direction of glide: "updown", "downup", "leftright", or "rightleft"
	autorotate: true, //Auto rotate contents (true/false)?
	autorotateconfig: [3000, 2] //if auto rotate enabled, set [milliseconds_btw_rotations, cycles_before_stopping]
})

and add:

Code:

});

after that. Now you are ready to go. Install the scripts and styles in the head of your page:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="jquery-1.2.2.pack.js"></script>

<link rel="stylesheet" type="text/css" href="featuredcontentglider.css" />

<script type="text/javascript" src="featuredcontentglider.js">

/***********************************************
* Featured Content Glider script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

</script>
</head>

You can use the remainder of the Step 2 body code (just the HTML part) for the glider in the body and add lightbox links wherever you like in it or elsewhere on the page.

Only one thing left to do, in lightbox.css find all 3 references to z-index and increase them all by a factor of 100 (add two zeroes to the end). Like add (red):

Code:

#lightbox{
	position: absolute;
	left: 0;
	width: 100%;
	z-index: 10000;
	text-align: center;
	line-height: 0;
	}

That's only required for some browsers, but will not hurt those that don't need it, make sure to do this in all three places that z-index is mentioned in that file. That's it!

**ddadmin** · 02-11-2008, 06:41 AM

Actually, in this case, as far as I can tell, the lone conflict exists with both scripts using the function "$" in different context. Try replacing the original featuredcontentglider.js file with the modified instead, which renames "$" to "j$", hence avoiding the clash.

**ddadmin** · 02-11-2008, 06:42 AM

Damn you beat me to the solution John (once again!)

I see you're using a different approach from mine though. I just did a search and replace of "$" in featuredcontentglider.js

**jscheuer1** · 02-11-2008, 06:52 AM

Originally Posted by ddadmin

Damn you beat me to the solution John (once again!)

I see you're using a different approach from mine though. I just did a search and replace of "$" in featuredcontentglider.js

I just tried your method DD and though it looks very promising (I copied your modified script), either you missed a $ or got one that shouldn't have been changed, or something else messes it up. My method works as outlined. Oh, I may have missed something in the implementation of your idea as well, but I did put the script section for the page back and used your script for the main one.

Edit: Ah, I think I see the problem, even with the substitution, you still need to close at the end of the modified script, which probably also means that you would need to move the body code over as I did. That being the case, my solution would be easier.

**ddadmin** · 02-11-2008, 07:01 AM

Weird, my code works for me as is (IE7 and FF2). How are you testing the two scripts out? I'm using the zip file for Lightbox, opening up index.html and smacking the Content Glider script into it.

**jscheuer1** · 02-11-2008, 07:11 AM

I worked the other way. I set up glider as per instructions and added lightbox to it, then made the modifications as mentioned for my method. I cannot get your version of the glider script to work with it. I'll give it a few more tries, and perhaps later do it the way that you outline - starting from lightbox. How did you have the script links ordered in the head of the page?

Edit: Ah, I must have missed something, it's working now with your script. You still need to update the z-index values in lightbox.css for Opera though. All in all though, your method is far easier.

**ddadmin** · 02-11-2008, 07:21 AM

Cool. I didn't see why it wouldn't work, since basically that method just tells jQuery to relinquish control of $ and use a user defined variable instead as substitute. However you slice it though, I see your point about conflicts like this being one of the pitfalls of JS frameworks. I suspect we're about to enter another era of "script conflict" type questions, the last one being about JavaScript event handlers.

**modermo** · 02-11-2008, 08:55 AM

Hey

Thankyou so much. I really really appreciate that.

Although just to let you know, with the solution you gave me, it works, except that the feature content glider appears ON TOP of the lightbox image that opens up.

There is a simple fix to this. Give the main content glider (the main div that hold the slider divs) a:
z-index:1;

Thanks again guys much appreciated. Alot. You dont have to give up your time to help out but you do, and all the amateur coders really value that.

Thread: Content Glider and Lighbox Conflict

Thread Tools

Search Thread

Content Glider and Lighbox Conflict

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions