History: Infinite_carousel

• «
• »

            {JQ()}$jq(function(){
	$jq('#carousel').infiniteCarousel();
});{JQ}
{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}
* {IMG(src="http://themes.tiki.org/tiki-download_file.php?fileId=88&display",alt="Andreas08",height="265px",width="380px")}{IMG}{TAG(tag=>p)}__Andreas08__ [http://themes.tiki.org/tiki-directory_redirect.php?siteId=64|download]{TAG}
* {IMG(src="http://themes.tiki.org/tiki-download_file.php?fileId=89&display",alt="Andreas09",height="265px",width="380px")}{IMG}{TAG(tag=>p)}__Andreas09__ [http://themes.tiki.org/tiki-directory_redirect.php?siteId=65|download]{TAG}
* {IMG(src="http://themes.tiki.org/tiki-download_file.php?fileId=90&display",alt="Eatlon",height="265px",width="380px")}{IMG}{TAG(tag=>p)}__Eatlon__ [http://themes.tiki.org/tiki-directory_redirect.php?siteId=68|download]{TAG}
* {IMG(src="http://themes.tiki.org/tiki-download_file.php?fileId=91&display",alt="Faulkner",height="265px",width="380px")}{IMG}{TAG(tag=>p)}__Faulkner__ [http://themes.tiki.org/tiki-directory_redirect.php?siteId=69|download]{TAG}
* {IMG(src="http://themes.tiki.org/tiki-download_file.php?fileId=92&display",alt="Green Blog",height="265px",width="380px")}{IMG}{TAG(tag=>p)}__Green Blog__ [http://themes.tiki.org/tiki-directory_redirect.php?siteId=79|download]{TAG}
* {IMG(src="http://themes.tiki.org/tiki-download_file.php?fileId=93&display",alt="Dark Shine",height="265px",width="380px")}{IMG}{TAG(tag=>p)}__Dark Shine__ [http://themes.tiki.org/tiki-directory_redirect.php?siteId=67|download]{TAG}
* {IMG(src="http://themes.tiki.org/tiki-download_file.php?fileId=94&display",alt="Fluid Index",height="265px",width="380px")}{IMG}{TAG(tag=>p)}__Fluid Index__ [http://themes.tiki.org/tiki-directory_redirect.php?siteId=70|download]{TAG}
* {IMG(src="http://themes.tiki.org/tiki-download_file.php?fileId=95&display",alt="Judy",height="265px",width="380px")}{IMG}{TAG(tag=>p)}__Judy (Drupal default theme, Garland)__ [http://themes.tiki.org/tiki-directory_redirect.php?siteId=82|download]{TAG}
* {IMG(src="http://themes.tiki.org/tiki-download_file.php?fileId=98&display",alt="Milky Way",height="265px",width="380px")}{IMG}{TAG(tag=>p)}__Milky Way (Joomla default theme)__ [http://themes.tiki.org/tiki-directory_redirect.php?siteId=83|download]{TAG}
* {IMG(src="http://themes.tiki.org/tiki-download_file.php?fileId=99&display",alt="Smooth",height="265px",width="380px")}{IMG}{TAG(tag=>p)}__Smooth__ [http://themes.tiki.org/tiki-directory_redirect.php?siteId=75|download]{TAG}
* {IMG(src="http://themes.tiki.org/tiki-download_file.php?fileId=100&display",alt="Snow",height="265px",width="380px")}{IMG}{TAG(tag=>p)}__Snow__ [http://themes.tiki.org/tiki-directory_redirect.php?siteId=76|download]{TAG}
* {IMG(src="http://themes.tiki.org/tiki-download_file.php?fileId=101&display",alt="Tikipedia",height="265px",width="380px")}{IMG}{TAG(tag=>p)}__Tikipedia__ [http://themes.tiki.org/tiki-directory_redirect.php?siteId=81|Download]{TAG}
* {IMG(src="http://themes.tiki.org/tiki-download_file.php?fileId=102&display",alt="Underground",height="265px",width="380px")}{IMG}{TAG(tag=>p)}__Underground__ [http://themes.tiki.org/tiki-directory_redirect.php?siteId=78|download]{TAG}
* {IMG(src="http://themes.tiki.org/tiki-download_file.php?fileId=103&display",alt="Twist",height="265px",width="380px")}{IMG}{TAG(tag=>p)}__Twist__ [http://themes.tiki.org/tiki-directory_redirect.php?siteId=77|download]{TAG}
{DIV}

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:
{TABS(name="IC_instructions",tabs="Tiki 5|Tiki 4")}
# 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:
** {CODE()}
#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;
}
{CODE}
# 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:
** {CODE()}{JQ()}$jq(function(){
	$jq('#carousel').infiniteCarousel();
});{JQ}{CODE}
# 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.
{CODE()}
{* 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}
{CODE}
{TABS}

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.
{CODE(wrap=1)}
{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}
{CODE}

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.