Foto-Slideshow Browser-Breite füllend

SteHoy schrieb am 19.10.2014 um 21:15 Uhr

Hallo zusammen,

wie kann ich eine Foto-Slideshow zB. den NIVO-Schieberegler so in eine Seite einbauen, dass sie über die gesamte Breite des Browsers zu sehen ist. Meine Versuche eine Slide-Show in den Pasteboard background zu packen sind gescheitert, denn dort war sie in der Seitenvorschau einfach nicht zu sehen. Habe sie dann in die Ebene Mouse Off verschoben und dort war sie zu sehen. Wie lässt sich dieser Slider-Wunsch erfüllen?

 

Grüße

Stefan

Kommentare

BeRo schrieb am 20.10.2014 um 00:27 Uhr

Zu Deiner Frage gibt es sicher etliche Lösungen, die mit unterschiedlichen Programmiertechniken realisiert werden können.

Da es nicht damit getan ist, eine Slideshow im Hintergrund der Website abzulegen, muss also weiter ausgeholt werden. Alle mir bekannten Versionen benutzen für die Umsetzung zumindest JavaScript.
Eine sehr schöne (weil kurze) Variante kannst Du hier finden. 

Der dazu passende JS Code sieht so aus:

---------------------------
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="jquery.backstretch.js"></script>
<script>
    $.backstretch([
      "path_to_image/image1.jpg",
      "path_to_image/image1.2pg",
      "path_to_image/image1.3pg" //NOTE: The last element has NO comma
      ], {
        fade: 750,  //Speed of Fade
        duration: 4000  //Time of image display
    });
</script>

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

Die gelb markierten Einträge sind die Pfadangaben zu den Bildern, die im Wechsel-, formatfüllend als Hintergrundbild angezeigt werden. Die Anzahl der Bilder ist nicht limitiert...

Die im Code verwendeten JS (JQ) Bibliotheken ("jquery.min.js" und "jquery.backstretch.min.js") kannst Du ebenfalls hier herunterladen. Da findest Du auch eine online gestellte Demo.

Viel Erfolg

------------------
Edit: 03.12. - 21:23h

Fehler im JS Script korrigiert

Zuletzt geändert von BeRo am 03.12.2014, 21:22, insgesamt 2-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... 🤓

SteHoy schrieb am 07.11.2014 um 12:53 Uhr

Mal wieder ... "Danke BeRo" ...

Die Variante sieht cool aus. Bevor ich sie nachbaue: Wo packe ich die Bilder für den Slider hin? Muss ich die Seite exportieren und die Bilder mit den korrekt geschriebenen Dateinamen einfach in in den exportierter index_html Ordner packen? UND  Kann ich diesen Code auch dahingehend abändern, dass die Bilder zwar in der kompletten Breite automatisch, aber nicht in der kompletten Höhe dargestellt werden? Wie bei dieser Seite. Wenn es mit dem jetzigen Code nicht geht, vielleicht hast Du für diese Art der Darstellung eine andere "Schritt für Schritt"-Lösung in der Hinterhand.

NACHTRAG: Einfacher ist bestimmt , nur ein einziges Bild über die gesamte Breite des Displays. Wie lässt sich das hinkriegen, so dass das Bild nicht unscharf wird, wenn es auf einem "großen" Display zu sehen ist. 

Ich freue mich von Dir BeRo und allen anderen, die eine Idee haben  zu lesen.

Grüße

Stefan

 

BeRo schrieb am 07.11.2014 um 23:23 Uhr

[...] Wo packe ich die Bilder für den Slider hin? [...]

Das liegt ganz bei Dir. Der Code lässt Dir alle Freiheiten.

In den Zeilen "path_to_image/image1.jpg", findest Du einen Platzhalter für die Pfadangabe zu einem Bild (im Beispiel grün markiert).
Da könnte z. B. stehen: "./index_htm_files/bilder", oder ein anderer Pfad. Das ist also nur davon abhängig, wo Du die Bilder auf Deinem Webspace "parkst".

[...] Kann ich diesen Code auch dahingehend abändern, dass die Bilder [...] nicht in der kompletten Höhe dargestellt werden [...]

Auch das ist möglich.

Da der Code nicht aus meiner Feder stammt und er obendrein interaktiv mit der JQuery Bibliothek zusammenarbeitet, die hier noch um spezielle Funktionen erweitert wurde, ist jeder Eingriff in den Code auch ein bisschen ein Lotteriespiel, das zu überraschenden-, ungewollten Ergebnissen führen kann.
Also, kann mein Tipp auch "in die Hose" gehen.

