Slider soll bei Seitenwechsel nicht neu starten

[Uwe367]

Hallo zusammen,

Ich bin gerade dabei lokal eine neue Seite aufzubauen und möchte den fotorama-slider http://fotorama.io/ als Bildslider für den Header verwenden. Jedoch sollte das ganze so aussehen, daß der Slider bei einem Seitenwechsel nicht mit dem ersten Bild neu startet, sondern, wenn die Unterseite geöffnet ist, an der Position weiter läuft, an der der Klick zum Seitenwechsel durchfgeführt wurde.
Ich hab mal ein wenig gegoogelt und das muß wohl mittels eines Cookies gelöst werden welches die Postion des Sliders beim Seitenwechsel speichert.
Ok... jquery Cookie Plugin https://github.com/carhartl/jquery-cookie gibts ja nun auch, aber wie bekomme ich die beiden miteinander verknüpft so daß das gewünschte Ergebnis erzielt wird?

Vielleicht hat ja jemand eine Idee oder sowas in der Art schonmal realisiert. Ich würd mich über Hilfe freuen

Gruß
Uwe

[kukki]

Wenn ich eine solche Lösung anstreben würde, fiele mir sofort ein, diesen Slider "außerhalb" von phpWCMS laufen zu lassen, damit slidert das Teil unbehelligt, und slidert und slidert und slidert und slidert und .... erfordert ein wenig Anpassung im Layout im Headerbereich bzw. im body: Stichwort "doppelter Hintergrund". Wenn ein doppelter grafischer Hintergrund geht, warum dann nicht auch ein Slider da hineinpacken - wäre also möglich - mit einfacheren Boardmitteln

[update]

sag an!

[nameless1]

Jedoch sollte das ganze so aussehen, daß der Slider bei einem Seitenwechsel nicht mit dem ersten Bild neu startet, sondern, wenn die Unterseite geöffnet ist, an der Position weiter läuft, an der der Klick zum Seitenwechsel durchfgeführt wurde.

schau dir mal pjax an. einfach in der anwendung und sollte sich perfekt für deine anforderung eignen. die verwendung eines cookies ist hier mit kanonen auf spatzen schießen. pjax lädt nur den von dir definierten bereich einer seite neu und ändert dazu oben die url damit auch die vor und zurück funktionalität des browsers greift.

wir könnten dir das grundprinzip fix in phpwcms bauen und du mußt es nur noch stylen -> pm

[kukki]

Ich hatte mir auch schon mal solche "Spielereien" - allerdings eher auf CSS-Basis - angesehen, und wieder verworfen, weil mir persönlich zu aufdringlich.
Anbei eine Linklinste aus meinen Favoriten:

• http://css-tricks.com/slider-with-sliding-backgrounds/
• http://digitalnative.me/tutorial/vollbi ... show-css3/
• http://tympanus.net/Blueprints/BackgroundSlideshow/
• http://srobbin.com/jquery-plugins/backstretch/
• http://rewish.github.io/jquery-bgswitcher/
• http://www.seanmccambridge.com/tubular/

[Oliver Georgi]

Cookie ist hier die praktikabelste Lösung. Geringster Aufwand.

Dafür nutzt Du Fotoramas Event Listeners: fotorama:show oder fotorama:showend

Ich weiß nicht, wie Du Fotorama aufrufst, Du musst es dann aber manuell tun (an data-auto="false" denken). Das Grundprinzip mit Cookie ist dann:

Code: Select all

$(function() {
    var fotoramaCookieName = 'fotoramaslide';
    var fotoramaSlide = $.cookie(fotoramaCookieName);
    var fotoramaOptions = {
        // Fill in your default options here
    };
    if(fotoramaSlide !== 'undefined') {
        fotoramaOptions.startindex = parseInt(fotoramaSlide,10);
    }
    $('.fotorama').on(
        'fotorama:show', 
        function() {
            $.cookie(fotoramaCookieName, fotorama.activeFrame);
        }
    ).fotorama(fotoramaOptions);
});

[Uwe367]

Hallo Oliver,
Besten Dank für diesem Lösungsansatz.
Ich rufe den Slider im Haupttemplate im Adminbereich unter Vorlage folgendermaßen auf:

Code: Select all

