Wigdet / Bildergalerie selber machen

judith-klein schrieb am 26.06.2017 um 13:11 Uhr

Wieder eine Frage: Kann ich eine Bildergalerie im WD auch komplett selber erstellen? Ich hab mir jetzt verschiedene Widgets runtergeladen und versucht die entsprechend zu bearbeiten, leider funktioniert das aber nicht. Im Bearbeitungsfenster sieht das zwar dann immer so aus wie ich es haben möchte, aber in der Vorschau nicht und es gibt Elemente, die kann ich gar nicht sehen/bearbeiten.

Die Show soll später so aussehen:

Ich brauche keine Animation und keinen Effekt, man soll einfach durchklicken können.

Also grundsätzlich könnte ich ja für jedes Bild eine eigene Unterseite erstellen und dann durch klicken, aber ich frage mich halt, ob das nicht einfacher/kompakter geht.

Leider hab ich bis jetzt noch keine Anleitung im Handbuch finden können.

Oder brauch ich dazu noch ein Zusatzprogramm?

WD12 Premium

Kommentare

BeRo schrieb am 26.06.2017 um 14:56 Uhr

[...] brauch ich dazu noch ein Zusatzprogramm? [...]

Nicht unbedingt. Es sind ja jede Menge Galerie Widgets an Bord. Da Dir die damit angebotenen Möglichkeiten nicht ausreichen, wirst Du aber "Fremdgehen" müssen... 😝

Schau mal hier, da habe ich zu 2 leistungsfähigen Programmen verlinkt, mit denen Du Deine Idee umsetzen kannst.

Viel Erfolg

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

judith-klein schrieb am 26.06.2017 um 17:44 Uhr

Ich hab schon diverse Slider ausprobiert, die von dir genannten sind auch dabei. Vielleicht muss ich mich da noch mehr einarbeiten, bis jetzt hab ich nichts gefunden, womit ich das so umsetzten kann, wie ich möchte. Wie oben gesagt, die vorhandenen Slider die man einfügen kann lassen sich nicht in der Weise bearbeiten oder ich seh nicht wo.

BeRo schrieb am 26.06.2017 um 18:34 Uhr

[...] die vorhandenen Slider die man einfügen kann lassen sich nicht in der Weise bearbeiten [...]

Das siehst Du richtig. Die Slider Widgets, die der WD mitbringt, lassen sich nur rudimentär anpassen. Deine Vorstellungen lassen sich definitiv nur mit einem externen Programm realisieren oder eben direkt mit den Möglichkeiten des WD, also mit der Ebenen Technik.

Lies Dich mal in die Anleitungen zu den verlinkten Slidern ein, ich bin sicher, dass Du da fündig wirst 😘

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

judith-klein schrieb am 26.06.2017 um 19:35 Uhr

Von Magix gibt es aber kein Zusatzprogramm, dass das kann?

BeRo schrieb am 26.06.2017 um 20:49 Uhr

Von Magix gibt es aber kein Zusatzprogramm, dass das kann?

Schau Dir mal die MAGIX Photostory Deluxe an.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

judith-klein schrieb am 26.06.2017 um 20:51 Uhr

Danke 😊

judith-klein schrieb am 27.06.2017 um 13:58 Uhr

Ich hätte doch noch eine Frage: Ich habe mir jetzt eine Bildergalerie (komplett im WD 😁) erstellt und die funktioniert jetzt auch so, dass ich die einzelnen Bilder über die Ziffern anklicken kann. Ich würde jetzt gerne noch einen Zurück und Vor Button erstellen. Wie kann ich das verlinken? Also Funktion analog zu diesen Pfeilen in den Slidern...?

BeRo schrieb am 27.06.2017 um 14:24 Uhr

Wenn Du die Slideshow so angelegt hast, dass man mit der vor/zurück Funktion des Browsers die bereits angezeigten Bilder aufrufen kann, dann kannst Du die schon angelegten Buttons Deiner Slideshow einfach mit einem kurzen JScript Aufruf ausstatten.

für den VOR-Button unter "Link auf Internet od. email":
"javascript:history.forward()" eingeben.

für den ZURÜCK-Button:
"javascript:history.back()"

Das war's dann schon 😊

Viel Erfolg

P.S.
Die JScript Aufrufe gibst Du natürlich ohne die Anführungszeichen ein... 😎

Zuletzt geändert von BeRo am 27.06.2017, 14:26, insgesamt 1-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

judith-klein schrieb am 27.06.2017 um 14:35 Uhr

"Wenn Du die Slideshow so angelegt hast, dass man mit der vor/zurück Funktion des Browsers die bereits angezeigten Bilder aufrufen kann, dann kannst Du die schon angelegten Buttons Deiner Slideshow einfach mit einem kurzen JScript Aufruf ausstatten."

Nö, wie geht das denn? Ich habe einfach eine Bildergalerie genommen mit kleinen Vorschaubildern, die mit den großen Bildern verknüpft sind (wie auch immer). Die Vorschaubilder hab ich dann in runde Buttons umgewandelt. Wenn man da nun drauf klickt, werden die einzelnen Bilder angezeigt. Über die Vor/zurück Funktion des Browsers passiert da gar nix 😇

BeRo schrieb am 27.06.2017 um 15:07 Uhr

[...] Ich habe einfach eine Bildergalerie genommen [...]

SRY, dann geht's nicht mit der gezeigten Methode, weil in dem Fall wieder die Beschränkungen der fertigen Galerie Widgets gelten. Du bist also leider darauf angewiesen, dass das von Dir verwendete Widget die vor/zurück Funktion beinhaltet, wenn Du sie verwenden möchtest... 😞

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

judith-klein schrieb am 27.06.2017 um 18:27 Uhr

