Wie "nächstes/vorheriges Bild" codieren?

[mart9]

Hallo Spezialisten!

(Für Schnellleser: wie baue ich "nächstes Bild" und "vorheriges Bild" in den HTML-Code ein?)

Ich hab da ein Anliegen:

Da bekanntermaßen Flash von immer mehr Usern deaktiviert wird wollte ich meine Galerie normal in HTML gestalten - ganz simpel zum scrollen - siehe hier: test

Allerdings ist das runterscrollen vielleicht doch keine so elegante Lösung also möchte ich die klassischen "nächstes Bild" und "vorheriges Bild" einbauen - habe allerdings keine Ahnung wie ich das anstellen soll .....

Aussehen soll das vom Layout her grob so: test1

Danke euch!

[T-Rex]

Hallo Spezialisten!

(Für Schnellleser: wie baue ich "nächstes Bild" und "vorheriges Bild" in den HTML-Code ein?)

Ich hab da ein Anliegen:

Da bekanntermaßen Flash von immer mehr Usern deaktiviert wird wollte ich meine Galerie normal in HTML gestalten - ganz simpel zum scrollen - siehe hier: test

Allerdings ist das runterscrollen vielleicht doch keine so elegante Lösung also möchte ich die klassischen "nächstes Bild" und "vorheriges Bild" einbauen - habe allerdings keine Ahnung wie ich das anstellen soll .....

Aussehen soll das vom Layout her grob so: test1

Danke euch!

Kommt drauf an wie elegant du das ganze willst.
Ganz plump gesagt würde ich alle Bilder in den HTML code werfen und alle mit display: none versehen (also unsichtbar). Zudem bekommt jedes Bild eine eindeutige id (z.B. bild1, bild2 etc...).
dann noch eine funktion die das nächste bild sichtbar und das vorherige unsichtbar macht. Eine "globale" variable brauchste auch noch die weiß welches bild gerade sichbar ist.

var actualImg = 1;

function visibleImg(img,status)
{
   if(status == "next")
   {
       bild+actualImg -> unsichtbar
       actualImg++;
       bild+actualImg -> sichtbar
   }else{
       bild+actualImg -> unsichtbar
       actualImg--;
       bild+actualImg -> sichtbar
   }
}

so ungefähr sieht das mit pseudo code aus.
Musst dann noch prüfen ob es das bild+actuelImg überhaupt gibt. Vor allem wenn du auf 1 stehst und der user nochmal 1 bild zurückgeht wird ja bild0 eingeblendet. Das gibts aber nicht.

Naja hoffe das war hilfreich.

MFG T-Rex
Ps. kannst mir ja mal alle Frauen bilder schicken :P.

[JürgenB]

Hallo mart9,

(Für Schnellleser: wie baue ich "nächstes Bild" und "vorheriges Bild" in den HTML-Code ein?)

z.B. als Link auf die Seite mit dem nächsten / vorherigem Bild. Dieses Seite kann statisch oder dynamisch per cgi-Programm erzeugt sein. Eine Javascriptlösung wäre auch denkbar.

Gruß, Jürgen

PS Ersetze mal das Pin-Up-Photo im Beispiel durch etwas jugendfreieres.

[mart9]

Danke mal an JürgenB und TRex!

