Javascript: Einfache Bilderstrecke/ Gallery (HTML, CSS und Javascript)

[thread]13549[/thread]

Javascript: Einfache Bilderstrecke/ Gallery

Leser: 16

Articles: hide open all | hide show old branches

+5 replies

cbxk1xg

2009-05-20 12:03

User since
2003-10-20
496 Artikel
BenutzerIn
[default_avatar]

Hallo Freunder der Sonne,

ich habe ein ziemlich dusseliges Javascript-Problem. Ich habe eine recht einfache Javascript-Bilderstrecke die ich in meinem Perlskript erzeuge. Das funktioniert auch tadellos. Allerdings nur bis zu dem Punkt an dem ich eine weitere Bilderstrecke auf der gleichen Seite erzeuge. Da funktioniert dann nur die erste Bilderstrecke.

Soweit ich das bereits herrausgefunden habe, liegt es daran, das die Funktion SwapPic nur einmal existieren darf. Das gilt natürlich auch für alle IDs und Arrays. Nachdem ich nun automatisch an all diese Elemente eine Nummer hänge, geht nix mehr. Mit Firebug bekomme ich nicht mal eine Fehlermeldung.

Ich hoffe es hat jemand eine Idee. Ich bin für jeden Typ dankbar.

Code: (dl )

<html>
<head>
<title>test</title>
</head>
<body>

<script type="text/javascript">
/* <![CDATA[ */
var GalleryItem1 = new Array();
GalleryItem1[0] = new Image();
 GalleryItem1[0].src = "DSC00575.jpg";
 GalleryItem1[0].pic = "DSC00575.jpg";
 GalleryItem1[0].alt = "alt text 1";
 GalleryItem1[0].cap = "Impression 1";
 GalleryItem1[0].copy = "copy 1";
 GalleryItem1[0].url = "";
GalleryItem1[1] = new Image();
 GalleryItem1[1].src = "DSC00586.jpg";
 GalleryItem1[1].pic = "DSC00586.jpg";
 GalleryItem1[1].alt = "alt text 2";
 GalleryItem1[1].cap = "Impression 2";
 GalleryItem1[1].copy = "copy 2";
 GalleryItem1[1].url = "";

