This uses the Infinite Carousel script for JQuery. See http://www.catchmyfame.com/2009/12/30/huge-updates-to-jquery-infinite-carousel-version-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:
-
In Tiki 5 and 6, Infinite Carousel is included as part of the Tiki package, so there is no need to install the script.
-
No modification of code is needed.
-
In Tiki 6 Enable JQuery UI and JQuery Infinite Carousel settings at Admin Home >Feature > Interface
-
Enable JQuery UI and JQuery Infinite Carousel settings at Admin Home > Look & Feel > UI Effects
-
The necessary CSS still needs to go in the L&F custom html head content, OR it can go in Admin Home > Look & Feel > Miscellaneous > Custom CSS. Example:
- width: 7600px has to be the sum of all widths from all images to be displayed in the infinite carousel.
- Copy to clipboard#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; }
-
The initialization script can go in a JQ plugin in the wiki page, before the image divs or at Admin Home > Look & Feel > Miscellaneous > Custom JS. Example:
- Copy to clipboard{JQ()}$('#carousel').tiki("carousel"); {JQ}
Parameters can also be set:
- Copy to clipboard{JQ()}$('#carousel').tiki("carousel", "", { displayThumbnails : false, textholderHeight : false}); {JQ}
Here is a list of all the parameters that can be set (from www.catchmyfame.com):
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) -
- The image syntax is added to the page as described below.
- In Tiki 4, get the script jquery.infinitecarousel.js from the above address.
- modify it by changing all instances of "$" in the file to "$jq". This is because JQuery in Tiki is running in compatibility mode.
- Upload it to your server.
- To initialize the script for use on particular pages, put something like the following in the Look and Feel head custom code. There is an if/then statement that indicates what page the carousel is used on, a link to jquery.infinitecarousel.js, the initialization of the script, and some CSS needed for the carousel div and li items.
{* 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 (created with the "TAG" wikiplugin) 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}{DIV(type=>p)}__Candii Clouds__ [http://themes.tiki.org/tiki-directory_redirect.php?siteId=66|download]{DIV} * {IMG(src="http://themes.tiki.org/tiki-download_file.php?fileId=86&display",alt="Club Card",height="265px",width="380px")}{IMG}{DIV(type=>p)}__Club Card__ [http://themes.tiki.org/tiki-directory_redirect.php?siteId=80|download]{DIV} * {IMG(src="http://themes.tiki.org/tiki-download_file.php?fileId=87&display",alt="absE",height="265px",width="380px")}{IMG}{DIV(type=>p)}__absE__ [http://themes.tiki.org/tiki-directory_redirect.php?siteId=63|download]{DIV} {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.