Da ich mir mein HTML mit viel Google zusammenbastle und erst durch viel try+error verstehe kann ich eure "mündlichen" Vorschläge leider nicht umsetzen ;-(

Aber mal was anderes, das mir gerade ins Auge gesprungen ist: Beispiel

Ich denke, meine Seite mit Thumbs gefüllt, die beim Mouseover vergrößert angezeigt werden wär glaub ich eine rel. elegante Lösung. Das Beispiel ist mit einem Lightbox-JS umgesetzt, kann man das "einfacher" gestalten? (Mouseover geht wegen des Größenunterschiedes Thumb-Bild ja nicht)

Danke!

[EKKi]

Mahlzeit mart9,

Da ich mir mein HTML mit viel Google zusammenbastle und erst durch viel try+error verstehe kann ich eure "mündlichen" Vorschläge leider nicht umsetzen ;-(

Dann hilft es immer, mit den http://de.selfhtml.org/html/index.htm@title=Grundlagen anzufangen.

Ich denke, meine Seite mit Thumbs gefüllt, die beim Mouseover vergrößert angezeigt werden wär glaub ich eine rel. elegante Lösung. Das Beispiel ist mit einem Lightbox-JS umgesetzt, kann man das "einfacher" gestalten?

Einfacher als mit einem Lightbox-Script? Was ist daran schwer?

MfG,
EKKi

[mart9]

Ich denke, meine Seite mit Thumbs gefüllt, die beim Mouseover vergrößert angezeigt werden wär glaub ich eine rel. elegante Lösung. Das Beispiel ist mit einem Lightbox-JS umgesetzt, kann man das "einfacher" gestalten?

Einfacher als mit einem Lightbox-Script? Was ist daran schwer?

Ich würde auf meiner Seite FIX die Thumbs setzen und beim Mouseover sollte mit dem Lightbox-Effekt das große Foto angezeigt werden.
Das bestehende Beispiel blendet die auch die Thumbs nur ein sobald man über den Text fährt und verschwinden auch wieder sobald man den Thumb-Bereich verlässt. Und diesen Effekt brauch ich ja nicht.

Ich versuch mal das Script zu "entschlüsseln" für mich ;-)

[JensL]

mahlzeit,

ich bin zwar auch kein Spezialist, aber versuch Dich doch einfach mal mit der Lightbox. Ist zwar nicht das wahre HTML (wenn ich mich nicht täusche müsste das javascriptbasiert sein) aber sehr schön erklärt.

--> hier geht's zur Lightbox Beschreibung

--> hier zum direkten Download der deutschen Übersetzung

in dem ZipFile, was ich Dir als zweites verlinkt habe ist eine schöne Beschreibende Seite mit enthalten, die Dir demonstriert, wie Du die Technik in Deinen Quellcode einbauen kannst.

Nur nochmal: Es wird sicherlich bessere Lösungen geben! Diese dient nur als ein Vorschlag, da ich persönlich a) sehr gerne damit arbeite und b) diese technik auch auf einigen Seiten verwendet wird!

Lieben Gruß aus der Mittagspause
Jens

[Harlequin]

Yerf!

ich bin zwar auch kein Spezialist, aber versuch Dich doch einfach mal mit der Lightbox. Ist zwar nicht das wahre HTML (wenn ich mich nicht täusche müsste das javascriptbasiert sein) aber sehr schön erklärt.

Ja, das ist JavaScript. Allerdings ist der Grundaufbau so gehalten, dass das ganze auch ohne JS zumindest "funktioniert". Sprich: die Bilder sind trotzdem erreichbar, es fehlt nur der schöne Effekt.

Gruß,

Harlequin

[mart9]

... versuch Dich doch einfach mal mit der Lightbox...

Danke für Deine Antwort Jens (lass Dir´s schmecken ;-)) aber Lightbox selbst gefällt mir leider gar nicht.

Was ich jedenfalls möchte ist, dass JEDERZEIT der Seitenkopf sicht- und bedienbar bleibt - also meine Galerie in bzw. unter dieser HTML-Seite eingebunden wird bzw. sichtbar ist. In Zeiten von Milliarden von Internet-Seiten ist jeder Klick zuviel ein Grund, eine Seite zu verlassen.

Vielleicht hat ja noch jemand einen "Geht-doch-locker!"-Geistesblitz diesbezüglich ;-)

[JensL.]

Nochma Mahlzeit,

Danke für Deine Antwort Jens (lass Dir´s schmecken ;-))

Danke, das ist der Vorteil, wenn man W(eh)lan in der Uni hat, da kann man neben dem Essen auch noch den Laptop laufen lassen ;-)

Lightbox selbst gefällt mir leider gar nicht.

Kann ich zwar nicht verstehen, aber gut :-) Deine persönliche Entscheidung, die ich respektiere!

Was ich jedenfalls möchte ist, dass JEDERZEIT der Seitenkopf sicht- und bedienbar bleibt - also meine Galerie in bzw. unter dieser HTML-Seite eingebunden wird bzw. sichtbar ist.

