Einen Effekt in einer Bildershow verändern?

[Webhufi]

Hallo, hier bin ich mal wieder mit einer ungewöhnlichen Angelegenheit...

Auf dieser Seite seht ihr einen herrlichen Effekt in einer Bildershow, der für mich leider nur einen Wunsch nicht erfüllt: ich kann die Show nicht nach belieben anhalten und weiter laufen lassen.

Wäre so etwas machbar?

Viele Grüße und schöne Weihnachten!

Norbert

 

[Sempervivum]

Dies funktioniert wenn ich es an das Ende des Body stelle:

    <script>
        // Slider bereit stellen
        const slider = $z('.zp13slider-container');
        // Slider wird initialisiert beim Laden des ersten Bildes
        // daher muessen wir ebenfalls bis zu diesem Event warten
        slider.find('li img').first().one("load", function () {
            // Pause-Button erzeugen
            const pauseBtn = $z('<button>Pause</button>');
            // Beim Klick wird der Slider pausiert
            pauseBtn.on('click', () => {
                slider.flexslider("pause") //Pause slideshow
            });
            // Pause-Button zum Container des Slidders hinzu fuegen
            slider.append($z(pauseBtn));

            // Die selbe Prozedur fuer den Play-Button
            const playBtn = $z('<button>Play</button>');
            playBtn.on('click', () => {
                slider.flexslider("play") //Continue slideshow
            });
            slider.append($z(playBtn));
        });
    </script>

Das kann man dann noch etwas verschönern, indem man die bekannten Symbole verwendet und die Buttons innerhalb des Containers positioniert, so wie die Bullets. Aber versuche zunächst ob es so auch bei dir funktioniert.
Leider wirkt die Pause-Funktion erst, wenn die Animation beendet ist und die Play-Funktion mit Verzögerung.

 

[Webhufi]

@basti

Die Codes aus #9 funktionieren nicht; ich weiß nicht, wie ich den Code verändern muss. Vielleicht in der Art?:
<script>
slider.flexslider(pausePlay:true),
pauseText:'PAUSE',
playText:'PLAY',
</script>

Ach ja: wie schalte ich den Alert ab? Hab einiges probiert...
Ja ich weiß, das alles ist recht unglücklich, aber es soll ja nur diese eine Seite blockiert werden, für "Nichtwisser", die mal schnell was Schönes klauen wollen.
Einen netten Satz habe ich bei Heise gefunden
>>Einige Websites binden Bilder auf eine Weise ein, dass bei einem Rechtsklick nur das Kontextmenü der Seite erscheint, nicht das der Grafik.>> Wie das geht, wird aber nicht gezeigt...

@Sempervivum

Es tut sich nichts; außer dass der Effekt jetzt etwas ruckartig läuft; intern geht es flüssig. Die nervige Automatik habe ich ausgeschaltet, die Bilder verkleinert.
Möglicherweise liegt es daran, dass ich kein Script an eine bestimmte Stelle plazieren kann. Es gibt nur eine Input-Box, in die ich alle möglichen Dinge einfügen kann.

In
const slider = $z('.zp13slider-container');
habe ich zp13 auf zp15 geändert (aktuelle Version). Bei beiden geht es jedoch nicht. Wieso muss der Slider überhaupt bereit gestellt werden? Er ist doch schon da! Müsste man ihn im Script nicht einfach nur ansprechen? *grübel

Wäre es tätsächlich nicht einfacher, die Codes aus #9 zu verwenden?

Die Page jetzt:

 

[Sempervivum]

Wieso muss der Slider überhaupt bereit gestellt werden? Er ist doch schon da! Müsste man ihn im Script nicht einfach nur ansprechen?

Selbstverständlich ist der Slider schon da, genauer hätte ich schreiben müssen: "Eine Variable mit dem Container des vorhandenen Sliders bereit stellen"

Wäre es tätsächlich nicht einfacher, die Codes aus #9 zu verwenden?

Genau das habe ich in dem Code aus #11 getan. 1-zu-1 kann man diese Codes nicht verwenden, es müssen ja auch die Buttons da sein und die Selektoren müssen passen.

Ich sehe mir das jetzt mal online an, voraus gesetzt, Du hast den Code drin ...

 

