Infinite_carousel

errorPlugin disabled
Plugin jq cannot be executed.
$jq(function(){
$jq('#carousel').infiniteCarousel();
});


This uses the Infinite Carousel script for JQuery. See http://www.catchmyfame.com/2009/08/27/jquery-infinite-carousel-plugin-1-2-released/ (cache). 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:

Tiki 4
  1. Get the script jquery.infinitecarousel.js from the above address.
  2. modify it by changing all instances of "$" in the file to "$jq". This is because JQuery in Tiki is running in compatibility mode.
  3. Upload it to your server.
  4. 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}


Tiki 5
  1. In Tiki 5, Infinite Carousel is included as part of the Tiki package, so there is no need to install the script.
  2. No modification of code is needed.
  3. The necessary CSS still needs to go in the L&F custom html head content, OR it can go in an {HTML()}{HTML} plugin in the wiki page, before the carousel.
  4. The initialization script can go in a JQ plugin in the wiki page, before the image divs.
  5. The image syntax is added to the page as in Tiki 4 version, as described below.


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.

History