Logo

jQuery jCarousel Lite mit hübschen Bildunterschriften, die bei Rollover erscheinen

Kategorie:
Erstellt am: 10. Januar

Kreisförmige Reihe von scrollenden Thumbnails sind sehr beliebt im Netz. Es ist elegant und doch einfach. Deshalb werden sie von vielen Web-Profis gerne verwendet. Wenn Sie jedoch eine andere Möglichkeit suchen, die Beschriftung der Thumbnails anzuzeigen, anstatt sie wie üblich unter den Bildern oder als Tooltip-Box darzustellen, können Sie es mit der folgenden Anleitung versuchen.

In diesem Tutorial verwenden wir jQuery, ein beliebtes JavaScript-Framework, das "jQuery jCarousel" und "jQuery Captify Plugins" miteinander kombiniert, um eine elegante und coole Art der Anzeige von Miniaturbildern und Bildunterschriften zu schaffen. Die Thumbnails können mit Hilfe der Schaltflächen "Zurück" und "Weiter" gescrollt werden, und wenn man über ein Thumbnail fährt, wird die Beschriftung oder der Titel des Thumbnails nach oben geschoben.

[tut demo=”http://www.webmousedesign.com/examples/jquery-jcarousel-lite-and-jquery-captify/” download=”http://www.webmousedesign.com/examples/jquery-jcarousel-lite-and-jquery-captify/jquery-jcarousel-lite-and-jquery-captify.zip”]

Verwendung von jQuery

Laden Sie zunächst die neueste jQuery-Version 1.3.2 herunter. Für die kreisförmig scrollenden Bilder werden wir jCarousel Lite verwenden, ein superleichtes jQuery-Plugin, das Sie auf eine Karussellfahrt mit Bildern und HTML-Inhalten mitnimmt.

Für die hübschen Bildunterschriften oder Titel, die beim Rollover der Thumbnails erscheinen, werden wir das jQuery Captify Plugin verwenden. Alle Details und die Konfiguration des Plugins finden Sie auf der Website des Autors.

Beginnen wir nun mit dem Hinzufügen der jQuery-Framework, jCarousel Lite und jQuery Captify in Ihre HTML-Datei einfügen.

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jcarousellite_1.0.1.pack.js"></script>
<script type="text/javascript" src="js/captify.tiny.js"></script>

Nachdem Sie jquery-1.3.2.min.js, jcarousellite_1.0.1.pack.js, captify.tiny.js eingebunden haben. Verpacken Sie das unten stehende JavaScript in ein Skript-Tag und setzen Sie es an den Anfang Ihres Dokuments,

<script type="text/javascript">
//jCarouselLite
$(function() {
$(".slider").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev",
sichtbar: 5
});
});

//Captify
$(document).ready(function(){
$('img.captify').captify({
// alle diese Optionen sind... optional
// Geschwindigkeit des Mouseover-Effekts
speedOver: 'schnell',
// Geschwindigkeit des Mouseout-Effekts
speedOut: 'normal',
// wie lange das Ausblenden der Beschriftung nach dem Mouseout verzögert werden soll (ms)
hideDelay: 500,
// 'fade', 'slide', 'always-on'
animation: 'slide',
// text/html, der am Anfang jeder Beschriftung stehen soll
präfix: '',
// Deckkraft der Beschriftung beim Überfahren mit der Maus
Deckkraft: '0.7',
// Name der CSS-Klasse, die auf das Beschriftungsfeld angewendet werden soll
className: 'caption-bottom',
// Position der Beschriftung (oben oder unten)
position: 'unten',
// Beschriftungsspanne % des Bildes
spanWidth: '100%'
});
});
</script>

Hier ist das HTML-Markup.

<div id="list">
<div class="prev"><img src="images/prev.jpg" alt="prev" /></div>

<div class="slider">
<ul>
<li>
<a href="#" title="Titel 1"><img src="images/1.jpg" alt="Titel 1" class="captify" /></a>
</li>
<li>
<a href="#" title="Titel 2"><img src="images/2.jpg" alt="Titel 2" class="captify" /></a>
</li>
<li>
<a href="#" title="Titel 3"><img src="images/3.jpg" alt="Titel 3" class="captify" /></a>
</li>
<li>
<a href="#" title="Titel 4"><img src="images/4.jpg" alt="Titel 4" class="captify" /></a>
</li>
<li>
<a href="#" title="Titel 5"><img src="images/5.jpg" alt="Titel 5" class="captify" /></a>
</li>
<li>
<a href="#" title="Titel 6"><img src="images/6.jpg" alt="Titel 6" class="captify" /></a>
</li>
<li>
<a href="#" title="Titel 7"><img src="images/7.jpg" alt="Titel 7" class="captify" /></a>
</li>
</ul>
</div>

<div class="next"><img src="images/next.jpg" alt="next" /></div>
</div>

Hier ist der Stil für jQuery jCarousel Lite.

/************************************************
JCAROUSEL LITE
************************************************/
#list {
Höhe:130px;
Breite:880px;
margin:30px auto;
}

.slider {
float:left;
links: -5000px;
Rand:15px;
Position:relativ;
Sichtbarkeit:hidden;
}

.slider ul {
Höhe:100px;
width:600px;
}

.slider ul li {
padding:0 20px;
}

.slider ul li img {
cursor:pointer;
Höhe:100px;
padding-top:3px;
width:120px;
}

.prev {
cursor:pointer;
float:left;
padding-top:60px;
}

.next {
cursor:pointer;
float:right;
padding-top:60px;
}

Und hier ist der Stil für jQuery Captify.

/************************************************
CAPTIFY BILDUNTERSCHRIFT
************************************************/
.beschriftung-oben, .beschriftung-unten {
background: #000000;
color: #ffffff;
cursor:default;
padding:2px;
Schriftgröße:11px;
text-align:center;
}

.caption-top {
border-width:0px;
}

.caption-bottom {
border-width:0px;
}

.caption a, .caption a {
Hintergrund:#000;
border:none;
text-decoration:none;
padding:2px;
}

.caption a:hover, .caption a:hover {
background:#202020;
}

Schlussfolgerung

Dieses Tutorial wurde mit IE6, IE7, FireFox 3 und Safari 4 getestet.

Für einen klaren Überblick und um zu sehen, wie es funktioniert, können Sie die Dateien auch herunterladen, um es auszuprobieren. Viel Spaß!

Copyright © 2022 webmousedesign.de
crossmenu