CSS Codes
CSS Layouts
Results 1 to 3 of 3

Thread: Conveyor Belt Slideshow Script + Lightbox

  1. 12-09-2011, 08:36 PM #1
    ninjadan9
    ninjadan9 is offline New Comer (less than 5 posts)
    Join Date
    Dec 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Conveyor Belt Slideshow Script + Lightbox

    Hello,

    I am using the conveyor belt slideshow script (http://www.dynamicdrive.com/dynamici...rightslide.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

    HTML Code:
    <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" />
<!--[if lt IE 7]>
	<link href="css/ie_style.css" rel="stylesheet" type="text/css" />
<![endif]-->


<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)
    Code:
    /***********************************************
* 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
    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>
<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">
        <!-- header -->
        <div id="header">
          <!-- .logo -->
          <div class="logo">
          	<a href="index.html"><img src="images/logo.png" alt="" /></a>
          </div>
          <!-- /.logo -->
          <!-- .slogan -->
          <div class="slogan">
          	<img src="images/slogan.png" alt="" />
          </div>
          <!-- /.slogan -->
		  <script src="js/slideshow.js" type="text/javascript"></script>
    Any suggestions?

    The script in action - http://danielaharris.com/VN2/aboutus.php
    Last edited by ninjadan9; 12-09-2011 at 08:48 PM.
    Reply With Quote Reply With Quote
  2. 12-10-2011, 04:34 AM #2
    jscheuer1's Avatar
    jscheuer1
    jscheuer1 is offline Global Moderator
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    .

    Your page is in violation of Dynamic Drive's usage terms, 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:

    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>
<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" type="text/css" href="css/anylinkmenu.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" />
<!--[if lt IE 7]>
	<link href="css/ie_style.css" rel="stylesheet" type="text/css" />
<![endif]-->

<!--<script type="text/javascript" src="js/menucontents.js"></script>-->
<!--<script type="text/javascript" src="js/anylinkmenu.js"></script>-->
<!--<script type="text/javascript">
	//anylinkmenu.init("menu_anchors_class") //Pass in the CSS class of anchor links (that contain a sub menu)
	anylinkmenu.init("menuanchorclass")
</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>

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

    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>
<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" type="text/css" href="css/anylinkmenu.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" />
<!--[if lt IE 7]>
	<link href="css/ie_style.css" rel="stylesheet" type="text/css" />
<![endif]-->

<!--<script type="text/javascript" src="js/menucontents.js"></script>-->
<!--<script type="text/javascript" src="js/anylinkmenu.js"></script>-->
<!--<script type="text/javascript">
	//anylinkmenu.init("menu_anchors_class") //Pass in the CSS class of anchor links (that contain a sub menu)
	anylinkmenu.init("menuanchorclass")
</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>
<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>
    Last edited by jscheuer1; 12-10-2011 at 04:52 AM. Reason: saw credit was missing
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate
    Reply With Quote Reply With Quote
  3. 12-10-2011, 06:31 PM #3
    ninjadan9
    ninjadan9 is offline New Comer (less than 5 posts)
    Join Date
    Dec 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks that fixed the problem.
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Forum Rules