jKwicks

Sliding-Effekt

Anwendung:
Plugin im jQueryAdmin installieren und für die Seite auswählen.

HTML

<ul class="kwicks">
    <li id="kwick1">&nbsp;</li>
    <li id="kwick2">&nbsp;</li>
    <li id="kwick3">&nbsp;</li>
    <li id="kwick4">&nbsp;</li>
</ul>

Damit wird das oben angezeigte Beispiel umgesetzt.
Um eigene Bilder oder Texte zu verwenden muss die jkwicks.css des Plugins geändert werden.

Weitere Beispiele und mehr Einstellungsmöglichkeiten gibt es hier: mottie.github.io/Kwicks/
oder hier: devsmash.com/projects/kwicks

Beispiel: Vertikal

HTML

<ul class="kwicks-v">
    <li id="kwick1v">&nbsp;</li>
    <li id="kwick2v">&nbsp;</li>
    <li id="kwick3v">&nbsp;</li>
    <li id="kwick4v">&nbsp;</li>
</ul>

CSS

/*##################### Vertical #######################*/
.kwicks-v {
	/* recommended styles for kwicks ul container */
	list-style: none;
	position: relative;
	margin: 0;
	padding: 0;
	float:right;
}

.kwicks-v li{
	width: 205px;
	height: 50px;
	margin-bottom: 3px;
	
    /* do not change these */
	display: block;
	overflow: hidden;
	cursor: pointer;
	padding: 0; /*if you need padding,
 do so with an inner div (or implement your own box-model hack)*/
}

#kwick1v { background: #53b388 url('images/meet.gif'); }
#kwick2v { background: #5a69a9 url('images/kwicks.gif'); }
#kwick3v { background: #c26468 url('images/for.gif'); }
#kwick4v { background: #bf7cc7 url('images/jquery.gif'); margin-right: none; }

JS
Im Preset innerhalb des custom-Teils einfügen (damit es nicht wieder überschrieben wird).

<script>
$(document).ready(function(){
    $('.kwicks-v').kwicks({
        max : 100,
        spacing : 3,
        isVertical : true
    });
});
</script>

Anzeige durch Droplet MoreLikeThis