function SwapPic1(PicName1, CurrentPic1)
{
var prev1	= CurrentPic1 -1;
var next1	= CurrentPic1 +1;
var counter1	= GalleryItem1.length;

if (prev1 >= 0)
{
document.getElementById('Gallery_prev1').innerHTML = '<a href="#back" class="Gallery_prev1" onclick="return SwapPic1(&quot;Gallery&quot;,'+prev1+')";>&laquo; zur&uuml;ck</a>';
document.getElementById(PicName1+'_copyID1').innerHTML = 'Quelle:'+GalleryItem1[CurrentPic1].copy;
document.getElementById(PicName1+'_capID1').innerHTML = GalleryItem1[CurrentPic1].cap;
if (GalleryItem1[CurrentPic1].url != 0) {document.getElementById(PicName1+'_urlID1').innerHTML	= '<a href="'http://foo.bar/?PID='+GalleryItem1[CurrentPic1].url+'" target="_blank" id="Gallery_urlID1" class="Gallery_urlID">info</a>';}
else {document.getElementById(PicName1+'_urlID1').innerHTML = '<div class="Gallery_urlID">&nbsp;</div>';}
}

else {document.getElementById('Gallery_prev1').innerHTML = '';}

if (counter1 > next1)
{
document.getElementById('Gallery_next1').innerHTML = '<a href="#forward" class="Gallery_next1" onclick="return SwapPic1(&quot;Gallery&quot;,'+next1+')">weiter &raquo;</a>';
document.getElementById(PicName1+'_picID1').innerHTML = '<a href="#forward" onclick="return SwapPic1(&quot;Gallery&quot;,'+next1+')"><img width="405" src="'+GalleryItem1[CurrentPic1].pic+'" alt="'+GalleryItem1[CurrentPic1].alt+'"/></a>';
document.getElementById(PicName1+'_copyID1').innerHTML = 'Quelle: '+GalleryItem1[CurrentPic1].copy;
document.getElementById(PicName1+'_capID1').innerHTML = GalleryItem1[CurrentPic1].cap;
if (GalleryItem1[CurrentPic1].url != 0) {document.getElementById(PicName1+'_urlID1').innerHTML	= '<a href="'http://foo.bar/?PID='+GalleryItem1[CurrentPic1].url+'" target="_blank" id="Gallery_urlID1" class="Gallery_urlID">info</a>';}
else {document.getElementById(PicName1+'_urlID1').innerHTML = '<div class="Gallery_urlID">&nbsp;</div>';}

}

else
{
document.getElementById('Gallery_next1').innerHTML = '';
document.getElementById(PicName1+'_picID1').innerHTML = '<img width="405" src="'+GalleryItem1[CurrentPic1].pic+'" alt="'+GalleryItem1[CurrentPic1].alt+'"/>';
document.getElementById(PicName1+'_copyID1').innerHTML = 'Quelle: '+GalleryItem1+[CurrentPic1].copy;
document.getElementById(PicName1+'_capID1').innerHTML = GalleryItem1[CurrentPic1].cap;
if (GalleryItem1[CurrentPic1].url != 0) {document.getElementById(PicName1+'_urlID1').innerHTML = '<a href="'http://foo.bar/?PID='+GalleryItem1[CurrentPic1].url+'" target="_blank" id="Gallery_urlID1" class="Gallery_urlID">info</a>';}
else {document.getElementById(PicName1+'_urlID1').innerHTML = '<div class="Gallery_urlID">&nbsp;</div>';}
}


return true;
}
/* ]]> */
</script>
<div id="Gallery_Box1" class="Gallery_Box">
	<div id="Gallery_prev1" class="Gallery_prev1">&nbsp;</div><div id="Gallery_next1"><a href="#forward" class="Gallery_next1" onclick="return SwapPic1("Gallery",1)" class="Gallery_next1">weiter &raquo;</a></div>
	<div id="Gallery_picID1" class="GalleryPic"><a href="#forward" onclick="return SwapPic1("Gallery",1)"><img width="405" src="DSC00575.jpg" alt=""/></a></div>
	<div id="GalleryMetaBox1" class="GalleryMetaBox">
		<div id="Gallery_copyID1" class="GalleryCopyright">Quelle: copy 1</div>
		<div id="Gallery_bigID1" class="GalleryBig">&nbsp;</div>
		<div id="Gallery_urlID1" class="GalleryUrl">&nbsp;</div>
		<div id="Gallery_capID1" class="GalleryCaption">Impression 1</div>
	</div>
</div>

</body>
</html>

Last edited: 2009-05-20 12:06:05 +0200 (CEST)

+4 replies
LanX-

2009-05-20 12:13

User since
2008-07-15
1000 Artikel
BenutzerIn

Jaja JS die alte Cut & Paste & Swear Sprache!

IDEE: Bleib bei deinem alten Script und binde sie in verschiedene Iframes ein. Die Bildgrößen sollten ja fix sein...
me and my writeups
- +3 replies
- cbxk1xg
  
  2009-05-20 12:24
  
  User since
  2003-10-20
  496 Artikel
  BenutzerIn
  
  Danke. Aber war kein Cut&Paste, sondern ein eigenes Skript. Das mit den iframes is ja voll ekelig! :-) Ich hab's jetzt doch gelöst. War nur eine Kleinigkeit.
  - nepos
    
    2009-05-20 13:03
    
    User since
    2005-08-17
    1420 Artikel
    BenutzerIn
    
    Und was für ne Kleinigkeit? Könnte ja doch den einen oder anderen interessieren ;)
  - LanX-
    
    2009-05-20 13:08
    
    User since
    2008-07-15
    1000 Artikel
    BenutzerIn
    
    Sorry lieber "Freunder", aber wer anfängt identische Funktionen zu duplizieren und mit Nummern zu versehen ist nicht weit von Cut & Paste entfernt! >8 )
    
    UPDATE: "voll eklig"!
    Last edited: 2009-05-20 13:09:53 +0200 (CEST)
    me and my writeups

View all threads created 2009-05-20 12:03.