Candii Clouds download
Club Card download
absE download
Andreas08 download
Andreas09 download
Eatlon download
Faulkner download
Green Blog download
Dark Shine download
Fluid Index download
Judy (Drupal default theme, Garland) download
Milky Way (Joomla default theme) download
Smooth download
Snow download
Tikipedia Download
Underground download
Twist download
This uses the Infinite Carousel script for JQuery. See http://www.catchmyfame.com/2009/08/27/jquery-infinite-carousel-plugin-1-2-released/. When Tiki 5 was released, this script was included as part of the Tiki package. Until then, it had to be downloaded and installed separately.
To make the carousel, there are several steps:
#carousel ul { list-style: none; width: 7600px; margin: 0; padding: 0; position: relative; } #carousel li { display:inline; float:left; background-image: none; padding-left: 0; }
{JQ()}$jq(function(){ $jq('#carousel').infiniteCarousel(); });{JQ}
{JQ()}$jq(function(){ $jq('#carousel').infiniteCarousel({ displayThumbnails : 0, textholderHeight : 0, }); });{JQ}
Parameter | Description |
---|---|
transitionSpeed | the time (in milliseconds) it will take to transition between two images (default 1500) |
displayTime | the time (in milliseconds) to display each image (default: 6000) |
textholderHeight | the height of the caption. This is a fraction of the height of the images. (default: .2) |
displayProgressBar | Whether or not to display the progress bar (default: 1) |
displayThumbnails | Whether or not to display the thumbnails for the carousel. (default: 1) |
displayThumbnailNumbers | Whether or not to automatically place numbers in the thumbnail boxes. (default: 1) |
displayThumbnailBackground | Whether or not to use the corresponding image as the background for a thumbnail box. (default: 1) |
thumbnailWidth | the width of each thumbnail box. (default: ’20px’) |
thumbnailHeight | the height of each thumbnail box. (default: ’20px’) |
thumbnailFontSize | the font size of the number within the thumbnail box. (default: .7em) |
{* Infinite carousel start *} {if $page eq 'Infinite_carousel' or $page eq 'HomePage' or $page eq 'Tiki 3 Themes'} <script type="text/javascript" src="lib/jquery/infiniteCarousel/jquery.infinitecarousel.js"></script> {literal} <script type="text/javascript"> $jq(function(){ $jq('#carousel').infiniteCarousel(); }); </script> <style type="text/css"> #carousel ul { list-style: none; width: 7600px; margin: 0; padding: 0; position: relative; } #carousel li { display:inline; float:left; background-image: none; padding-left: 0; } </style> {/literal} {/if}
Then the wiki page needs something like the following. Note that there is a div with the id "carousel", and an unordered list containing the image and a paragraph for the caption.
{DIV(id=>carousel)} * {IMG(src="http://themes.tiki.org/tiki-download_file.php?fileId=85&display",alt="CandiiClouds",height="265px",width="380px")}{IMG}{TAG(tag=>p)}__Candii Clouds__ [http://themes.tiki.org/tiki-directory_redirect.php?siteId=66|download]{TAG} * {IMG(src="http://themes.tiki.org/tiki-download_file.php?fileId=86&display",alt="Club Card",height="265px",width="380px")}{IMG}{TAG(tag=>p)}__Club Card__ [http://themes.tiki.org/tiki-directory_redirect.php?siteId=80|download]{TAG} * {IMG(src="http://themes.tiki.org/tiki-download_file.php?fileId=87&display",alt="absE",height="265px",width="380px")}{IMG}{TAG(tag=>p)}__absE__ [http://themes.tiki.org/tiki-directory_redirect.php?siteId=63|download]{TAG}{DIV}
The procedures described above are for Tiki 4 and Tiki 5. For Tiki 3, there is no Look and Feel "html head" custom code textarea, so templates/header.tpl would have to be edited to add the script.