PDA

View Full Version : Combining lightbox with slideshow



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


<?php

$path = "slideshow/prakt5.xml";


?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<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;
}

</style>

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

</script>
</head>

<body>
<div id="imageFlow">
<div class="text">
<div class="title">Loading</div>
<div class="legend">Please wait...</div>
</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="">
</div>
-->
</div>
</html>

and it feeds from an xml with format


<?xml version='1.0' encoding='utf-8' ?>
<bank>
<img>
<src>http://www.investments-forum.gr/images/ZTrade.jpg</src>
<title>a1</title>
<caption>a2</caption>
<link>http://www.yahoo.com/</link>
<target>_blank</target>
</img>
<img>
<src>http://www.investments-forum.gr/images/attitude.jpg</src>
<title>b1</title>
<caption>b2</caption>
<link>http://www.yahoo.com/</link>
<target>_blank</target>
</img>

</bank>

note that you can put local URL for the imgs (127.0.0.1/...etc) 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?