<div id="header"><div class="fotorama" style="float: left; margin-left: 0;" data-width="1024" data-height="319" data-nav="false" data-autoplay="true" data-arrows="false" data-transition="crossfade" data-transitionduration="3000" data-stopautoplayontouch="false">
  <img src="images/1.jpg">
  <img src="images/2.jpg">
  <img src="images/3.jpg">
  <img src="images/4.jpg">
  <img src="images/5.jpg">
  <img src="images/6.jpg">
</div>

Den Slider baue ich absichtlich auf diese Weise (also manuell ohne CP und ohne Template) ein damit später keiner der Redakteure darin rumwurschtelt.

[Oliver Georgi]

Nun ja, die data-options packst Du in die Default Options von fotoramaOptions. Zum Rest sage ich mal nix, Style-Attribut und Klasse, float left im Header — muss ich nicht verstehen.

[Uwe367]

Zum Rest sage ich mal nix, Style-Attribut und Klasse, float left im Header — muss ich nicht verstehen.

Sind noch ein paar Artefakte aus den Versuchen den Slider richitg einzubauen. Wird in der finalen Version nur noch über eine CSS Klasse ohne Style Attribut laufen
Danke dir für deine Hilfe

[Uwe367]

Bin heute erst wieder dazu gekommen das ganze auszuorbieren und da scheiterts wieder mal an meinen mangelnden Kenntnissen

Egal auf welche Weise ich auch versuche die data-options hier einzutragen,

Code: Select all

var fotoramaOptions = {
// Fill in your default options here
 };

es wird ein Codefehler ausgegeben und somit kann die ganze Sache nicht funktionieren.
Leider hat auch Tante Google keinen richtigen Hinweis, jedenfalls hab ich keinen gefunden.

Würde sich jemand erbarmen und mir vielleicht noch ein kurzes Beispiel für die richtige Schreibweise geben?
Ich weiß.... ich bin ein schwieriger Fall...

[update]

wo trägst Du das denn ein?

[Uwe367]

Dieses...

Code: Select all

data-width="1024" data-height="319" data-nav="false" data-autoplay="true" data-arrows="false" data-transition="crossfade" data-transitionduration="3000" data-stopautoplayontouch="false"

soll da rein, also dort wo derzeit "// Fill in your default options here" steht

Code: Select all

var fotoramaOptions = {
// Fill in your default options here
 };

aber irgendwie schnalle ich das mit der richtigen Schreibweise nicht....

[update]

Das sollte doch im Prinzip so gehen:

Code: Select all

var fotoramaOptions = {
// Fill in your default options here
width: 800,
nav: false,
arrow: false,
transition: 'crossfade',
stopautoplayontouch: false
 };

[Oliver Georgi]

Je oh je, schon mal was von JSON Schreibweise gehört?

Code: Select all

jsonObject = {
    key: 'value',
    'key': 'value',  // wenn unsicher, alles als String, außer Bool, Object, Function, Array
    keyBoolTrue: true,
    keyBoolFalse: false,
    keyNull: null,
    keyInt: 1234,
    keyFloat: 1.234,
    keyFunction: function(){},
    keyObject: {foo:true},
    keyArray: [1,2,3,'a','b','c']
}

Also

Code: Select all

// data-width="1024" data-height="319" data-nav="false" data-autoplay="true" data-arrows="false" data-transition="crossfade" data-transitionduration="3000" data-stopautoplayontouch="false"
// UND NICHT vergessen data-auto="false"
var fotoramaOptions = {
    width: 1024,
    height: 319,
    autoplay: true,
    nav: false,
    arrow: false,
    transition: 'crossfade',
    stopautoplayontouch: false,
    transitionduration: 3000
};

Und Dokumentation lesen, kommt immer gut? http://fotorama.io/customize/options/

[Uwe367]

Je oh je, schon mal was von JSON Schreibweise gehört?

Ja ich weiß... Bin halt ein schwieriger Fall., traue mich ja schon fast gar nicht mehr zu schreiben weils mir selbst peinlich ist
In der Doku hatte ich zwar gelesen, aber das hatte ich wohl übersehen und nein.. JSON Schreibweise sagte mir bisher noch nichts.


Trotzdem danke euch beiden.