jKwicks
Anwendung:
Plugin im jQueryAdmin installieren und für die Seite auswählen.
HTML
<ul class="kwicks">
<li id="kwick1"> </li>
<li id="kwick2"> </li>
<li id="kwick3"> </li>
<li id="kwick4"> </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: Kwicks 2.0
Autor des Originals (aber veraltet): Kwicks 1.5.1
Beispiel: Vertikal
HTML
<ul class="kwicks-v">
<li id="kwick1v"> </li>
<li id="kwick2v"> </li>
<li id="kwick3v"> </li>
<li id="kwick4v"> </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 type="text/javascript">
jQuery(document).ready(function(){
jQuery('.kwicks-v').kwicks({
max : 100,
spacing : 3,
isVertical : true
});
});
</script>
|
|