Ich habe ja nur eine Galerie benutzt ohne die Funktionen und wollte die gerne dazu basteln.....😔

BeRo schrieb am 27.06.2017 um 18:54 Uhr

[...] wollte die gerne dazu basteln [...]

Das ist zwar möglich, setzt aber schon gut verwertbare Kenntnisse in JavaScript voraus. 😇

Du müsstest dafür ein JScript anlegen, in dem eine Variable definiert wird, die den Index Wert der aktuell geöffneten popup Ebene enthält. Dann benötigst Du je eine JS Funktion count-up/-down, die dafür sorgt, dass die zur aktuellen Ebene nächsthöhere/-niedrigere popup Ebene angezeigt wird, wenn auf den entsprechenden Button geklickt wird. Gleichzeitig muss die Funktion dafür sorgen, dass der Index Wert in der Variablen für die aktuell gezeigte Ebene verändert wird. Den Buttons vor/zurück weist Du dann den entsprechenden Funktionsaufruf zu.

Noch Fragen? 🤓

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

judith-klein schrieb am 27.06.2017 um 20:40 Uhr

"Noch Fragen?"

Da würden mir schon noch welche einfallen, aber nicht mehr heute 😂 Ich werd mich da nochmal rein denken. Hatte ja auf eine einfache Lösung gehofft, aber die gibts dann wohl nicht. 😏 Danke nochmal.

BeRo schrieb am 28.06.2017 um 00:00 Uhr

[...] Hatte ja auf eine einfache Lösung gehofft, aber die gibts dann wohl nicht. [...]

Na ja, Alternativen gibt's schon... 😉

Wenn Du die Bilder als neue Website Inhalte einblendest, dann funktioniert die vor/zurück Option des Browsers und Du kannst die Links benutzen, die ich hier gepostet habe.

Als Voraussetzung musst Du die Struktur Deines Projekts im Editor erweitern und so viele neue Seiten anlegen, wie Du Bilder einblenden willst. Die neuen Seiten müssen ansonsten absolut leer sein, also keine NavBar-, keine Header/Footer-, kein Background-, etc.
Idealerweise machst Du die Seiten gleich groß, z. B. 600 x 400 px, wenn die Bilder diese Größe haben sollen. Auf jede Seite packst Du 1 Bild und benennst die Seiten fortlaufend z. B. mit foto-1, foto-2, etc.

Auf der Seite, auf der die Slideshow zu sehen sein soll, erstellst Du einen Platzhalter in der Größe der Bilder (hier 600 x 400 px) und fügst die Buttons hinzu, mit denen die einzelnen Bilder geöffnet werden können und die Buttons für die vor/zurück Steuerung.

So könnte das danach aussehen:

Im HTML Head des Platzhalters legst Du die u. a. JS Funktionen ab, die, jede für sich, später zum Anzeigen der einzelnen Bilder aufgerufen werden:

---------------------------------------------------------------------------------------------
<script>
function pict1_open() {
document.getElementById('mypict') .src="foto-1.htm";
}
</script>

<script>
function pict2_open() {
document.getElementById('mypict') .src="foto-2.htm";
}
</script>

<script>
function pict3_open() {
document.getElementById('mypict') .src="foto-3.htm";
}
</script>

---------------------------------------------------------------------------------------------

So sieht das im Editor aus:

Wie Du siehst, referenziert jede Funktion in der src Angabe ein anderes Bild.
Mit dem Eintrag src="foto-3.htm" wird z. B. die neu angelegte Seite "foto-3" im Platzhalter angezeigt.

In den HTML Body des Platzhalters gehört noch der iframe Code, mit dem die neu angelegten Bilder (Seiten) eingebunden werden.
Der Code hat eine Besonderheit: Ihm fehlt die URL, die normalerweise hier benötigt wird um eine damit definierte Seite einzubinden. Die jetzt noch fehlende URL wird beim Aufruf einer der o. a. JS Funktionen gewissermaßen "nachgereicht".
Damit die JS Funktion "weiß" wohin die URL gehört, bekommt der iframe eine ID (hier "mypict"). Diese ID ist natürlich auch in den o. a. JS Funktionen enthalten.

Mit der Methode wird erreicht, dass ein iframe Code, der an sich nur 1 definierte Seite einbinden kann, multivalent wird, also beliebig unterschiedliche Seiten einbinden kann, deren URL ihm zur Laufzeit über eine JS Funktion übergeben werden.

Hier der vollständige iframe Code zum Kopieren:

-----------------------------------------------------------------------------------------
<iframe id='mypict' style='border:0px #FFFFFF none;' scrolling='no' frameborder='0' align=aus marginheight='0px' marginwidth='0px' height='100%' width='100%'scrolling="no">
</iframe>

------------------------------------------------------------------------------------------

So sieht der HTML Body des Platzhalters im Editor aus:

Wie im ersten Screenshot schon zu sehen, müssen den einzelnen Buttons noch die Funktionsaufrufe zugewiesen werden .

Die Buttons 1-3 bekommen als Link den Eintrag:
"javascript:pict1_open()"
bzw. "javascript:pict2_open()"
bzw. "javascript:pict3_open()"

Die Buttons vor/zurück linken auf:
"javascript:history.forward()"
bzw. "javascript:history.back()"

Das war's 😍

P.S.
Die online Demo, die ich nach der o. a. Methode erstellt habe, kannst Du Dir hier ansehen.
Die lauffähige Projektdatei kannst Du hier, inkl. aller Scriptlets und Codes, für eigene Experimente herunterladen.

Zuletzt geändert von BeRo am 28.06.2017, 00:02, insgesamt 1-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

judith-klein schrieb am 28.06.2017 um 08:46 Uhr

Wow, super, vielen vielen Dank. Ich werde das mal ausprobieren.😃