• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[ERLEDIGT] jQuery Galerie, Frage zu Funktion

lascaux

Mitglied
Hallo zusammen,

hier erstmal ein wenig Code. Dieser funktioniert wunderbar, auch wenn er manch einem etwas merkwürdig erscheint (ich bin eben kein jQuery-Guru). Den CSS-Teil lasse ich bewusst weg, da es mir rein um die Funktion geht :-)

HTML:
<div id="album-photos">
<?php
  $images = scandir('img/thumb/');
  $ignore = array('.', '..');
  foreach ($images as $curImg) {
    if (!in_array($curImg, $ignore)) {
      echo '<img src="img/thumb/' . $curImg . '" alt=""/>' . "\n";
    }
  }
/* Dieser Teil gibt mir den gesamten Inhalt (in dem Falle nur Bilder)
 * aus dem Ordner "img/thumb/" aus und erzeugt IMG-Elemente 
 * mit dem Pfad zur Datei */
?>
</div>

<!-- jQuery Code um ein Overlay anzusteuern, welches von anfang
     auf visibility: hidden gesetzt ist. Zudem nimmt dieses Skript den
     Namen des jeweiligen Bildes und verändert ihn, bildet einen 
     Link zu einem "größeren" Bild und setzt ihn in das IMG-Element -->

<script>
  $(document).ready(function() {
    $('#album-photos img').click(function() {
      var str = $(this).attr('src');
      var str = str.replace('thumb/', '');
      $('#overlay').css({
        visibility : 'visible'
      })
      $('#overlay img').attr({
        src : str
      })
    });
    $('.close').click(function() {
      $('#overlay').css({
        visibility: 'hidden'
      })
    });
  });
</script>

<!-- Das Overlay, dass mit dem jeweiligen Bild als Inhalt sichtbar wird,
     sobald man ein Bild anklickt -->
<div id="overlay">
  <div>
    <img src="" alt=""/>
  </div>
  <p class="close">
    close
  </p>
</div>

Meine Frage hierzu: wie kann diesen Code anpassen, so dass ich während das Overlay sichtbar ist, Bilder umschalten kann (vor,zurück) ohne auf Ajax zurückgreifen zu müssen? Ist es mit jQuery möglich, auf die zuvor generierte Reihenfolge der Bilder zuzugreifen und anhand dieser Reihenfolge 2 Knöpfe (vor und zurück) anzusteuern um nicht jedes mal das Overlay zu schließen und mit erneutem klick auf ein anderes Bild zu öffnen?

Wenn es möglich ist, wäre ich für jeden noch so kleinen Lösungsvorschlag (gerne auch mit Code-Schnippsel) dankbar.


lascaux
 
Werbung:
Ist es mit jQuery möglich, auf die zuvor generierte Reihenfolge der Bilder zuzugreifen
Ja, schau dir mal die Funktionen next() und prev() an, die müssten dir helfen, dein Vorhaben zu realisieren.
Code:
<script>
  $(document).ready(function() {
    var current;
    $('#album-photos img').click(function() {
      current = $(this);
      var str = $(this).attr('src');
      var str = str.replace('thumb/', '');
      $('#overlay').css({
        visibility : 'visible'
      })
      $('#overlay img').attr({
        src : str
      })
    });
    $('.close').click(function() {
      $('#overlay').css({
        visibility: 'hidden'
      })
    });
    $('.prev').click(function() {
      var str = current.prev().attr('src');
      str = str.replace('thumb/', '');
      $('#overlay img').attr({src : str});
    )};
  });
</script>
Ungetestet, aber so müsste es in etwa funktionieren. Zusätzlich musst Du wahrscheinlich noch abfangen, wenn Du schon am Anfang oder am Ende der Bilderliste bist.
 
Zuletzt bearbeitet von einem Moderator:
Funktioniert so nicht :) U.a. ist dir bei Zeile 24 ein kleiner Tippfehler unterlaufen.

Ich werde mich mal nach next() und prev() umschauen. Vielen Dank
 
Werbung:
Untersuch es am besten mal mit dem Debugger und sieh dir die Fehlerkonsole an.
Den Fehler in Zeile 24 sehe ich nicht. Habe ich doch von deinem Code kopiert.
 
Und da ist mir der Fehler passiert, ich meinte Zeile 25. )} statt }).

Uncaught ReferenceError: current is not defined

Das sagt die Konsole mir.
 
Ahja, stimmt.
Verstehe ich nicht, current ist doch hier definiert:
Code:
  $(document).ready(function() {
    var current;
    $('#album-photos img').click(function() {
      current = $(this);
 
Werbung:
PS: Also bei mir funktioniert es, allerdings nur einmal. Was fehlt, ist dieses:
Code:
$('.prev').click(function() {
    current = current.prev();
    var str = current.attr('src');
    str = str.replace('thumb/', '');
    $('#overlay img').attr({src : str});
});
 
Zurück
Oben