Conveyor Belt Slideshow Script + Lightbox [Archive]

View Full Version : Conveyor Belt Slideshow Script + Lightbox

ninjadan9

12-09-2011, 08:36 PM

Hello,

I am using the conveyor belt slideshow script (http://www.dynamicdrive.com/dynamicindex14/leftrightslide.htm) and need help making lightbox 2 work with it. Lightbox seems to not work with the slideshow script or is conflicting with another script.

header.php

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

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


<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>

slideshow.js (The main slideshow script)

/***********************************************
* Conveyor belt slideshow script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

//Specify the slider's width (in pixels)
var sliderwidth1="950px"
//Specify the slider's height
var sliderheight1="134px"
//Specify the slider's slide speed (larger is faster 1-10)
var slidespeed1=3
//configure background color:
slidebgcolor1=""

//Specify the slider's images
var leftrightslide1=new Array()
var finalslide1=''
leftrightslide1[0]='<a href="images/img.jpg" rel="lightbox"><img src="images/img.jpg" border=1></a>'
leftrightslide1[1] = '<a href="images/pic1.jpg" rel="lightbox"><img src="images/pic1.jpg" border=1></a>'
leftrightslide1[2] = '<a href="images/pic2.jpg" rel="lightbox"><img src="images/pic2.jpg" border=1></a>'
leftrightslide1[3] = '<a href="images/pic3.jpg" rel="lightbox"><img src="images/pic3.jpg" border=1></a>'

//Specify gap between each image (use HTML):
var imagegap1=" "

//Specify pixels gap between each slideshow rotation (use integer):
var slideshowgap1=5

////NO NEED TO EDIT BELOW THIS LINE////////////

var copyspeed1=slidespeed1
leftrightslide1='<nobr>'+leftrightslide1.join(imagegap1)+'</nobr>'
var iedom1=document.all||document.getElementById
if (iedom1)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+leftrightslide1+'</span>')
var actualwidth1=''
var cross_slide1, ns_slide1

function fillup1(){
if (iedom1){
cross_slide1=document.getElementById? document.getElementById("test2") : document.all.test2
cross_slide12=document.getElementById? document.getElementById("test3") : document.all.test3
cross_slide1.innerHTML=cross_slide12.innerHTML=leftrightslide1
actualwidth1=document.all? cross_slide1.offsetWidth : document.getElementById("temp").offsetWidth
cross_slide12.style.left=actualwidth1+slideshowgap1+"px"
}
else if (document.layers){
ns_slide1=document.ns_slide1menu.document.ns_slide1menu2
ns_slide12=document.ns_slide1menu.document.ns_slide1menu3
ns_slide1.document.write(leftrightslide1)
ns_slide1.document.close()
actualwidth1=ns_slide1.document.width
ns_slide12.left=actualwidth1+slideshowgap1
ns_slide12.document.write(leftrightslide1)
ns_slide12.document.close()
}
lefttime1=setInterval("slideleft1()",30)
}
window.onload=fillup1

function slideleft1(){
if (iedom1){
if (parseInt(cross_slide1.style.left)>(actualwidth1*(-1)+8))
cross_slide1.style.left=parseInt(cross_slide1.style.left)-copyspeed1+"px"
else
cross_slide1.style.left=parseInt(cross_slide12.style.left)+actualwidth1+slideshowgap1+"px"

if (parseInt(cross_slide12.style.left)>(actualwidth1*(-1)+8))
cross_slide12.style.left=parseInt(cross_slide12.style.left)-copyspeed1+"px"
else
cross_slide12.style.left=parseInt(cross_slide1.style.left)+actualwidth1+slideshowgap1+"px"

}
else if (document.layers){
if (ns_slide1.left>(actualwidth1*(-1)+8))
ns_slide1.left-=copyspeed1
else
ns_slide1.left=ns_slide12.left+actualwidth1+slideshowgap1

if (ns_slide12.left>(actualwidth1*(-1)+8))
ns_slide12.left-=copyspeed1
else
ns_slide12.left=ns_slide1.left+actualwidth1+slideshowgap1
}
}

if (iedom1||document.layers){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0" style="position:relative; top:175px;"><td>')
if (iedom1){
write('<div style="position:relative;width:'+sliderwidth1+';height:'+sliderheight1+';overflow:hidden">')
write('<div style="position:absolute;width:'+sliderwidth1+';height:'+sliderheight1+';background-color:'+slidebgcolor1+'" onMouseover="copyspeed1=0" onMouseout="copyspeed1=slidespeed1">')
write('<div id="test2" style="position:absolute;left:0px;top:0px"></div>')
write('<div id="test3" style="position:absolute;left:-1000px;top:0px"></div>')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width='+sliderwidth1+' height='+sliderheight1+' name="ns_slide1menu" bgColor='+slidebgcolor1+'>')
write('<layer name="ns_slide1menu2" left=0 top=0 onMouseover="copyspeed1=0" onMouseout="copyspeed1=slidespeed1"></layer>')
write('<layer name="ns_slide1menu3" left=0 top=0 onMouseover="copyspeed1=0" onMouseout="copyspeed1=slidespeed1"></layer>')
write('</ilayer>')
}
document.write('</td></table>')
}
}

aboutus.php

<!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>
<title></title>
<?php require_once 'sections/header.php'; ?>
</head>

<body id="page4">
<script type="text/javascript">
function toggleMe(a) {
var e = document.getElementById(a);
if (!e) return true;
if (e.style.display == "none") {
e.style.display = "block"
} else {
e.style.display = "none"
}
return true;
}
</script>
<div class="tail-top">
<div class="main-bg">
<div id="main">

<div id="header">

<div class="logo">
<a href="index.html"><img src="images/logo.png" alt="" /></a>
</div>


<div class="slogan">
<img src="images/slogan.png" alt="" />
</div>

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

Any suggestions?

The script in action - http://danielaharris.com/VN2/aboutus.php

jscheuer1

12-10-2011, 04:34 AM

.

Your page is in violation of Dynamic Drive's usage terms (http://www.dynamicdrive.com/notice.htm), which, among other things, state that the script credit must appear in the source code of the page(s) using the script. Please reinstate the notice first.

That said, that's not at all how I would go about getting a Lightbox effect with an image marquee on that page. But rather than step too deeply into that bucket, you can get it to work by moving the jQuery code above the Prototype/Scriptaculous/Lightbox code and putting jQuery into noConflict mode. This may or may not be difficult to arrange due to the apparent use of PHP includes. But essentially you need to change this:

<!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>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />



<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

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






<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 src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="js/cufon-yui.js" type="text/javascript"></script>
<script src="js/cufon-replace.js" type="text/javascript"></script>
<script src="js/Myriad_Pro_400.font.js" type="text/javascript"></script>
<script src="js/Myriad_Pro_Cond_400.font.js" type="text/javascript"></script>
</head>

to this:

<!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>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />



<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

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






<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="js/cufon-yui.js" type="text/javascript"></script>
<script src="js/cufon-replace.js" type="text/javascript"></script>
<script src="js/Myriad_Pro_400.font.js" type="text/javascript"></script>
<script src="js/Myriad_Pro_Cond_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery.noConflict();
</script>

<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>
</head>

ninjadan9

12-10-2011, 06:31 PM

Thanks that fixed the problem.