Tutorial Magic Thumb Foto Vergrößerung mit Javascript Lightbox Effekt

Thanks to Magic Thumb for this non commercial license!

Bitte ladet Euch zunächst hier die Skripte runter: www.magictoolbox.com/magicthumb/. Ich beschreibe hier die Version 2.0.65 vom 03.04.2014.

Ihr erhaltet für die Demo-Version eine ZIP Datei

  • magicthumb-trial.zip

die Ihr mittels Doppelklickt entpackt. In dem dann entpackten Verzeichnis “magicthumb-trial” findet Ihr viele Beispiele und die beiden Verzeichnisse

  • images (mit den zu verwendenden Bildern)
  • magicthumb (mit der CSS und Javascript Datei, sowie den Grafiken der Lightbox)

Kopiert bitte Eure zu verwendenden Fotos und Miniaturen (Thumbnails) in dieses Verzeichnis “images” und kopiert dann beide Verzeichnisse, “images” und “magicthumb”, in das Verzeichnis, in dem die Seite mit dem Einbau der Bilder von NOF liegt. Das macht Ihr im Verzeichnis der “Lokalen Publizierung”, um das auch lokal testen zu können, und natürlich auch auf den Server.

Nun müsst Ihr lediglich die Verlinkungen zu der CSS und der Javascript Datei in den <Head> der Seite kopieren, achtet dabei (hier im gleichen Verzeichnis) auf die korrekte relative Pfadangabe.

> Layout markieren > Fenster “Layout-Eigenschaften” > Button “HTML” > “Zwischen Head Tags”

<!-- link to magicthumb.css file -->
<link href="magicthumb/magicthumb.css" rel="stylesheet" type="text/css" media="screen"/>
<!-- link to magicthumb.js file -->
<script src="magicthumb/magicthumb.js" type="text/javascript"></script>

Nun zieht Ihr Euch, an der Stelle wo die Bilder erscheinen sollen, ein Textfeld auf und kopiert Euch die Zeilen aus den vielen Beispielseiten heraus, die Ihr verwenden wollt. Bearbeitet die Texte und Bildangaben und fügt diese dann in den HTML-Code Editor des Textfeldes ein.

> Textfeld doppelklicken > Fenster “Text-Eigenschaften” > mittlere Button oben “Textfeld” > Button “HTML” > Code einfügen

In meinem Fall sieht das so aus:

            <p>
                <!-- define Magic Thumb with a caption from the image alt tag -->
                <a href="images/elefant-lightbox.jpg" class="MagicThumb" rel="caption-source: img:alt"><img src="images/elefant.jpg" alt="Elefant in unserem wundersch&ouml;nen Afrika. Dieser Text kommt vom Alt-Tag."/></a>
                <!-- define Magic Thumb with a caption from the image title tag -->
                <a href="images/loewe-lightbox.jpg" class="MagicThumb" rel="background-color:#223154; background-opacity:80; expand-position: bottom:0, left:0; caption-source: img:title"><img src="images/loewe.jpg" title="Papa L&ouml;we. Dieser Text kommt vom Bild-Title-Tag. Das Bild ist unten links positioniert."/></a>
                <!-- define Magic Thumb with a caption from the link title tag -->
                <a href="images/vogel1-lightbox.jpg" class="MagicThumb" rel="background-color:#000; background-opacity:70; custom-speed; slideshow-effect: expand; expand-effect: bounce; expand-speed: 2000; caption-source: a:title" title="Kleiner Vogel in Afrika. Dieser Text kommt vom Link-Title-Tag. Mit Bounce-Effekt."><img src="images/vogel1.jpg"/></a>
            </p>
            <p>
                <!-- define Magic Thumb with a caption from the external div -->
                <a href="images/palmen.jpg" class="MagicThumb" rel="background-color:#000; background-opacity:60; keep-thumbnail: true; expand-trigger: mouseover; caption-source:#ex-caption; caption-position:right; caption-width:240"><img src="images/palmen-thumb.png" title="Bild mit Caption"/></a>
            </p>
            <div id="ex-caption" class="MagicThumb-external-caption">
                <h2>Caption</h2>
                <p>Dieses Bild ist von <a href="http://bilder.n3po.com/" target="_blank">bilder.n3po.com</a></p>
                <p>Dieses Caption ist rechts vom Bild platziert. Man kann es auch links platzieren. Die Box &ouml;ffnet bei Mouseover.</p>
                <p>Der Inhalt kommt von einem DIV, sodass man den Inhalt formatieren kann wie man will</p>
                <ol>
                    <li>Hier kann man Listen platzieren.</li>
                    <li>Hier kann man andere Formate verwenden.</li>
                    <li>Hier wird der Hintergrund abgedunkelt.</li>
                    <li>Sogar zus&auml;tzliche Bilder</li>
                </ol>
                <p align="center"><img src="images/winken.gif" title="Huhu" /></p>
                <p>Das DIV bleibt versteckt, bis das Foto vergr&ouml;&szlig;ert und die Class &quot;MagicThumb-external-caption&quot; aufgerufen wird. Ohne diese Class, w&uuml;rde das DIV direkt auf der Seite erscheinen.</p>
                <p>Fragen bitte bei uns im <a href="http://www.nof-schule.de/forum/" target="_blank">NOF-Forum</a> stellen.</p>
            </div>

Guckt Euch die vielen Parameter der Boxen an: www.magictoolbox.com/magicthumb/integration/#parameters

Es gibt auch einen Wizard, mit dem Ihr die unterschiedlichen Effekte selbst zusammenstellen könnt.

Viel Spaß!

Tutorials von Thomas Frei-Herrmann

diese Seite weiter empfehlen


Counter Statistik