Archivlink: javarea.de Forum > JavaScript > Fade-in Bildergalerie
Vollständigen Link anzeigen: javarea.de Forum > JavaScript > Fade-in Bildergalerie

Pages: [1]

geschrieben von mkoegler am 11.04.2005 - 20:03
Hallo @all

Ich habe ein Script geschrieben, dass mir Bilder in einer Tabelle ausgibt - zur Vorschau der Bilder soll man das Bild anklicken können - wenn man das Bild anklickt soll dies in einem div-Tag direkt über dem Originalbild groß erscheinen.
dies funzt auch soweit nur ich wollte einen kleinen fade-in wenn das Bild angeklickt wird und einen fade-out wenn das Bild wieder geschlossen wird.
Mit dem Script das ich hier poste funzt nur der fade_in Befehl und komischerweise nur beim ersten mal - habt Ihr vielleicht ne Idee?

PHP-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20: 
21: 
22: 
23: 
24: 
25: 
26: 
27: 
28: 
29: 
30: 
31: 
32: 
33: 
34: 
35: 
36: 
37: 
38: 
39: 
40: 
41: 
42: 
43: 
44: 
45: 
46: 
47: 
48: 
49: 
50: 
51: 
52: 
53: 
54: 
55: 
56: 
57: 
58: 
59: 
60: 
61: 
62: 
63: 
64: 
65: 
66: 
67: 
68: 
69: 
70: 
71: 
72: 
73: 
74: 
75: 
76: 

<?
<table height='380px' width='800px' align='center'  background='../images/background/gallerie_background.jpg' style='background-repeat: no-repeat;'>
 <
tr>
  <
td width='800px' height='100%' align='left'>
    <
div  align='center' id='preview' style="position: absolute; visibility: block; width: 800px; vertical-align:bottom;" onClick="hidePic();"><center><img id='preview_pic' name='b' width="250px" style="filter:alpha(opacity=0)" src="images/spacer.gif"></center></div><br>&nbsp;<br>
    <
div align='center'>
         <
table valign='middle' align='center' width='100%' border='0' cellspacing='0' cellpadding='0'>
          <
tr>
[
tvar_0]
          </
tr>
         </
table>
    </
div>
<
br>&nbsp;<br>
</
td>
</
tr>
</
table>
<
script language="JavaScript">

document.getElementById("preview").style.width '1px';
document.getElementById("preview").style.display 'none';

var 
a=0

function fade(){
    if(
document.all)
    
b.filters.alpha.opacity=;
    
a++;
    
setTimeout("fade()",20);

}

function 
fade_out(){
    if(
document.all)
        
b.filters.alpha.opacity=100 a
        
a++;
        
setTimeout("fade_out()",20);
}


function 
showPic(elementId)
{
    
fade();
    var 
element;
    var 
pic;
    
    
element=document.getElementById('preview');
    
element.style.width '800px';
    
element.style.display 'block';
    
    
pic=document.getElementById('preview_pic');
    
pic.src "images/upload/galerie/" elementId;
    
pic.style.width '250px';
    
}

function 
hidePic()
{
    
fade_out();
    var 
element;
    var 
pic;
    
    
    
    
element=document.getElementById('preview');
    
element.style.width '1px';
    
element.style.display 'none';
    
    
pic=document.getElementById('preview_pic');
    
pic.src "images/spacer.gif";
    
pic.style.width '1px';
    
    
    
}
</script>
?>



Vielen Dank im Voraus


Powered by: JBB v.2.0.4 Copyright ©2000-2006, www.javarea.de.