Tutorial Bildanzeige gemischt - jQuery Before/After Plugin

gefunden auf: Catch My Frame. Guckt Euch auch dieses responsive Beispiel an, das ich in Mobirise eingebaut habe.

Für dieses Skript benötigt Ihr folgende Dateien.

Ladet Euch diese Dateien durch Klick mit der rechten Maustaste an den Links unten herunter (Ziel speichern unter):

Kopiert alle Dateien nach dem Download in ein Verzeichnis, das Ihr

  • js

nennt. Kopiert nun dieses Verzeichnis js mit den Dateien im Verzeichnis “Lokale Publizierung” von Eurem Projekt (um das lokal schon sehen zu können) in das Verzeichnis in dem die Seite liegt, auf der Ihr das Skript einbauen wollt und natürlich mit dem FTP-Programm dann auch in das gleiche Verzeichnis Eures Projektes auf den Server.

Fügt nun die Verlinkungen zu den JavaScript-Dateien und die JavaScript-Funktion unten am “Beginn des Haupttextes” der Seite ein.

> Layout markieren > Fenster “Layout-Eigenschaften” > Button “HTML” > am “Beginn des Haupttextes” (<body>)

<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/jquery-ui.min.js"></script>
<script type="text/javascript" src="./js/jquery.beforeafter-1.4.min.js"></script>

<script type="text/javascript" src="./navbars.js"></script>

<script type="text/javascript">
  $(function(){
    $('#container1').beforeAfter();
    $('#container2').beforeAfter();
  });
</script>

Die jQuery-Dateien müssen also unter der jQuery-Datei von NOF eingefügt werden und die NOF-eigene Datei “navbars.js” muss unter den externen jQuery-Dateien stehen, da sonst die Navigationsleiste nicht mehr funktionieren würde. Achtet hier auf die korrekte relative Pfadangabe zur “navbars.js”.

In der Datei “jquery.beforeafter-1.4.min.js” könnt Ihr die Beschriftung für die Links

  • Nur Bild 1
  • Nur Bild 2

ändern. Öffnet die Datei zum Beispiel mit dem Windows-Editor und ändert bei Bedarf diese Beschriftung.

Für jede Bildgruppe könnt Ihr eine neue ID oben in der JavaScript-Funktion hinzufügen, die Ihr unten im <div> dann angebt. Die Bilder einer Gruppe müssen exakt die gleiche Größe haben und diese Größe muss auch mit der Breite und Höhe eingetragen sein, hier 960px breit und 305px hoch.

Lest die zu verwendenden Bilder in Eurer Assets-Verwaltung ein und verschiebt diese in das Verzeichnis in dem die Seite mit dem eingebauten Skript liegt - hier ist das gleich mein Stammverzeichnis, da ich das Skript auf der Startseite “index.html” eingebaut habe.

Zur Anzeige der Bilder zieht Ihr Euch ein Textfeld auf und fügt den DIV-Container in den HTML-Code Editor des Textfeldes ein.

> Textfeld aufziehen (Cursor blinkt) > Fenster “Text-Eigenschaften” > mittlere Button “Textfeld” > Button “HTML

        <div id="container1">
            <div><img alt="before" src="Weinlaub1.jpg" width="960" height="305" /></div>
            <div><img alt="after" src="Weinlaub2.jpg" width="960" height="305" /></div>
        </div>

... und hier der Code meiner 2. Bildgruppe mit der ID=”container2”, den ich in den HTML-Code Editor eines weiteren Textfeldes eingesetzt habe.

        <div id="container2">
            <div><img alt="before" src="FlensburgerFoerde.jpg" width="960" height="305" /></div>
            <div><img alt="after" src="FlensburgerFoerdebeiNacht.jpg" width="960" height="305" /></div>
        </div>

Für die Fortgeschrittenen unter Euch, hier noch das erweiterte Skript für die Animation der Bildgruppe vom “container1”, wobei “container2” nur eine andere Slider Grafik in einem Verzeichnis 'imagesblau' und einen anderen Cursor und “container3ohne Text-Navigation ist und ein anderes Verzeichnis 'images' für meine grauen Slider Grafiken erhalten haben.

  <script type="text/javascript">
  $(function(){
 
    $('#container1').beforeAfter({
        animateIntro:true,
        imagePath:'./js/',
        introDuration : 800,
        introPosition : .25,
        showFullLinks : true,
        beforeLinkText: 'Zeige erstes Bild',
        afterLinkText: 'Zeige zweites Bild',
        cursor: 'e-resize',
        enableKeyboard: true,
        dividerColor: '#E3E3E3'
    });
   
    $('#container2').beforeAfter({
        imagePath:'./imagesblau/',
        cursor: 'e-resize'
    });   
   
    $('#container3').beforeAfter({
        animateIntro:true,
        imagePath:'./images/',
        introDuration : 800,
        introPosition : .75,
        showFullLinks : false,
        beforeLinkText: 'keine Anzeige',
        afterLinkText: 'keine Anzeige',
        cursor: 'e-resize',
        enableKeyboard: true,
        dividerColor: '#888888'
    });
      
  });
  </script>

Viel Spaß!

Tutorials von Thomas Frei-Herrmann

diese Seite weiter empfehlen


Counter Statistik