Resolved Content Glider and Lighbox Conflict

Content Glider and Lighbox Conflict

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> <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> </div>  <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> </div> </div> </div> </div> </body> </html>

Any help would be greatly appreciated

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.

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!

1 Attachment(s)

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.

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

Quote:

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.

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.

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.

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.

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.

I did mention the z-index issue and another way of dealing with it. Glad things are working for you!

I'm having problems I have a version of lightbox and accordion running the lightbox works but the accordion is playing up.

the page I have it running on is http://www.cyvestia.com/_projects/_pr1

I don't have much experience with this script can anyone tell me how to get them both running please

Quote:

Originally Posted by jscheuer1

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!

@jscheuer1 Thanks a lot buddy you have solved my problem... your solution work perfectly :)

Sandy

Thanks for the help, but something is still not working for me. i can get one of the elements to work.

well original code

featuredcontentglider.js

PHP Code:

var featuredcontentglider={ csszindex: 100, ajaxloadingmsg: '<b>Fetching Content. Please wait...</b>', glide:function(config, showpage, isprev){ var selected=parseInt(showpage) if (selected>=config.$contentdivs.length){ //if no content exists at this index position alert("No content exists at page "+(selected+1)+"! Loading 1st page instead.") selected=0 } var $target=config.$contentdivs.eq(selected) //Test for toggler not being initialized yet, or user clicks on the currently selected page): for (var i=0; i<config.$togglerdivs.length; i++){ if (config.$togglerdivs[i].attr('lastselected')==null || parseInt(config.$togglerdivs[i].attr('lastselected'))!=selected){ var $selectedlink=config.$toc[i].eq(selected) config.$next[i].attr('loadpage', (selected<config.$contentdivs.length-1)? selected+1+'pg' : 0+'pg') config.$prev[i].attr('loadpage', (selected==0)? config.$contentdivs.length-1+'pg' : selected-1+'pg') var startpoint=(isprev=="previous")? -config.startpoint : config.startpoint $target.css(config.leftortop, startpoint).css("zIndex", this.csszindex++) //hide content so it's just out of view before animating it var endpoint=(config.leftortop=="left")? {left:0} : {top:0} //animate it into view $target.animate(endpoint, config.speed) config.$toc[i].removeClass('selected') $selectedlink.addClass('selected') config.$togglerdivs[i].attr('lastselected', selected+'pg') } } }, getremotecontent:function(config){ config.$glider.html(this.ajaxloadingmsg) $.ajax({ url: config.remotecontent, error:function(ajaxrequest){ config.$glider.html('Error fetching content.<br />Server Response: '+ajaxrequest.responseText) }, success:function(content){ config.$glider.html(content) featuredcontentglider.setuptoggler(config) } }) }, aligncontents:function(config){ config.$contentdivs=$("#"+config.gliderid+" ."+config.contentclass) config.$contentdivs.css(config.leftortop, config.startpoint).css({height: config.$glider.height(), visibility: 'visible'}) //position content divs so they're out of view: }, setuptoggler:function(config){ this.aligncontents(config) for (var i=0; i<config.$togglerdivs.length; i++){ config.$togglerdivs[i].hide() config.$toc[i].each(function(index){ $(this).attr('pagenumber', index+'pg') if (index > (config.$contentdivs.length-1)) $(this).css({display: 'none'}) //hide redundant "toc" links }) var $nextandprev=$("#"+config.togglerids[i]+" .next, #"+config.togglerids[i]+" .prev") $nextandprev.click(function(event){ //Assign click behavior to 'next' and 'prev' links featuredcontentglider.glide(config, this.getAttribute('loadpage'), this.getAttribute('buttontype')) event.preventDefault() //cancel default link action }) config.$toc[i].click(function(event){ //Assign click behavior to 'toc' links featuredcontentglider.glide(config, this.getAttribute('pagenumber')) event.preventDefault() }) if (i==0){ config.$togglerdivs[i].fadeIn(1000, function(){ featuredcontentglider.glide(config, config.selected) if (config.autorotate==true){ //auto rotate contents? config.stepcount=0 //set steps taken config.totalsteps=config.$contentdivs.length*config.autorotateconfig[1] //Total steps limit: num of contents x num of user specified cycles) featuredcontentglider.autorotate(config) } }) } else{ config.$togglerdivs[i].fadeIn(1000) } config.$togglerdivs[i].click(function(){ featuredcontentglider.cancelautorotate(window[config.togglerids[0]+"timer"]) }) } }, autorotate:function(config){ var rotatespeed=config.speed+config.autorotateconfig[0] window[config.togglerids[0]+"timer"]=setInterval(function(){ if (config.totalsteps>0 && config.stepcount>=config.totalsteps){ clearInterval(window[config.togglerids[0]+"timer"]) } else{ config.$next[0].click() config.stepcount++ } }, rotatespeed) }, cancelautorotate:function(timerid){ clearInterval(timerid) }, getCookie:function(Name){ var re=new RegExp(Name+"=[^;]+", "i") //construct RE to search for target name/value pair if (document.cookie.match(re)) //if cookie found return document.cookie.match(re)[0].split("=")[1] //return its value return null }, setCookie:function(name, value){ document.cookie = name+"="+value }, init:function(config){ $(document).ready(function(){ config.$glider=$("#"+config.gliderid) config.$togglerdivs=[], config.$toc=[], config.$next=[], config.$prev=[] for (var i=0; i<config.togglerids.length; i++){ config.$togglerdivs.push($("#"+config.togglerids[i])) config.$toc.push(config.$togglerdivs[i].children('.toc')) config.$next.push(config.$togglerdivs[i].children('.next')) config.$prev.push(config.$togglerdivs[i].children('.prev')) config.$prev[i].attr('buttontype', 'previous') } var selected=(config.persiststate)? featuredcontentglider.getCookie(config.gliderid) : config.selected config.selected=(isNaN(parseInt(selected))) ? config.selected : selected //test for cookie value containing null (1st page load) or "undefined" string config.leftortop=(/up/i.test(config.direction))? "top" : "left" //set which CSS property to manipulate based on "direction" config.heightorwidth=(/up/i.test(config.direction))? config.$glider.height() : config.$glider.width() //Get glider height or width based on "direction" config.startpoint=(/^(left|up)/i.test(config.direction))? -config.heightorwidth : config.heightorwidth //set initial position of contents based on "direction" if (typeof config.remotecontent!="undefined" && config.remotecontent.length>0) featuredcontentglider.getremotecontent(config) else featuredcontentglider.setuptoggler(config) $(window).bind('unload', function(){ //clean up and persist if (config.persiststate) featuredcontentglider.setCookie(config.gliderid, config.$togglerdivs[0].attr('lastselected')) config=null }) }) } }

HTML PAGE

PHP Code:

<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"> </script> <script type="text/javascript"> featuredcontentglider.init({ gliderid: "products", //ID of main glider container contentclass: "glidecontent", //Shared CSS class name of each glider content togglerids: ["p-select", "p-select2", "p-select3"], //ID of toggler container remotecontent: "", //Get gliding contents from external file on server? "filename" or "" to disable 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: "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>

Updated code
featuredcontentglider.js

PHP Code:

// NEW CODE START jQuery.noConflict(); // This line commented makes the slider work, UNCOMMETED makes the images work // Put all your code in your document ready area jQuery(document).ready(function($){ // NEW CODE END //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 //Updated (Feb 12th, 08): Added ability to retrieve gliding contents from an external file using Ajax ("remotecontent" variable added to configuration) //Oct 6th, 08: Custom mod to support multiple pagination DIVs: http://www.dynamicdrive.com/forums/showthread.php?t=37083 var featuredcontentglider={ csszindex: 100, ajaxloadingmsg: '<b>Fetching Content. Please wait...</b>', glide:function(config, showpage, isprev){ var selected=parseInt(showpage) if (selected>=config.$contentdivs.length){ //if no content exists at this index position alert("No content exists at page "+(selected+1)+"! Loading 1st page instead.") selected=0 } var $target=config.$contentdivs.eq(selected) //Test for toggler not being initialized yet, or user clicks on the currently selected page): for (var i=0; i<config.$togglerdivs.length; i++){ if (config.$togglerdivs[i].attr('lastselected')==null || parseInt(config.$togglerdivs[i].attr('lastselected'))!=selected){ var $selectedlink=config.$toc[i].eq(selected) config.$next[i].attr('loadpage', (selected<config.$contentdivs.length-1)? selected+1+'pg' : 0+'pg') config.$prev[i].attr('loadpage', (selected==0)? config.$contentdivs.length-1+'pg' : selected-1+'pg') var startpoint=(isprev=="previous")? -config.startpoint : config.startpoint $target.css(config.leftortop, startpoint).css("zIndex", this.csszindex++) //hide content so it's just out of view before animating it var endpoint=(config.leftortop=="left")? {left:0} : {top:0} //animate it into view $target.animate(endpoint, config.speed) config.$toc[i].removeClass('selected') $selectedlink.addClass('selected') config.$togglerdivs[i].attr('lastselected', selected+'pg') } } }, getremotecontent:function(config){ config.$glider.html(this.ajaxloadingmsg) $.ajax({ url: config.remotecontent, error:function(ajaxrequest){ config.$glider.html('Error fetching content.<br />Server Response: '+ajaxrequest.responseText) }, success:function(content){ config.$glider.html(content) featuredcontentglider.setuptoggler(config) } }) }, aligncontents:function(config){ config.$contentdivs=$("#"+config.gliderid+" ."+config.contentclass) config.$contentdivs.css(config.leftortop, config.startpoint).css({height: config.$glider.height(), visibility: 'visible'}) //position content divs so they're out of view: }, setuptoggler:function(config){ this.aligncontents(config) for (var i=0; i<config.$togglerdivs.length; i++){ config.$togglerdivs[i].hide() config.$toc[i].each(function(index){ $(this).attr('pagenumber', index+'pg') if (index > (config.$contentdivs.length-1)) $(this).css({display: 'none'}) //hide redundant "toc" links }) var $nextandprev=$("#"+config.togglerids[i]+" .next, #"+config.togglerids[i]+" .prev") $nextandprev.click(function(event){ //Assign click behavior to 'next' and 'prev' links featuredcontentglider.glide(config, this.getAttribute('loadpage'), this.getAttribute('buttontype')) event.preventDefault() //cancel default link action }) config.$toc[i].click(function(event){ //Assign click behavior to 'toc' links featuredcontentglider.glide(config, this.getAttribute('pagenumber')) event.preventDefault() }) if (i==0){ config.$togglerdivs[i].fadeIn(1000, function(){ featuredcontentglider.glide(config, config.selected) if (config.autorotate==true){ //auto rotate contents? config.stepcount=0 //set steps taken config.totalsteps=config.$contentdivs.length*config.autorotateconfig[1] //Total steps limit: num of contents x num of user specified cycles) featuredcontentglider.autorotate(config) } }) } else{ config.$togglerdivs[i].fadeIn(1000) } config.$togglerdivs[i].click(function(){ featuredcontentglider.cancelautorotate(window[config.togglerids[0]+"timer"]) }) } }, autorotate:function(config){ var rotatespeed=config.speed+config.autorotateconfig[0] window[config.togglerids[0]+"timer"]=setInterval(function(){ if (config.totalsteps>0 && config.stepcount>=config.totalsteps){ clearInterval(window[config.togglerids[0]+"timer"]) } else{ config.$next[0].click() config.stepcount++ } }, rotatespeed) }, cancelautorotate:function(timerid){ clearInterval(timerid) }, getCookie:function(Name){ var re=new RegExp(Name+"=[^;]+", "i") //construct RE to search for target name/value pair if (document.cookie.match(re)) //if cookie found return document.cookie.match(re)[0].split("=")[1] //return its value return null }, setCookie:function(name, value){ document.cookie = name+"="+value }, init:function(config){ $(document).ready(function(){ config.$glider=$("#"+config.gliderid) config.$togglerdivs=[], config.$toc=[], config.$next=[], config.$prev=[] for (var i=0; i<config.togglerids.length; i++){ config.$togglerdivs.push($("#"+config.togglerids[i])) config.$toc.push(config.$togglerdivs[i].children('.toc')) config.$next.push(config.$togglerdivs[i].children('.next')) config.$prev.push(config.$togglerdivs[i].children('.prev')) config.$prev[i].attr('buttontype', 'previous') } var selected=(config.persiststate)? featuredcontentglider.getCookie(config.gliderid) : config.selected config.selected=(isNaN(parseInt(selected))) ? config.selected : selected //test for cookie value containing null (1st page load) or "undefined" string config.leftortop=(/up/i.test(config.direction))? "top" : "left" //set which CSS property to manipulate based on "direction" config.heightorwidth=(/up/i.test(config.direction))? config.$glider.height() : config.$glider.width() //Get glider height or width based on "direction" config.startpoint=(/^(left|up)/i.test(config.direction))? -config.heightorwidth : config.heightorwidth //set initial position of contents based on "direction" if (typeof config.remotecontent!="undefined" && config.remotecontent.length>0) featuredcontentglider.getremotecontent(config) else featuredcontentglider.setuptoggler(config) $(window).bind('unload', function(){ //clean up and persist if (config.persiststate) featuredcontentglider.setCookie(config.gliderid, config.$togglerdivs[0].attr('lastselected')) config=null }) }) } }

HTML CODE

PHP Code:

<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"> </script> <script type="text/javascript"> featuredcontentglider.init({ gliderid: "products", //ID of main glider container contentclass: "glidecontent", //Shared CSS class name of each glider content togglerids: ["p-select", "p-select2", "p-select3"], //ID of toggler container remotecontent: "", //Get gliding contents from external file on server? "filename" or "" to disable 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: "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>

But the slider stops working