Fullscreen
Loading...
 
[Show/Hide Left Column]
[Show/Hide Right Column]

Print
  • World
    • No language is assigned to this page.

Infinite_carousel




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:

  1. In Tiki 5 and 6, 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. In Tiki 6 Enable JQuery UI and JQuery Infinite Carousel settings at Admin Home >Feature > Interface
  4. Enable JQuery UI and JQuery Infinite Carousel settings at Admin Home > Look & Feel > UI Effects
  5. 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.
    • #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;
      }
  6. 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:
    • {JQ()}$('#carousel').tiki("carousel");
      {JQ}

    Parameters can also be set:
    • {JQ()}$('#carousel').tiki("carousel", "", {
          displayThumbnails : false,
          textholderHeight : false});
      {JQ}

    Here is a list of all the parameters that can be set (from www.catchmyfame.com):
    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)

  7. The image syntax is added to the page 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 (created with the "TAG" wikiplugin) for the caption.
{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}


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.

Close
tipTip
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.


Subscribe to Tiki Newsletters! [toggle]

Delivered fresh to your email inbox!
Newsletter subscribe icon
Don't miss major announcements and other big news!
Contribute to Tiki

Theme: Fivealive [toggle]

Shoutbox

luci, 09:13 GMT, Mon 09 of Dec, 2013: logo updated with ®. please do ctrl+F5 refresh...
chibaguy, 06:31 GMT, Thu 16 of May, 2013: Veronica, that star has been eclipsed many times, with Tiki 11.o now soon to rise. ;-)
veronicamarsh, 08:33 GMT, Sun 12 of May, 2013: tikiwiki 2.0 is the star of this weekend. Just follow as we add it to SM dev.
chibaguy, 02:57 GMT, Thu 04 of Oct, 2012: This is a late reply, but, for the record, the Milkyway theme (following the original design) doesn't have a search form in the top bar. You can put one at the top of a side column, etc. instead.
andi6803, 12:20 GMT, Tue 18 of Oct, 2011: I use tiki 6v4 with the Milkyway theme. But it's not possible to switch on the search bar at the top bar. With other themes it works.