✔ Javascript Image Gallery

Status
Nicht offen für weitere Antworten.
M

Mistertom

Grünschnabel
Hallo!

Ich hatte hier eine wunderbare javascript-basierte Bildergalerie gefunden:

http://devkick.com/lab/galleria/

Nun möchte ich diese in meine Homepage einbinden. Leider kenne ich mich mit Javascript überhaupt nicht aus, hatte mich erst vor Kurzem mit CSS vertraut gemacht.

In dieser Beispiel-Gallerie( http://devkick.com/lab/galleria/demo_01.htm ) befinden sich die Thumbnails und die Navigation ("Vor und Zurück") unter dem Hauptbild. Könnt ihr mir sagen, wie ich beides über das Hauptbild bekomme? Geht das über Javascript oder ist das auch mit CSS realisierbar?

Hier einmal der Link zu der Seite auf meiner Homepage, auf der ich das einbinden wollte:
http://www.tom-lindemann.de/cartoons.html

Liebe Grüße
vom Tom
 
Hi,
Mistertom hat gesagt.:
In dieser Beispiel-Gallerie( http://devkick.com/lab/galleria/demo_01.htm ) befinden sich die Thumbnails und die Navigation ("Vor und Zurück") unter dem Hauptbild. Könnt ihr mir sagen, wie ich beides über das Hauptbild bekomme? Geht das über Javascript oder ist das auch mit CSS realisierbar?
Zum Vergrößern anklicken....
dafür mußt du lediglich den bestehenden HTML-Quelltext umstellen, also die beiden Komponenten vor der Box #main_image notieren.

Aus:
Code: 
<div class="demo">
<div id="main_image"></div>
<ul class="gallery_demo_unstyled">
    <li><img src="img/flowing-rock.jpg" alt="Flowing Rock" title="Flowing Rock Caption"></li>
    <li><img src="img/stones.jpg" alt="Stones" title="Stones - from Apple images"></li>
    <li class="active"><img src="img/grass-blades.jpg" alt="Grass Blades" title="Apple nature desktop images"></li>
    <li><img src="img/ladybug.jpg" alt="Ladybug" title="Ut rutrum, lectus eu pulvinar elementum, lacus urna vestibulum ipsum"></li>
    <li><img src="img/lightning.jpg" alt="Lightning" title="Black &amp; White"></li>
    <li><img src="img/lotus.jpg" alt="Lotus" title="Fusce quam mi, sagittis nec, adipiscing at, sodales quis"></li>
    <li><img src="img/mojave.jpg" alt="Mojave" title="Suspendisse volutpat posuere dui. Suspendisse sit amet lorem et risus faucibus pellentesque."></li>
    <li><img src="img/pier.jpg" alt="Pier" title="Proin erat nisi"></li>
    <li><img src="img/sea-mist.jpg" alt="Sea Mist" title="Caption text from title"></li>
</ul>
<p class="nav"><a href="#" onclick="$.galleria.prev(); return false;">&laquo; previous</a> | <a href="#" onclick="$.galleria.next(); return false;">next &raquo;</a></p>
</div>
wird:
Code: 
<div class="demo">
<ul class="gallery_demo_unstyled">
    <li><img src="img/flowing-rock.jpg" alt="Flowing Rock" title="Flowing Rock Caption"></li>
    <li><img src="img/stones.jpg" alt="Stones" title="Stones - from Apple images"></li>
    <li class="active"><img src="img/grass-blades.jpg" alt="Grass Blades" title="Apple nature desktop images"></li>
    <li><img src="img/ladybug.jpg" alt="Ladybug" title="Ut rutrum, lectus eu pulvinar elementum, lacus urna vestibulum ipsum"></li>
    <li><img src="img/lightning.jpg" alt="Lightning" title="Black &amp; White"></li>
    <li><img src="img/lotus.jpg" alt="Lotus" title="Fusce quam mi, sagittis nec, adipiscing at, sodales quis"></li>
    <li><img src="img/mojave.jpg" alt="Mojave" title="Suspendisse volutpat posuere dui. Suspendisse sit amet lorem et risus faucibus pellentesque."></li>
    <li><img src="img/pier.jpg" alt="Pier" title="Proin erat nisi"></li>
    <li><img src="img/sea-mist.jpg" alt="Sea Mist" title="Caption text from title"></li>
</ul>
<p class="nav"><a href="#" onclick="$.galleria.prev(); return false;">&laquo; previous</a> | <a href="#" onclick="$.galleria.next(); return false;">next &raquo;</a></p>
<div id="main_image"></div>
</div>
mfg Maik
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück