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 :-)
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
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