Ok, dann habe ich vielleicht doch noch eine Möglichkeit, die mir gerade so spontan durch den Kopf geht:

Ein Grafikprogramm wie Gimp (oder ähnliches) wirst Du sicherlich haben. Damit lassen sich leicht kleine jpg oder png Dateien herstellen, die dann direkt in den Quellcode eingebunden werden können. Und darauf kann dann halt "Nächstes Bild" oder "Vorheriges Bild" geschrieben werden (sogar in einer passenden Schriftart ;-) )

Was die Ausrichtung angeht, würde ich dafür dann allerdings auf CSS-Eigenschaften wie http://de.selfhtml.org/css/eigenschaften/randabstand.htm#margin@title=--- Margin (Außenabstände)> bzw. http://de.selfhtml.org/css/eigenschaften/innenabstand.htm#padding@title=--- Padding (Innenabstände)>
zurückgreifen um die Positionen festzulegen.

Was hälst Du von diesem Vorschlag?

So.. Mittagspause beendet!
Jens

[mart9]

Hach Leute, hat jemand von euch ein kurzes Code-Beispiel, wie ich "nächstes Foto" + "vorheriges Foto" einbauen kann?

Ich wollte zwar aus dieser Seite was rausfiltern, aber ich glaube, da lädt sich mit jedem Klick eine neue Seite, was zu aufwändig wäre.

Von der Vorstellung her ginge es so???

• alle Fotos mit gleichem Namen und fortlaufender Nummer (001, 002, 003 ...) in eigenem Ordner
• Jeder Klick zählt 1 rauf bzw. 1 runter wobei ich im Code eine numerische Grenze für Anfang und Ende festlegen kann

Wär euch sehr dankbar!

[JürgenB]

Hallo mart9,

Hach Leute, hat jemand von euch ein kurzes Code-Beispiel, wie ich "nächstes Foto" + "vorheriges Foto" einbauen kann?

wenn du das selbst nicht programmieren kannst und die Luxusversion (lightbox) nicht in Frage kommt, bleibt die nur die Methode, für jedes Bild eine neue Seite zu erstellen, wie die von dir verlinkte Seite

... dieser Seite ...

oder die Googlesuche nach "Bildergalerie". Prüfe aber vorher, ob eine Javascript-Only-Version, die einige Besucher draußen vor lässt, für dich ok ist und ob dir serverseitige Techniken, z.B. php, zur Verfügung stehen.

Code-Schnippsel solltest du schon bei der Suche hier im Self-Raum finden.

Ein Blick in die http://de.selfhtml.org/javascript/objekte/images.htm@title=Doku sollte dir den Weg zu einer eigenen Lösung erleichtern.

Gruß, Jürgen

[mart9]

Ein Blick in die http://de.selfhtml.org/javascript/objekte/images.htm@title=Doku sollte dir den Weg zu einer eigenen Lösung erleichtern.

Danke für den Verweis! Wusste nicht richtig wonach ich suchen musste.

Hab nun hier mit Hilfe des <http://de.selfhtml.org/javascript/objekte/images.htm#src@title="src"-Objektes > gerade diese Seite gebastelt -> funktioniert erstmal.

  
      <img src="test/01.jpg" alt="">  
      <script type="text/javascript">  
var b = new Array();  
b[0] = new Image(); b[0].src = "test/01.jpg";  
b[1] = new Image(); b[1].src = "erotik/erotik-21.jpg";  
b[2] = new Image(); b[2].src = "test/02.jpg";  
b[3] = new Image(); b[3].src = "erotik/erotik-22.jpg";  
var i = 0;  
function Animation () {  
if (i > 3)  
i = 0;  
document.images[0].src = b[i].src;  
i = i + 1;  
window.setTimeout("Animation()", 1000);  
}  
window.setTimeout("Animation()", 1000);  
      </script>  

Nun müsste wahrscheinlich
1. der Befehl "onclick" eingebaut werden und
2. eine zweite Funktion erstellt werden, die anstatt +1 eben -1 zählt um zurückzublättern.

Da steht mir leider der Kopf .....