View Full Version : Combining lightbox with slideshow

04-21-2009, 07:49 AM
1) Script Title: lightbox

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/lightbox2/index.htm

3) Describe problem: I have seen the lightbox implemented but when tried to combine it with a slide show script I had didn't made it, both are here (http://www.investments-forum.gr/demo/a1.php) the the slideshow work with this file which I include to any page I wish to display it
(the js function were to big to include here plz take them from view source)


$path = "slideshow/prakt5.xml";


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
body {
margin: 0px;
padding: 0px;
background: #222;
width: 100%;
height: 100%;
#imageFlow {
position: absolute;
width: 840px;
height: 400px;
overflow: hidden;
background: #000;
#imageFlow .diapo {
position: absolute;
left: -4000px;
cursor: pointer;
-ms-interpolation-mode: nearest-neighbor;
#imageFlow .link {
border:solid #fff 1px;
margin-left: -1px;
margin-bottom: -1px;
#imageFlow .text {
position: absolute;
left: 0px;
width: 100%;
bottom: 16%;
text-align: center;
color: #FFF;
font-family: verdana, arial, Helvetica, sans-serif;
z-index: 1000;
#imageFlow .title {
font-size: 0.9em;
font-weight: bold;
#imageFlow .legend {
font-size: 0.8em;
#imageFlow .scrollbar {
position: absolute;
left: 10%;
bottom: 10%;
width: 80%;
height: 16px;
z-index: 1000;
#imageFlow .track {
position: absolute;
left: 1%;
width: 98%;
height: 16px;
filter: alpha(opacity=30);
opacity: 0.3;
#imageFlow .arrow-left {
position: absolute;
#imageFlow .arrow-right {
position: absolute;
right: 0px;
#imageFlow .bar {
position: absolute;
height: 16px;
left: 25px;


<script type="text/javascript">

/* ==== create imageFlow ==== */
// div ID, imagesbank, horizon, size, zoom, border, autoscroll_start, autoscroll_interval
imf.create("imageFlow", "<?php echo $path; ?>" , 0.75, 0.15, 1.8, 10, 8, 1);


<div id="imageFlow">
<div class="text">
<div class="title">Loading</div>
<div class="legend">Please wait...</div>
<div class="scrollbar">
<img class="track" src="slideshow/sb.gif" alt="">
<img class="arrow-left" src="slideshow/sl.gif" alt="">
<img class="arrow-right" src="slideshow/sr.gif" alt="">
<img class="bar" src="slideshow/sc.gif" alt="">

and it feeds from an xml with format

<?xml version='1.0' encoding='utf-8' ?>


note that you can put local URL for the imgs ( and work with it just fine. The slideshow hadn't any contributions to the code show I couldn't find any documentation to help me.
Both scripts work at the same page so there shouldn't be a problem combining them. I tried to make the lightbox be launched when clicking an img rather than an anchor but didn't worked, might be very simple actually just I do not have the knowledge (yet) to do it any help?