History: Infinite_carousel
Preview of version: 3
-
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 is released, this script will be included as part of the Tiki package. Until then, it will have to be downloaded and installed separately.
To make the carousel, there are several steps:
- 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 and 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 for the caption.
{DIV(id=>carousel)} * {IMG(src="http://themes.tikiwiki.org/tiki-download_file.php?fileId=85&display",alt="CandiiClouds",height="265px",width="380px")}{IMG}{TAG(tag=>p)}__Candii Clouds__ [http://themes.tikiwiki.org/tiki-directory_redirect.php?siteId=66|download]{TAG} * {IMG(src="http://themes.tikiwiki.org/tiki-download_file.php?fileId=86&display",alt="Club Card",height="265px",width="380px")}{IMG}{TAG(tag=>p)}__Club Card__ [http://themes.tikiwiki.org/tiki-directory_redirect.php?siteId=80|download]{TAG} * {IMG(src="http://themes.tikiwiki.org/tiki-download_file.php?fileId=87&display",alt="absE",height="265px",width="380px")}{IMG}{TAG(tag=>p)}__absE__ [http://themes.tikiwiki.org/tiki-directory_redirect.php?siteId=63|download]{TAG}{DIV}
This is the procedure for Tiki 4. For Tiki 3, there is no Look and Feel "html head" custom code textarea, so templates/header.tpl would have to be edited.
In Tiki 5, as mentioned, the script will come with Tiki, so the procedure will be easier.