Probier's mal so:

Öffne die JS Datei "jquery.backstretch.js", die Du von der Demoseite herunterladen kannst und ändere in Zeile 170 den Wert wie folgt ab: "rootHeight = 500" (Damit definierst Du eine Bildhöhe von 500px)


Zusätzlich kannst Du noch den Abstand der Bilder vom oberen Rand definieren, wenn Du in Zeile 75 den Wert für die Option "top" auf z. B. '10%' einstellst. Alternativ kannst Du hier auch einen festen Wert in px eingeben, z. B., "top: 100"


Wie gesagt, die o. a. Tipps sind "Laborwerte"
In jedem Fall müssen die Bilder im Seitenverhältnis und/oder im Ausschnitt an die neuen Bedingungen angepasst werden.

Da die mitgelieferten JS Bibliotheken genug Spielraum für eigene Experimente bieten, kannst Du Dich am kommenden WE nach Herzenslust darin austoben.

[...] Wie lässt sich das hinkriegen, so dass das Bild nicht unscharf wird, wenn es auf einem "großen" Display zu sehen ist. [...]

Das lässt sich nur vermeiden, wenn Du die Auflösung des Bilds so hoch wählst, dass es auch in stärkerer Vergrößerung noch die gewünschte Schärfe behält.

Nachteil: Die Ladezeiten können dann schnell so hoch werden, das der ein- oder andere (Smartphone) Besucher Deiner Site lieber den "Exit" Button benutzt.

Viel Erfolg und ein schönes WE

Zuletzt geändert von BeRo am 07.11.2014, 23:23, 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... 🤓

SteHoy schrieb am 03.12.2014 um 14:55 Uhr

Hallo BeRo,

ich verzweifle: Ich versuche mit dem Editor (windows 8.1) die JS Datei "jquery.backstretch.js" zu öffnen: Sie lässt sich aber nichht öffenen und ich bekomme immer folgeden Fehlermeldung:

Ws läuft hier falsc? Hast Du eine Ajnung / einen Tipp?

Gruß

Stefan

BeRo schrieb am 03.12.2014 um 18:02 Uhr

[...] die JS Datei "jquery.backstretch.js" [...] lässt sich aber nichht öffenen [...]

Scheinbar versucht Windows die Script Datei mit dem Windows Script Host zu öffnen. Dass das nicht geht, hast Du gesehen...

Lade Dir mal hier den kostenfreien Editor "Notepad++" herunter. Damit hast Du ein Universalprogramm für alle erdenklichen Aufgaben, die im Zusammenhang mit Text basierten Dateien auftreten können.

Die Zuweisung der Dateiendungen erfolgt bei der Installation des Progs automatisch. Nach erfolgter Installation sollte also ein Doppelklick auf die JS Datei genügen, um den Inhalt im Editor anzuzeigen...

Viel Erfolg

Zuletzt geändert von BeRo am 03.12.2014, 22:07, insgesamt 2-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... 🤓

SteHoy schrieb am 03.12.2014 um 20:18 Uhr

Hallo BeRo,

vielen Dank für Deinen Tipp; werde ihn schnellstmöglich versuchen umzusetzen. ABER noch etwas: Wohin packe ich den Code eigentlich? In den BODY- oder in den HEAD-Bereich? Bzw. welches Codes kommen in den Body und welche in den Head??

Nachtrag:

Wenn ich den Code geöffnet und geändert habe ... wohin packe ich diesen dann? Die JS Datei ist doch etwas anderes als der JS Code über den Du am Anfang dieses Threads berichtet hast, oder? Diesen ersten JS Code packe ich einfach in den Body, richtig?

gruß

Stefan

SteHoy schrieb am 03.12.2014 um 21:41 Uhr

Nachtrag zu mienm Post von 20:18h:

Wenn ich den Code geöffnet und geändert habe ... wohin packe ich diesen dann? Die JS Datei ist doch etwas anderes als der JS Code über den Du am Anfang dieses Threads berichtet hast, oder? Diesen ersten JS Code packe ich einfach in den Body, richtig?

 

gruß

Stefan

BeRo schrieb am 03.12.2014 um 21:42 Uhr

[...] Wohin packe ich den Code eigentlich? In den BODY- oder in den HEAD-Bereich? [...]

