mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 29.03.2024 03:19 Benutzername: Passwort: Auto-Login

Thema: Bild nachladen ohne Seite zu verändern 2 vom 05.01.2007


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> Bild nachladen ohne Seite zu verändern 2
Seite: 1, 2  Weiter
Autor Nachricht
stefan ruetz
Threadersteller

Dabei seit: 30.11.2005
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Fr 05.01.2007 16:42
Titel

Bild nachladen ohne Seite zu verändern 2

Antworten mit Zitat Zum Seitenanfang

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.
  View user's profile Private Nachricht senden
therapiekind

Dabei seit: 14.03.2006
Ort: In deinem Kopf
Alter: -
Geschlecht: -
Verfasst Fr 05.01.2007 17:36
Titel

Antworten mit Zitat Zum Seitenanfang

Über Flash, JavaScript "Stand alone" oder das allseits beliebte AJAX.
Haben alle ihre Vorteile.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
schachbrett

Dabei seit: 11.10.2006
Ort: Köln
Alter: -
Geschlecht: Männlich
Verfasst Fr 05.01.2007 18:17
Titel

Antworten mit Zitat Zum Seitenanfang

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&uuml;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&uuml;ck</a>
  <a href="#" onclick="bilderliste2.next()">vor</a>
</body>
</html>
  View user's profile Private Nachricht senden
stefan ruetz
Threadersteller

Dabei seit: 30.11.2005
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Fr 05.01.2007 18:37
Titel

Antworten mit Zitat Zum Seitenanfang

Sehr cool. Danke.
Kann ich irgendwie verhindern, dass die Seite beim klicken wieder an den Seitenanfang springt?
Das liegt an
Code:
href="#"
oder ?
  View user's profile Private Nachricht senden
schachbrett

Dabei seit: 11.10.2006
Ort: Köln
Alter: -
Geschlecht: Männlich
Verfasst Fr 05.01.2007 19:30
Titel

Antworten mit Zitat Zum Seitenanfang

Leg das onclick-Event doch auf dein Pfeilbild. * Keine Ahnung... *
  View user's profile Private Nachricht senden
stefan ruetz
Threadersteller

Dabei seit: 30.11.2005
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Fr 05.01.2007 19:35
Titel

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden
schachbrett

Dabei seit: 11.10.2006
Ort: Köln
Alter: -
Geschlecht: Männlich
Verfasst Fr 05.01.2007 19:45
Titel

Antworten mit Zitat Zum Seitenanfang

Code:
<img onclick="bilderliste1.next()" src="bilder/pfeil_rechts.gif" alt="next" />
  View user's profile Private Nachricht senden
stefan ruetz
Threadersteller

Dabei seit: 30.11.2005
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst So 07.01.2007 22:57
Titel

Antworten mit Zitat Zum Seitenanfang

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">&nbsp;</td>
      <td height="10" align="center" class="bildunterschrift">&nbsp;</td>
      <td height="10" align="right">&nbsp;</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, &Ouml;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>
  View user's profile Private Nachricht senden
 
Ä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
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
MGi Foren-Übersicht -> Programmierung


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.