Loading...
Home Page
About
Marketplace
Sample page
Wishlist at dev site
Sitemap (Categories)
Tiki Customization
Creating a theme
Converting a Bootstrap theme
Contributing, sharing or selling
Customizing icons
Tips
Template Tricks
CSS Tricks
Feature Examples
Articles
Blogs
Calendar
Forums
FAQs
Trackers
Files
Links Directory
Wiki Pages
Find
History: Infinite_carousel
View published page
Source of version: 44
(current)
{JQ()}$('#carousel').tiki("carousel"); {JQ} {HTML()}<div style="width: 380px;overflow:hidden">{HTML}{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}{HTML()}</div>{HTML} 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: {TABS(name="IC_instructions",tabs="Tiki 5&6|Tiki 4")} # 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. ** {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(wrap=>1,colors=>javascript)}{JQ()}$('#carousel').tiki("carousel"); {JQ}{CODE} + Parameters can also be set: ** {CODE(wrap=>1,colors=>javascript)}{JQ()}$('#carousel').tiki("carousel", "", { displayThumbnails : false, textholderHeight : false}); {JQ}{CODE} + Here is a list of all the parameters that can be set (from www.catchmyfame.com): + {FANCYTABLE(head=__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) {FANCYTABLE} + # 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. {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 (created with the "TAG" wikiplugin) 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}{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} {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. {REMARKSBOX(type=tip title=Tip)}''Infinite carousel works best when all images are the same dimension. If you're using images of different dimensions and find that some are getting cut off, try using the thinnest image (i.e., largest height/width ratio) as the first image. You may need to experiment to find the best image for avoiding both cutting off images and displaying more than one image at a time.''{REMARKSBOX}
Layout
Stay on this page
Default
Single Container
Classic Bootstrap
Classic Tiki (3 containers - header, middle, footer)
Tikipedia
Latest Changes
Bootstrap component sets
Included themes
Materia
Ohia
Themes
Making or Updating a Theme for Tiki 27
Updating a Theme for Tiki 26
Tiki_org_family_customizations_CSS
BookStacked
Make an SCSS-Compiled Tiki Theme
...more
Subscribe to Tiki Newsletters!
Delivered fresh to your email inbox!
Don't miss major announcements and other big news!
Site Config
Site upgraded to branch 26x
Wed 21 of Jun, 2023 09:45 GMT-0000
Site upgraded to branch 25x
Sat 12 of Nov, 2022 17:00 GMT-0000
Site upgraded to Tiki 23.x
Sat 24 of Jul, 2021 00:30 GMT-0000
Site upgraded to Tiki 20
Wed 29 of May, 2019 07:57 GMT-0000
We are now on Tiki 19.x
Fri 05 of Oct, 2018 10:02 GMT-0000
Shoutbox module removed
Thu 28 of Jun, 2018 07:01 GMT-0000
We are now on Tiki 18.x
Wed 02 of May, 2018 08:46 GMT-0000
Upgraded to Tiki 17.0
Wed 02 of Aug, 2017 08:19 GMT-0000
Upgraded to Tiki 15.0alpha
Tue 08 of Mar, 2016 13:34 GMT-0000