Contao: jQuery ContentSlider mit Thumbnails

jquery

Wie man GalleryView in Contao installiert

Anwendungsbeispiel auf jukemedia.de besuchen

Downloads
jquery 1.4.min.js
http://docs.jquery.com/Downloading_jQuery

jquery.easing.1.3.js
http://gsgd.co.uk/sandbox/jquery/easing/

jquery.galleryview-1.1.js

jquery.timers-1.1.2.js
http://plugins.jquery.com/node/3656/release

Css Datei s.  Quelltext Anwendungsbeispiel

3. Inhalt in Ziwschenablage kopieren.
Gehe in das Backend von TYPOlight Contao
=> Module => neues Modul anlegen => Typ: eigener html code

Code nach folgendem Muster ergänzen und einfügen:

<div id="photos" class="galleryview">
<div class="panel">
<img src="tl_files/gallery-view/bild-01.jpg" alt="xxx" />
<div class="panel-overlay">
<h2 class="titel">deine Überschrift</h2>
</div>
</div>
[ ... Liste je nach Anzahl der Bilder fortsetzen ]
<ul class="filmstrip">
	<li><img title="xxx" src="./tl_files/gallery-view/x-bild-01.jpg" alt="xxx" /></li>
[ ... Liste je nach Anzahl der Bilder fortsetzen ]</ul>
</div>

4. Ein neues Seitenlayout anlegen
Seitenleiste links => Seitenlayouts =>
Erstelle ein neues Seitenlayout oder dupliziere ein vorhandenes.

Füge eigene head-tags ein:

<script src="./plugins/jquery/js/jquery-1.4.min.js" type="text/javascript"><!--mce:0--></script>
<script src="./plugins/jquery/gallery-view/jquery.easing.1.3.js" type="text/javascript"><!--mce:1--></script>
<script src="./plugins/jquery/gallery-view/jquery.galleryview-1.1.js" type="text/javascript"><!--mce:2--></script>
<script src="./plugins/jquery/gallery-view/jquery.timers-1.1.2.js" type="text/javascript"><!--mce:3--></script>

Füge eigenen Javascript-code ein

<script type="text/javascript"><!--mce:4--></script>

Füge dem Artikel das zuvor erzeugte Modul als Inhaltselement hinzu.

6. Eigene Bilder in die Installation hochladen
Bilder für die Galerie in tl_files hochladen