Autor |
Nachricht |
stefan ruetz
Threadersteller
Dabei seit: 30.11.2005
Ort: -
Alter: -
Geschlecht:
|
Verfasst Fr 05.01.2007 17:42
Titel Bild nachladen ohne Seite zu verändern 2 |
|
|
Hi,
ich würde auf http://stefan-ruetz.de/pinakothek/kuenstler.html gerne die Bilder über die Pfeile unter den Bildern weiter und zurück klicken, ohne die ganze Seite neu zu laden. Wie stelle ich das am besten an?
Peace.
|
|
|
|
|
therapiekind
Dabei seit: 14.03.2006
Ort: In deinem Kopf
Alter: -
Geschlecht: -
|
Verfasst Fr 05.01.2007 18:36
Titel
|
|
|
Über Flash, JavaScript "Stand alone" oder das allseits beliebte AJAX.
Haben alle ihre Vorteile.
|
|
|
|
|
Anzeige
|
|
|
schachbrett
Dabei seit: 11.10.2006
Ort: Köln
Alter: -
Geschlecht:
|
Verfasst Fr 05.01.2007 19:17
Titel
|
|
|
z.B so:
Code: | <html>
<head>
<script type="text/javascript">
function Gallery( element, imagelist ) {
var id = element;
var images = imagelist;
var current = 0;
function show() {
document.getElementById( id ).src = images[ current ];
}
this.next = function() {
if( current++ >= images.length - 1 )
current = images.length - 1;
show();
}
this.prev = function() {
if( current-- <= 0 )
current = 0;
show();
}
}
bilderliste1 = new Gallery(
"rahmen1",
new Array( "bild1.jpg", "bild2.jpg", "bild3.jpg" )
);
bilderliste2 = new Gallery(
"rahmen2",
new Array( "bild4.jpg", "bild5.jpg", "bild6.jpg", "bild7.jpg" )
);
</script>
</head>
<body>
<h2>Gallery #1</h2>
<img src="bild1.jpg" id="rahmen1" alt="" />
<a href="#" onclick="bilderliste1.prev()">zurück</a>
<a href="#" onclick="bilderliste1.next()">vor</a>
<h2>Gallery #2</h2>
<img src="bild4.jpg" id="rahmen2" alt="" />
<a href="#" onclick="bilderliste2.prev()">zurück</a>
<a href="#" onclick="bilderliste2.next()">vor</a>
</body>
</html>
|
|
|
|
|
|
stefan ruetz
Threadersteller
Dabei seit: 30.11.2005
Ort: -
Alter: -
Geschlecht:
|
Verfasst Fr 05.01.2007 19:37
Titel
|
|
|
Sehr cool. Danke.
Kann ich irgendwie verhindern, dass die Seite beim klicken wieder an den Seitenanfang springt?
Das liegt an oder ?
|
|
|
|
|
schachbrett
Dabei seit: 11.10.2006
Ort: Köln
Alter: -
Geschlecht:
|
Verfasst Fr 05.01.2007 20:30
Titel
|
|
|
Leg das onclick-Event doch auf dein Pfeilbild.
|
|
|
|
|
stefan ruetz
Threadersteller
Dabei seit: 30.11.2005
Ort: -
Alter: -
Geschlecht:
|
Verfasst Fr 05.01.2007 20:35
Titel
|
|
|
ist das so Code: | <a href="#kuenstler_name" onclick="bilderliste1.prev()"><img src="bilder/pfeil_links.gif" alt="back" name="pfeil links" border="0"></a> | falsch?
stefan ruetz hat geschrieben: | ich hab jetzt Code: | <a onclick="bilderliste1.prev()"><img src="bilder/pfeil_links.gif" alt="back" name="pfeil links" border="0"></a> |
jetzt klappt's aber ich hab die Hand nicht mehr, die bei onmouseover normalerweise erscheint. |
stefan ruetz hat geschrieben: | okay... jetzt passts: Code: | <a href="javascript:bilderliste1.next()"><img src="bilder/pfeil_rechts.gif" alt="next" name="pfeil rechts" border="0"></a> |
Vielen Dank! | [/quote]
[edit]
Bitte edit verwenden.
Zuletzt bearbeitet von hyko am Fr 05.01.2007 21:36, insgesamt 1-mal bearbeitet
|
|
|
|
|
schachbrett
Dabei seit: 11.10.2006
Ort: Köln
Alter: -
Geschlecht:
|
Verfasst Fr 05.01.2007 20:45
Titel
|
|
|
Code: | <img onclick="bilderliste1.next()" src="bilder/pfeil_rechts.gif" alt="next" /> |
|
|
|
|
|
stefan ruetz
Threadersteller
Dabei seit: 30.11.2005
Ort: -
Alter: -
Geschlecht:
|
Verfasst So 07.01.2007 23:57
Titel
|
|
|
ich versuche gerade noch den Text, der unter den Bildern steht mit zu wechseln.
http://www.stefan-ruetz.de/pinakothek/kuenstler.html
Aber es fuktioniert nicht so ganz.
Code: | function Gallery( element, textelement, imagelist, textlist ) {
var id = element;
var images = imagelist;
var text_id = textelement;
var text = textlist;
var current = 0;
var currentText = 0;
function show() {
document.getElementById( id ).src = images[ current ];
document.getElementById( text_id ).innerHTML = text[ currentText ];
}
this.next = function() {
if( current++ >= images.length - 1 )
current = images.length - 1;
currentText = text.length - 1;
show();
}
this.prev = function() {
if( current-- <= 0 )
current = 0;
currentText = 0;
show();
}
}
debeer = new Gallery(
"debeer",
"debeerText",
new Array( "beer_rolant_de/bild_01.jpg", "beer_rolant_de/bild_02.jpg", "beer_rolant_de/bild_03.jpg", "beer_rolant_de/bild_04.jpg", "beer_rolant_de/bild_05.jpg" ),
new Array( "beschreibung für bild 1 in html", "beschreibung für bild 2 in html", "beschreibung für bild 3 in html", "beschreibung für bild 4 in html", "beschreibung für bild 5 in html")
); | Im html Dokument:
Code: | <table border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="3"><img src="beer_rolant_de/bild_01.jpg" id="debeer"></td>
</tr>
<tr>
<td height="10"> </td>
<td height="10" align="center" class="bildunterschrift"> </td>
<td height="10" align="right"> </td>
</tr>
<tr>
<td width="30" valign="top"><a href="javascript:debeer.prev()"><img src="bilder/pfeil_links.gif" alt="vorheriges Bild /previous picture" name="pfeil links" border="0"></a></td>
<td align="center" valign="middle" class="bildunterschrift" >
<span id="debeerText">Balett, Öl auf Leinwand</span>
</td>
<td width="30" align="right" valign="top"><a href="javascript:debeer.next()"><img src="bilder/pfeil_rechts.gif" alt="nächstes Bild /next picture" name="pfeil rechts" border="0"></a></td>
</tr>
</table> |
|
|
|
|
|
|
|
|
Ähnliche Themen |
[javascript] bild nachladen ohne seite neu zu laden
Seite nachladen mit jQuery geht nicht bei IE8
CSS mit neuer Seite verändern?
Formulareingaben nachladen
Bilder via Ajax nachladen
[Flash] Bilder nachladen
|
|