Suche im Forum:
Suchen


Autor Nachricht
Beitrag18.05.2010 um 10:44 (UTC)    
Titel: Bildergalerie

Bildergalerie wie in diesen Bsp.

http://www.homepage-total.de/html/galerie-mit-iframes.php

Danke im Vorraus
______________
FK Austria Döbeln 2006 e.V.
Unsere Stadt. Unser Verein. Unsere Leidenschaft.
Beitrag19.05.2010 um 21:42 (UTC)    
Titel: Bildergalerie in Tabelle

Hallo

Das ist lediglich eine Tabelle mit einer Javascriptfunktion:

Dieser Code kommt in den Quelltext der Seite, die die Galerie haben soll:

Zitat:

<script type="text/javascript">
var Bild = 0;
function setBild()
{
if (Bild == 1)
{
document.getElementById('Absatz_Bilder').innerHTML = "<img src='URL BILD 1' width='250px'/>";
}
else
if (Bild == 2)
{
document.getElementById('Absatz_Bilder').innerHTML = "<img src='URL BILD 2' width='250px'/>";
}
else
if (Bild == 3)
{
document.getElementById('Absatz_Bilder').innerHTML = "<img src='URL BILD 3' width='250px'/>";
}
else
{
Bild = 0;
}
}
</script>
<center>
<table style="text-align: center; border: solid 1px #555555; background-color: #FFFFFF;" cellspacing="5" cellpadding="5" width="500" align="center" border="0"><tbody>
<tr><td style="width: 90px; text-align: center; border-right: solid 1px #666666;">
<a href="javascript:void(0)" onclick="Bild=1; setBild();"><img src="URL BILD 1" width="50px"/></a><br><br>
<a href="javascript:void(0)" onclick="Bild=2; setBild();"><img src="URL BILD 2" width="50px"/></a><br><br>
<a href="javascript:void(0)" onclick="Bild=3; setBild();"><img src="URL BILD 3" width="50px"/></a>
</td><td style="width: 390px; text-align: center;">
<p id="Absatz_Bilder"><img src="URL BILD 1" width="250px"/></p>
</td></tr>
</tbody></table>
</center>




Ich habe hier drei Bilder eingebaut. Für mehr Bilder, sieh dir den Code bitte genau an und erweitere ihn nach dem Schema.


Gruß

FK
______________


Zuletzt bearbeitet von fkdesign am 20.05.2010, 12:59, insgesamt einmal bearbeitet
Beitrag28.05.2010 um 07:04 (UTC)    
Titel:

