History: Infinite_carousel
Preview of version: 17
-
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:
- In Tiki 5, 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.
- 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:
- 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()}$jq(function(){ $jq('#carousel').infiniteCarousel(); });{JQ}
-
- The image syntax is added to the page as in Tiki 4 version, 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 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}
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.