Hallo, ich soll für eine Slideshow zusätzlich noch den "lightbox-effekt" machen:
also normalerweise laufen die bilder einfach in einer slideshow, doch wenn ich auf ein bild klicke sollte sich die lightbox für das bild öffnen. wie kann ich das bewerkstelligen?
hier der code der slideshow:
also normalerweise laufen die bilder einfach in einer slideshow, doch wenn ich auf ein bild klicke sollte sich die lightbox für das bild öffnen. wie kann ich das bewerkstelligen?
hier der code der slideshow:
Code:
<script type="text/javascript">// Author: ricocheting.com
// Description: slideshow that allows visitors to flip through a series of images on your website
var x_winkler2=0;
function rotate_winkler2(num){
fs=document.ff_winkler2.slide;
x_winkler2=num%fs.length;
if(x_winkler2<0) x_winkler2=fs.length-1;
document.images.show_winkler2.src=fs.options[x_winkler2].value;
fs.selectedIndex=x_winkler2;}
function auto_winkler2() {
if(document.ff_winkler2.fa.value == "Stop"){
rotate_winkler2(++x_winkler2);setTimeout("auto_winkler2()", 5000);}}
</script>
<!-- configurable script -->
<script type="text/javascript">
theimage = new Array();
// The dimensions of ALL the images should be the same or some of them may look stretched or reduced in Netscape 4.
// Format: theimage[...]=[image URL, link URL, name/description]
theimage[0]=["images/winter1.jpg", "images/winter1.jpg", "rel[lightbox]"];
theimage[1]=["images/winter2.jpg", "images/winter2.jpg", "rel[lightbox]"];
theimage[2]=["images/winter5.jpg", "images/winter5.jpg", "rel[lightbox]"];
theimage[3]=["images/winter6.jpg", "images/winter6.jpg", "rel[lightbox]"];
theimage[4]=["images/winter7.jpg", "images/winter7.jpg", "rel[lightbox]"];
///// Plugin variables
playspeed=3000;// The playspeed determines the delay for the "Play" button in ms
dotrans=1; // if value = 1 then there are transitions played in IE
transtype='blendTrans';// 'blendTrans' or 'revealtrans'
transattributes='23';// duration=seconds,transition=#<24
//#####
//key that holds where in the array currently are
i=0;
//###########################################
//if random
function SetRandom() {
tempimage = new Array();
for(p=0; p<theimage.length; p++){
for(p1=0; p1>-1; p1) {
tempNum = Math.floor(Math.random()*theimage.length)
if(!tempimage[tempNum]){
tempimage[tempNum]=theimage[p];
break;
}
}
}
for(p=0;p<theimage.length;p++)theimage[p]=tempimage[p];
}
//if random order
SetRandom()
//###########################################
window.onload=function(){
//preload images into browser
preloadSlide();
//set transitions
GetTrans();
//set the first slide
SetSlide(0);
//autoplay
PlaySlide();
}
//###########################################
function SetSlide(num) {
//too big
i=num%theimage.length;
//too small
if(i<0)i=theimage.length-1;
//switch the image
if(document.all&&!window.opera&&dotrans==1)eval('document.images.imgslide.filters.'+transtype+'.Apply()')
document.images.imgslide.src=theimage[i][0];
if(document.all&&!window.opera&&dotrans==1)eval('document.images.imgslide.filters.'+transtype+'.Play()')
}
//###########################################
function PlaySlide() {
if (!window.playing) {
PlayingSlide(i+1);
if(document.slideshow.play){
document.slideshow.play.value=" Stop ";
}
}
else {
playing=clearTimeout(playing);
if(document.slideshow.play){
document.slideshow.play.value=" Play ";
}
}
// if you have to change the image for the "playing" slide
if(document.images.imgPlay){
setTimeout('document.images.imgPlay.src="'+imgStop+'"',1);
imgStop=document.images.imgPlay.src
}
}
//###########################################
function PlayingSlide(num) {
playing=setTimeout('PlayingSlide(i+1);SetSlide(i+1);', playspeed);
}
//###########################################
//desc: picks the transition to apply to the images
function GetTrans() {
//si=document.slideshow.trans.selectedIndex;
if((document.slideshow.trans && document.slideshow.trans.selectedIndex == 0) || (!document.slideshow.trans && dotrans==0)){
dotrans=0;
}
else if ((document.slideshow.trans && document.slideshow.trans.selectedIndex == 1) || (!document.slideshow.trans && transtype == 'blendTrans')){
dotrans=1;
transtype='blendTrans';
document.imgslide.style.filter = "blendTrans(duration=1,transition=1)";
}else{
dotrans=1;
transtype='revealtrans';
if(document.slideshow.trans) transattributes=document.slideshow.trans[document.slideshow.trans.selectedIndex].value;
document.imgslide.style.filter = "revealTrans(duration=1,transition=" +transattributes+ ")";
}
}
//###########################################
function preloadSlide() {
for(k=0;k<theimage.length;k++) {
theimage[k][0]=new Image().src=theimage[k][0];
}
}
</script>
<!-- slide show HTML --><form name="slideshow">
<center><table border="0" cellpadding="2" cellspacing="0">
<tr>
<td align="center">
<a href="#" onMouseOver="this.href=theimage[i][1];return false">
<script type="text/javascript">
document.write('<img name="imgslide" id="imgslide" src="'+theimage[0][0]+'" border="none" rel="lightbox">')
</script>
</a>
</td>
</tr>
</table></center>