[Sempervivum]

... wie ich sehe ist der Code drin. Dir ist nur leider beim Deaktivieren der Rechtsklicksperre ein Fehler unterlaufen: Die öffnende Klammer muss aktiv bleiben, damit Du eine leere Funktion bekommst:

function disableclick()
{
  //if(event.button==2)
   //{
     //alert("Right Click Disabled");
     return true;  
  //}
}

 

[Webhufi]

Okay, das hätte selbst ich bemerken müssen... :-( Danke!

Das erklärt aber nicht, warum dein Code aus #11 nicht läuft Mach dir aber nicht zu viel Arbeit damit! Es hat schon noch ein wenig Zeit.

 

[basti1012]

>>Einige Websites binden Bilder auf eine Weise ein, dass bei einem Rechtsklick nur das Kontextmenü der Seite erscheint, nicht das der Grafik.>> Wie das geht, wird aber nicht gezeigt...

Du könntest den Rechtsklick auf Bilder deaktivieren.
Das Contextmenü ist überall aktiviert, nur über die Bilder nicht.

Du könntest auch ein eigenes Menü erstellen.
Bringt aber auch nicht viel weil jeder Browser hat da andere Menü Punkte oder Menüpunte die durch Addons dazu erstellt werden.

Du könntest den Dieb auch ver.....
Du legst ein transparentes Bild über das echte.Dann läd er erstmal das falsche runter ( schützt aber auch nicht wenn man das echte haben will ).

Einige hochauflösende Bilder werden ja gerne gestohlen für Kalender,Bücher oder sonst was.
Wenn du die Qualität deiner Bilder soweit verschlechterst das die für solche sachen nicht mehr Interesant sind , könntest du vileiecht schon einig Diebe vertreiben.

Wenn es mal wirklich bis zu einer urheber Klage kommen sollte , erkundige dich vorher wie man die EXIF Angaben erstellt( ich glaube da kann man auch irgendwas mit Copyright reinschreiben, erkundige dich da bei einen der sich damit besser auskennt).

Wegen der Anfangsfrage:
Rechts klick über den Bilder deaktivieren sollte so klappen

img_ele=document.querySelectorAll('img');
img_ele.forEach(function(el){
     el.addEventListener('contextmenu',function(ev){
           ev.preventDefault();
     })
})

 

[Webhufi]

Beide Scripts gehen nicht, weder auf der Testseite noch auf der Haupseite ...

 

[Sempervivum]

Das Div des Sliders hat die Klasse zp13...

<div class="zp13slider-container">

im Skript steht jedoch zp15...

const slider = $z('.zp15slider-container');

 

[basti1012]

Ich hoffe du blickst da durch welcher Beitrag ( Code ) vom wem wo hingehört ?
Zwei verschiedene Themen die auf einmal bearbeitet werden ist ja auch nicht so einfach.

Du hast das Rechtsklick Script nur auf einer Seite eingebunden .
Ändere das mal so

<script>
//Bilderdownload verhindern
document.addEventListener("DOMContentLoaded", function(event) {
     img_ele=document.querySelectorAll('img');
     img_ele.forEach(function(el){
          el.addEventListener('contextmenu',function(ev){
               ev.preventDefault();
          })
     })
})
</script>

dann soltte es laufen.

Das Script sucht ja nach img Elemente, die im head ja noch gar nicht da sind.
Man könnte das Script auch am Ende der Seite kopieren was auch klappen könnte.
Da es bei dir im head bleibt benutzen wird DOMContentLoadet.
Kurz gesagt: Das Script sucht erst die img Elemente wenn der HTML Code fertig geladen ist.

Komisch ist es auch das ich kein Fehler in der Console bekomme

 

[Webhufi]

@basti

Ja, ich habe beide Codes auf beiden Seiten probiert. Deinen habe ich nun auf die Hauptseite eingebunden; er funktioniert! Das sieht so wesentlich besser aus... DANKESCHÖN!
Das sollte fürs erste die normalen User verwundern ;-) Fast unsichtbares Wasserzeichen mit Hinweis darauf ist dann der nächste Schritt.
Ach ja: danke auch für die Erklärungen dazu!