Netz-Treff - Slideshow auf Button-Click

#259785

Mike_R

Rosenheim,
15.02.2011, 21:55:14

Slideshow auf Button-Click (web.design)

Hi,
jetzt muss ich mich doch noch mal an die netztreff-Gemeinde wenden in der Hoffnung einen weiteren Tipp zu bekommen. Auf neuen Wunsch soll nun in mein Web-Vorhaben eine slideshow eingebaut werden, die aber nicht automatisch (mit timeout) sondern per Button-Click gesteuert werden soll. Nachdem es diesmal ca. 10 Bilder sind, will ich das Problem nicht wieder damit umgehen, einfach für jedes Bild eine eigene Seite zu erstellen.
Zwei Möglichkeiten sehe ich jetzt:
Wenn es möglich wäre per javascript eine Rückmeldung zu bekommen, welches Bild gerade das aktuelle ist, wäre der Bildwechsel kein Problem mehr. Im html-Code steht:

<div id = \"bagImages\">
<img src=\"images/bag01.jpg\" width=\"419\" height=\"594\" border=\"0\" alt=\"Tasche 01\" onclick=\"changeimg()\">
</div>

(Das onclick ist hier der Einfachheit halber im \'img src\' eingebaut, es soll dann aber in einem eigenen Pfeil-img funktionieren.)

In der javascript-Datei:
function changeimg()
{
alert(\"Value:\"+ document.getElementById(\'bagImages\').getElementsByTagName(\'img\')[0]);

bin ich durch diese Kombination jetzt immerhin so weit gekommen, dass folgende Meldung kommt: Value:[object HTMLImageElement]

Aber was muss ich (ich nehme an, dahinter) noch eingeben, dass er mir den Namen der img-Datei nennt? Hab schon zig-Versuche mit .img .Image .backgroundImage .style.backgroundImage usw. gestartet, alles ohne Erfolg.

Nun zur 2. Möglichkeit:

Einfach ein Programm aud dem Internet hernehmen. Hab schon nach \"slideshow\" gegoogelt, aber das meiste, was ich entdeckt habe, ist jetzt nicht für Web-Auftritte gedacht. Ich brauche keinerlei Effekte, sondern nur, dass auf Pfeilklick (zeitgesteuert mit timeout wär\'s einfach!) ein Bild vor- bzw. zurückgeschaltet wird. Vielleicht kann mir in dieser Richtung jemand einen kleinen Tipp geben?

Mike_R

#259795 Johann [Gast] 15.02.2011, 22:33:43 (editiert von Johann, 15.02.2011, 22:35:24) @ Mike_R	Slideshow auf Button-Click (ed) antworten
	Hallo, nimm Lightbox und dekoriere Dir das ggf. nach belieben. Benutzt die halbe Welt, ist ausgereift. Gruß, Johann

#259799

effeff

Ostfriesland,
15.02.2011, 22:46:51

@ Johann

Slideshow auf Button-Click

antworten

> Hallo,
>
> nimm
> Lightbox und
> dekoriere Dir das ggf. nach belieben. Benutzt die halbe Welt, ist
> ausgereift.
>
> Gruß,
> Johann

Also,

ich lasse mir meine Bildergalerien ja immer von Lightroom erstellen... :teufel:

--
Gruß,

ff

Möge TUX mit dir sein!

#259804

Johann [Gast]

15.02.2011, 22:54:12
(editiert von Johann, 15.02.2011, 23:05:16)

@ effeff

Slideshow auf Button-Click (ed)

antworten

Hallo,

> ich lasse mir meine Bildergalerien ja immer von Lightroom
> erstellen... :teufel:

eine strukturierbare Galerie braucht er nicht. Bei seinem aktuellen Projekt wünscht der Auftraggeber stark \"Flyer\"-lastigen Grafikeinsatz zu Dekorationszwecken. Dafür ist Lightbox die ideale Lösung, zumal sie ausschliesslich mit Mike_R\'s Mitteln wie CSS und Javascript zügig und unproblematisch integrier- und dekorierbar ist.

Gruß,
Johann

#259839

Mike_R

Rosenheim,
16.02.2011, 18:14:12

@ Johann

Slideshow auf Button-Click

antworten

Hallo,

an dieser Stelle noch mal einen herzlichen Dank an alle meine Tipp-Geber bzw. Kommentatoren.
Während ich hier auf Antworten wartete, habe ich selber noch mal recherchiert und bin nun auf folgende Adresse gestoßen

http://www.bretteleben.de/lang-de/javascript/slideshow.html

Im Vergleich zu lightbox, das ich mir auch heruntergeladen habe, ist dieser Code wesentlich kürzer und übersichtlicher und erfüllt auch alle meine Erwartungen. Aber es ist ja immer gut, mehrere Sachen zur Auswahl zu haben und vielleicht kann ich bei anderer Gelegenheit auch auf eure Adressen zurückgreifen.

Mike_R

#259885 Johann [Gast] 16.02.2011, 21:32:38 @ Mike_R	Slideshow auf Button-Click antworten
	> Aber es ist ja immer gut, mehrere Sachen zur Auswahl zu > haben und vielleicht kann ich bei anderer Gelegenheit auch auf eure > Adressen zurückgreifen. Genau. Versuch macht kluch. Gruß und weiterhin viel Erfolg, Johann

#259819

Karsten Meyer

Konstanz am Bodensee,
16.02.2011, 09:59:42

@ Johann

Slideshow auf Button-Click

antworten

> Hallo,
>
> nimm
> Lightbox und
> dekoriere Dir das ggf. nach belieben. Benutzt die halbe Welt, ist
> ausgereift.

Wenn ich mal einen Zwischenruf einwerfen darf - ich kenne Lightbox ja auch (aber nur als passiver Nutzer):

Das ist doch aber immer so, dass das konrekte Bild dann nicht verlinkbar ist, oder?
Und ist eigentlich eine Beschreibung zum Bild möglich?

Um das \"sauber\" hinzubekommen, mach ich meine Galerien mit HomeGallery - das erstellt mir dann eine HTML-Seite pro Bild.

Schönen Gruß,
Karsten

--
Ich bin sehr aktiv bei facebook, wo ich vor allem Fotos zeige und mich in Gruppen über alles mögliche, insbesondere meine Heimatstadt Konstanz austausche.

#259825

Johann [Gast]

16.02.2011, 12:37:05
(editiert von Johann, 16.02.2011, 12:43:36)

@ Karsten Meyer

Slideshow auf Button-Click (ed)

antworten

Hallo,

> Das ist doch aber immer so, dass das konrekte Bild dann nicht verlinkbar
> ist, oder?

Kommt auf den Einsatz an und in wie weit man sich das umbaut/anpasst.

> Und ist eigentlich eine Beschreibung zum Bild möglich?

Ja.

> Um das \"sauber\" hinzubekommen, mach ich meine Galerien mit HomeGallery -
> das erstellt mir dann eine HTML-Seite pro Bild.

Wie gesagt, er braucht sehr wahrscheinlich keine Galerie, sondern ein Javascript-Werkzeug, bei dem mittels Knopfdruck eine Slideshow angezeigt wird.
Klar könnte er auch eine Galerie, möglicherweise auf Datenbankbasis, benutzen wenn er weiss, wie er sich den Output dieser Applikation anpasst und in sein aktuelles Projekt einarbeiten kann.
Halte ich jedoch für deutlichen Mehraufwand, so wie ich sein Projekt bis jetzt in Augenschein genommen habe.
Für Lightbox musste fast nix tun. Bibliotheken einbinden, die entsprechenden Bilder mit einem speziellen Parameter im img-tag versehen und fertig.
Wenn man das schon mal gemacht hat keine fünf Minuten arbeit.
Da ist die einmalige umdekorierung der Hauptaufwand.
Ich nutze Lightbox oft als Anzeigefunktion für eine zugrunde liegende Galerie, auch das ist möglich.

Gruß,
Johann

#259826

d-fens

Bonn,
16.02.2011, 12:48:44
(editiert von d-fens, 16.02.2011, 12:52:48)

@ Mike_R

Slideshow auf Button-Click (ed)

antworten

> Aber was muss ich (ich nehme an, dahinter) noch eingeben, dass er mir den
> Namen der img-Datei nennt? Hab schon zig-Versuche mit .img .Image
> .backgroundImage .style.backgroundImage usw. gestartet, alles ohne
> Erfolg.

Wie wär\'s mit .src? Ich kann\'s hier leider gerade nicht testen. Und wenn du dem IMG auch eine ID verpasst, wird der Code deutlich lesbarer.

EDIT:
Schau mal hier. SelfHTML ist nach wie vor empfehlenswert. Benutze da mal häufiger die Suche.

--
„Tu es oder tu es nicht! Es gibt kein Versuchen.“
(Jedi-Meister Yoda)

#259838

Mike_R

Rosenheim,
16.02.2011, 18:03:52

@ d-fens

Slideshow auf Button-Click

antworten

Hallo d-fens,

> Wie wär\'s mit .src?

vielen Dank. Genau das war\'s. In SelfHTML hatte ich schon nachgeschaut und auch mit \'src\' einen Test unternommen; aber - wenn ich mich bei den vielen Versuchen recht erinnere - noch ein \'img\' davor gehabt. Irgendwie steh ich mit diesen Adressen scheinbar auf Kriegsfuß.
Jetzt wollte ich das in einem ähnlichen Fall gleich noch mal einsetzen und wieder haut das nicht hin.
Diesmal schaut es so aus:
<div id=\"background_agentur\">

und im stylesheet ist der Url festgelegt:
#background_agentur
{ background-image: url(images/agentur.jpg); }

Und wieder war mein Gedanke, dass das in javascript mit Zeilen wie
alert(\"Value: \" + document.body.style.backgroundImage.src);
...+ document.getElementById(\'background_agentur\').getElementsByTagName(\'img\')[0].src)
...+ document.getElementById(\'background_agentur\').style.backgroundImage.src);
usw. usw. klappen müsste. Leider Fehlanzeige. Das müsste sich doch auch anzeigen lassen, aber wie schaut diesmal die Syntax aus?

Mike_R

#259903

d-fens

Bonn,
16.02.2011, 22:55:29

@ Mike_R

Slideshow auf Button-Click

antworten

> Und wieder war mein Gedanke, dass das in javascript mit Zeilen wie
> alert(\"Value: \" + document.body.style.backgroundImage.src);
> ...+
> document.getElementById(\'background_agentur\').getElementsByTagName(\'img\')[0].src)
> ...+
> document.getElementById(\'background_agentur\').style.backgroundImage.src);
> usw. usw. klappen müsste. Leider Fehlanzeige. Das müsste sich doch auch
> anzeigen lassen, aber wie schaut diesmal die Syntax aus?

Ganz einfach:

document.getElementById(\'background_agentur\').style.backgroundImage

Und du solltest als Rückgabewert den URL erhalten. Bei mir im Test funktioniert das mit FF 3.6.13, IE 8 und Opera 11.01. Allerdings hast du dann noch jede Menge Arbeit vor dir, denn jeder Browser gibt eine andere Variation zurück:

Firefox: url(\"images/agentur.jpg\")
Internet Explorer: url(images/agentur.jpg)
Opera: url(\"http://www.alpsolution.de/knierer/images/agentur.jpg\")

Also mal mit Hochkommata, mal ohne, mal mit absolutem Pfad, mal mit relativem ... viel Spaß. Warum musst du das denn überhaupt auslesen und verwaltest die Bilder nicht in einem Array o.ä.? Dann weiß das Script immer, wo es gerade steht. Ich verstehe den ganzen Ansatz nicht.

--
„Tu es oder tu es nicht! Es gibt kein Versuchen.“
(Jedi-Meister Yoda)

#260132

Mike_R

Rosenheim,
17.02.2011, 23:40:31

@ d-fens

Slideshow auf Button-Click

antworten

> Ganz
> einfach:

document.getElementById(\'background_agentur\').style.backgroundImage

Und
> du solltest als Rückgabewert den URL erhalten.

> Bei mir im Test funktioniert
> das mit FF 3.6.13, IE 8 ....

Das hatte ich in meiner langen Versuchsreihe auch schon probiert. Irgendwie versteh ich das nicht. Da wurde bei mir - und wird in einem nochmaligen Versuch auch jetzt - bei beiden oben von Dir aufgeführten Browsern nichts (d.h. nur das Wort \'Value:\') angezeigt!

> Firefox: url(\"images/agentur.jpg\")
> Internet Explorer: url(images/agentur.jpg)
> Opera: url(\"http://www.alpsolution.de/knierer/images/agentur.jpg\")
>
> Also mal mit Hochkommata, mal ohne, mal mit absolutem Pfad, mal mit
> relativem ... viel Spaß.

Ok., nicht gerade schön, aber das ließe sich mit einer Funktion (? - in VBA heißt die Instr()) bewältigen, um an den eigentlichen Bildnamen zu kommen.

> Warum musst du das denn überhaupt auslesen und
> verwaltest die Bilder nicht in einem Array o.ä.? Dann weiß das Script
> immer, wo es gerade steht. Ich verstehe den ganzen Ansatz nicht.

Also es geht darum, auf Button (Pfeil)-Klick insgesamt 4 vorhandene Hintergrundbilder bei der index.html auszutauschen. (Wird so gewünscht!!) Ich hatte da auch schon mit Arrays experimentiert (aber wohl irgendwo einen Wurm drin gehabt); bei einem neuen Versuch hat das nun geklappt, so dass das dann die viel einfachere Lösung wird. Trotzdem würde mich (auch wenn ich das nun so nicht mehr brauche) interessieren, warum die o.a. Anzeige bei mir nicht funktioniert.

Noch mal vielen Dank für Deine mehrmalige Hilfe.

Mike_R

#260169

Mike_R

Rosenheim,
18.02.2011, 12:33:41

@ Mike_R

Slideshow auf Button-Click

antworten

Jetzt hab ich noch einen kleinen Nachtrag und hoffe, dass Du mir hier auch weiterhelfen kannst.

Hab jetzt diesen Hintergrund-Bildwechsel mit Arrays in javascript hingekriegt; allerdings funktionert das zwar im Firefox, aber nicht im IE8.
Es geht vermutlich nur um diese Zeile:

document.getElementById(\'background_agentur\').src = neuBild[nr].src;

Nehme an, dass der IE8 sich irgendwie am \'document\' stört und da was anderes haben möchte. Irgendwie hab ich da nämlich was dumpf in Erinnerung; bin aber jetzt in selfhtml nicht mehr fündig geworden.

Mike_R

#260188

Mike_R

Rosenheim,
18.02.2011, 14:24:52

@ Mike_R

Slideshow auf Button-Click

antworten

Bin schon wieder da!!! Es ist zum Mäuse-Melken. Hab selber wegen des IE-Problems herumprobiert: if(document.all) ... else ...
was aber keinen Erfolg brachte. Nachdem ich das wieder rückgängig gemacht hatte, funktionierte dieselbe Zeile

document.getElementById(\'background_agentur\').src = neuBild[nr].src;

plötzlich auch beim Firefox nicht mehr; obwohl ich sonst nichts geändert hatte und derselbe Code vorher das gewünschte Ergebnis gebracht hatte (ich hab das ja nicht geträumt!!!) Gibt es dafür irgendeine einleuchtende Erklärung?

Mike_R

#259837

Peggy

Niederösterreich,
16.02.2011, 17:58:54

@ Mike_R

fertiges System zum Downloaden

antworten

Schau dir mal das an: Xenotek
Da hast du eine Übersicht und kannst die Bilder auch einzeln weiterklicken, wenn du einmal eines offen hast.
Das klingt doch nach deiner Wunschvorstellung, oder habe ich das falsch verstanden?

Beispiel gibt\'s hier:
Private Fotoseite
(Nein, die sind nicht von mir, aber von einem Bekannten.)

--
Computer sind wie kleine Kinder - sie folgen nur, wenn sie dazu aufgelegt sind.
(eigene Erfahrung)