Content Glider and Lighbox Conflict

**jscheuer1** · 02-11-2008, 05:40 PM

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

**listey** · 12-07-2008, 05:21 PM

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

**sandykadam** · 06-24-2009, 07:27 AM

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

**Moises** · 08-14-2009, 09:05 PM

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>

**Moises** · 08-14-2009, 09:07 PM

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

Thread: Content Glider and Lighbox Conflict

Thread Tools

Search Thread

Bookmarks

Bookmarks

Posting Permissions