es funktioniert sehr gut nun wollte ich den Code verlängern doch dies scheiterte:(

kannste mir mal zeigen wie ich den Code sinnvoll ändern muss um mehr bilder einfügen zu können?

lg
______________
FK Austria Döbeln 2006 e.V.
Unsere Stadt. Unser Verein. Unsere Leidenschaft.
Beitrag28.05.2010 um 09:30 (UTC)    
Titel:

Moin,
habe dir mal 2 weitere eingefügt.

Hier der Code mit einem kleinen Tutorials.
Zitat:
<script type="text/javascript">
var Bild = 0;
function setBild()
{
if (Bild == 1)
{
document.getElementById('Absatz_Bilder').innerHTML = "<img src='URL BILD 1' width='250px'/>";
}
else
if (Bild == 2)
{
document.getElementById('Absatz_Bilder').innerHTML = "<img src='URL BILD 2' width='250px'/>";
}
else
if (Bild == 3)
{
document.getElementById('Absatz_Bilder').innerHTML = "<img src='URL BILD 3' width='250px'/>";
}
else
if (Bild == 4)
{
document.getElementById('Absatz_Bilder').innerHTML = "<img src='URL BILD 3' width='250px'/>";
}
else
if (Bild == 5)
{
document.getElementById('Absatz_Bilder').innerHTML = "<img src='URL BILD 3' width='250px'/>";
}
else
{
Bild = 0;
}
}
</script>
<center>
<table style="text-align: center; border: solid 1px #555555; background-color: #FFFFFF;" cellspacing="5" cellpadding="5" width="500" align="center" border="0"><tbody>
<tr><td style="width: 90px; text-align: center; border-right: solid 1px #666666;">
<a href="javascript:void(0)" onclick="Bild=1; setBild();"><img src="URL BILD 1" width="50px"/></a><br><br>
<a href="javascript:void(0)" onclick="Bild=2; setBild();"><img src="URL BILD 2" width="50px"/></a><br><br>
<a href="javascript:void(0)" onclick="Bild=3; setBild();"><img src="URL BILD 3" width="50px"/></a><br><br>
<a href="javascript:void(0)" onclick="Bild=4; setBild();"><img src="URL BILD 4" width="50px"/></a><br><br>
<a href="javascript:void(0)" onclick="Bild=5; setBild();"><img src="URL BILD 5" width="50px"/></a>
</td><td style="width: 390px; text-align: center;">
<p id="Absatz_Bilder"><img src="URL BILD 1" width="250px"/></p>
</td></tr>
</tbody></table>
</center>


Du musst am Anfang wenn du die Galerie erweitern möchtest folgendes machen. - Du fügst einfach diesen Code unter den anderen vom folgendem Code.

Zitat:
<script type="text/javascript">
var Bild = 0;
function setBild()
{
if (Bild == 1)
{
document.getElementById('Absatz_Bilder').innerHTML = "<img src='URL BILD 1' width='250px'/>";
}
else
if (Bild == 2)
{
document.getElementById('Absatz_Bilder').innerHTML = "<img src='URL BILD 2' width='250px'/>";
}
else
if (Bild == 3)
{
document.getElementById('Absatz_Bilder').innerHTML = "<img src='URL BILD 3' width='250px'/>";
}
else
if (Bild == 4)
{
document.getElementById('Absatz_Bilder').innerHTML = "<img src='URL BILD 3' width='250px'/>";
}
else
if (Bild == 5)
{
document.getElementById('Absatz_Bilder').innerHTML = "<img src='URL BILD 3' width='250px'/>";
}
else
{
Bild = 0;
}
}


Nun erweiterst du mir folgendem Code - einfach hinten dran hängen, schau dir den auf bau an, wie das geht.

Zitat:
else
if (Bild == 5)
{
document.getElementById('Absatz_Bilder').innerHTML = "<img src='URL BILD 3' width='250px'/>";


Diesen Code einfach einfügen wie hier, habe ich mal Rot makiert.

Zitat:
<script type="text/javascript">
var Bild = 0;
function setBild()
{
if (Bild == 1)
{
document.getElementById('Absatz_Bilder').innerHTML = "<img src='URL BILD 1' width='250px'/>";
}
else
if (Bild == 2)
{
document.getElementById('Absatz_Bilder').innerHTML = "<img src='URL BILD 2' width='250px'/>";
}
else
if (Bild == 3)
{
document.getElementById('Absatz_Bilder').innerHTML = "<img src='URL BILD 3' width='250px'/>"
;
}
else
if (Bild == 4)
{
document.getElementById('Absatz_Bilder').innerHTML = "<img src='URL BILD 3' width='250px'/>";
}
else
if (Bild == 5)
{
document.getElementById('Absatz_Bilder').innerHTML = "<img src='URL BILD 3' width='250px'/>";
}
else
{
Bild = 0;
}
}

Achte dabei, das du nicht die gleiche ID benutzt, sonst wird das Bild doppelt angeziegt.

Weiter gehts im Code weiter unten. - Dort ist folgender Code zu bearbeiten.

Zitat:
</script>
<center>
<table style="text-align: center; border: solid 1px #555555; background-color: #FFFFFF;" cellspacing="5" cellpadding="5" width="500" align="center" border="0"><tbody>
<tr><td style="width: 90px; text-align: center; border-right: solid 1px #666666;">
<a href="javascript:void(0)" onclick="Bild=1; setBild();"><img src="URL BILD 1" width="50px"/></a><br><br>
<a href="javascript:void(0)" onclick="Bild=2; setBild();"><img src="URL BILD 2" width="50px"/></a><br><br>
<a href="javascript:void(0)" onclick="Bild=3; setBild();"><img src="URL BILD 3" width="50px"/></a><br><br>
<a href="javascript:void(0)" onclick="Bild=4; setBild();"><img src="URL BILD 4" width="50px"/></a><br><br>
<a href="javascript:void(0)" onclick="Bild=5; setBild();"><img src="URL BILD 5" width="50px"/></a>
</td><td style="width: 390px; text-align: center;">
<p id="Absatz_Bilder"><img src="URL BILD 1" width="250px"/></p>
</td></tr>
</tbody></table>
</center>


Jetzt wieder das mit dem Rot makierten musst du erweitern - schaue dir auch da den Code genauer an. Wie du ihn erweiterst.

Und folgendem Code darunter packen - schau dir den Aufbau der anderen nach wonach du diesen nächsten Abschnitt einfügen musst.

Zitat:
<a href="javascript:void(0)" onclick="Bild=4; setBild();"><img src="URL BILD 4" width="50px"/></a><br><br>


Ich hoffe dir hat es ein wenig geholfen, wenn du Hilfe brauchst, musst du mir einfach bescheid geben oder dich hier im Thread melden, eine Vorschau ohne Bilder habe ich auf meiner Seite vorhanden.

http://new-designs.de.tl/tets.htm

Gruss,
Fabian
______________

Support auch via PN und im Forum!


Zuletzt bearbeitet von new-designs am 28.05.2010, 10:34, insgesamt 2-mal bearbeitet
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de