Der Code gehört in den HTML Body der Seite, die die Hintergrund Slideshow zeigen soll (s. hier)

[...] Bzw. welches Codes kommen in den Body und welche in den Head? [...]

Es gibt nur einen JS Code, der in einem HTML Body untergebracht werden muss. Das ist der Code, den ich Dir in meinem ersten Antwort Posting vorgestellt habe.

Die anderen Script Codes liegen entweder in der ZIP Datei, die Du Dir von der Anbieter Seite heruntergeladen hast oder auf dem Ajax/Google Server. Im letzten Fall wird direkt darauf referenziert und Du musst nichts weiter tun.

die Script Datei "jquery.backstretch.js" (aus dem ZIP Archiv) legst Du entweder da ab, wo die "index.htm" Datei liegt, oder Du exportierst Deine fertigte Site in ein Verzeichnis Deines PC und legst die JS Datei vor dem Upload im Verzeichnis "index_htm_files" ab. In dem Fall musst Du aber vorher eine Pfadangabe im eingebundenen Code ändern.

So sieht die Originalzeile aus:

<script src="jquery.backstretch.js"></script>
 

Und so die geänderte:

<script src="index_htm_files/jquery.backstretch.js"></script>
 

Mit der nötigen Geduld sollte es jetzt klappen

Viel Erfolg

Zuletzt geändert von BeRo am 03.12.2014, 21:42, insgesamt 2-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... 🤓

SteHoy schrieb am 03.12.2014 um 21:44 Uhr

Danke!

SteHoy schrieb am 03.12.2014 um 21:54 Uhr

Hast Du eigentlichen einen Tipp für eine Seite oder Seiten mit "besonderen" Codes? Idealerweise für Menschen wie mich, die nur über sehr beschränkte Kenntnisse und Fähigkeiten verfügen.

Gruß

Stefan

BeRo schrieb am 03.12.2014 um 22:12 Uhr

[...] Hast Du eigentlichen einen Tipp für eine Seite oder Seiten mit "besonderen" Codes? [...]

Jein.

Das WWW ist voll von Informationen-, Codes-, Scriptlets-, Programminfos-, etc. Ich benutze nur eine der Suchmaschinen und jeweils einen (hoffentlich) sinnvollen Suchstring.
Der Rest ist Kleinarbeit beim Auswerten der Treffer.

Natürlich bildet sich so, im Lauf der Zeit, ein eigener Pool an Ressourcen, der, wenn er richtig organisiert angelegt wurde, in den meisten Fällen schon hilft...

Zuletzt geändert von BeRo am 03.12.2014, 22:12, 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... 🤓

JoBi schrieb am 16.11.2015 um 11:38 Uhr

Hi Zusammen...

Hat alles wunderbar funktioniert - inkl. "Manipulation" der "jquery.backstretch.js" hinsichtlich Höhe bzw. Seitenposition...

Soweit so gut - möchte das Ganze jedoch auch scrollbar machen - ist das möglich? die Slideshow scheint "fixiert" zu sein... jemand eine Idee?

Gruß

 

Nachtrag:

Ab Zeile 306 in der "jquery.backstretch.js" wird etwas von "fixed position" benannt... hat dies damit etwas zu tun? Ich finde keinen Ansatz um hier ggf Werte zu ändern?

 

 

BeRo schrieb am 16.11.2015 um 13:26 Uhr

@JoBi

[...] die Slideshow scheint "fixiert" zu sein... jemand eine Idee? [...]

Du postest hier in einem Thread, der vor einem Jahr eröffnet- und beantwortet wurde.
Außer dem Thread Ersteller @SteHoy und mir liest hier sicher kein Mensch mehr mit...

Aber um Deine Frage zu beantworten:
Ja, die Slideshow ist fixiert und nein, eine Idee wie Du das ohne Neuprogrammierung ändern kannst habe ich leider nicht.
Die JS Steuerdateien für die Slideshow wurden ja genau zu dem Zweck programmiert, um die Slideshow seitenfüllend im Hintergrund zu fixieren.

Abhängig davon, was Du mit der Slideshow bezweckst, könntest Du z. B. hier fündig werden. In den weiterführenden Links werden noch 100e, weiterer Slideshows angeboten. Klick Dich mal durch

Viel Erfolg

 

Zuletzt geändert von BeRo am 16.11.2015, 13: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... 🤓

JoBi schrieb am 21.11.2015 um 13:58 Uhr

jetz komm ich mir bissl blöd vor... aber danke!