Autor |
Nachricht |
stefan ruetz
Threadersteller
Dabei seit: 30.11.2005
Ort: -
Alter: -
Geschlecht:
|
Verfasst Fr 05.01.2007 16: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 17: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 18: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 18: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 19: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 19: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 20:36, insgesamt 1-mal bearbeitet
|
|
|
|
|
schachbrett
Dabei seit: 11.10.2006
Ort: Köln
Alter: -
Geschlecht:
|
Verfasst Fr 05.01.2007 19: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 22: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
Hauptseite bei Iframe mit PHP nachladen
Bilder via Ajax nachladen
|
|