Feed on
Posts
Comments

Twas the night before Christmas, and all through the house…

Ok, ok, I’ll spare the hackneyed rhymes and just present you with a completely new Infinite Carousel 3 for the holidays!

Unfortunately since this is a ridiculously busy time of year, I haven’t had time to throw up any demos just yet. But I will. In a few days. But in the meantime you can download the plugin and use it to your heart’s content. I did managed to cobble together some basic information about using the new version which I’m posting below.

Download

What’s New

  • Completely rewritten. Smoother, faster, tighter.
  • New options
  • Images can be linked
  • The carousel now accepts images and videos
  • New timer
  • New thumbnail options
  • Easier styling

Notes

  • Easing effects still require a separate jQuery easing plugin (I recommend http://gsgd.co.uk/sandbox/jquery/easing/), or adding easing code on your own.

Options

  • transitionSpeed – the time (in milliseconds) a transition from one item to another should take (default 800)
  • displayTime – the time (in milliseconds) an item should be displayed (default 6000)
  • displayProgressRing – a Boolean value that shows or hides the progress ring in the upper right hand of the carousel (default true)
  • progressRingColorOpacity – the color and opacity (in RGBa format) of the progress ring (default ’0,0,0,.5′)
  • progressRingBackgroundOn – a Boolean value that shows or hides the progress ring background ring (default true
  • progressRingBackgroundColorOpacity – the color and opacity (in RGBa format) of the progress ring background ring (default ’255,255,255,.5′)
  • thumbnailType – the format of the item thumbnails (default ‘none’. Possible values are: ‘buttons’, ‘images’, ‘numbers’, ‘count’, or ‘none’)
  • easeLeft – the easing method when the carousel moves to the left (default ‘linear’. To use values other than linear, either add an easing plugin or add easing code of your own)
  • easeRight – the easing method when the carousel moves to the right (default ‘linear’. To use values other than linear, either add an easing plugin or add easing code of your own)
  • imagePath – the path to the carousel’s navigation and playback control images (default ‘/js/infinitecarousel/images/’)
  • inView – the number of items to be viewable at once (default 1)
  • margin – the amount of margin to add around items (default 0)
  • advance – the number of items to advance when a user clicks the left or right navigation buttons or the carousel is on autopilot (default 1)
  • customClass – a name to be assigned to the carousel (or the carousel’s wrapper) that can be used for styling or scripting. The name will be prepended with “ic_” (default null)
  • showControls – a Boolean value that shows or hides the play/pause controls (default true)
  • autoHideCaptions – a Boolean values that hides captions between transitions ( default false)
  • autoPilot – a Boolean value that moves the carousel automatically when the page loads (default false)
  • prevNextInternal – a Boolean value that places the left/right navigation arrows inside or outside the carousel (default true)
  • internalThumbnails – a Boolean values that determines whether the thumbnails are placed inside or below the carousel (default false)
  • enableKeyboardNav – a Boolean value that enables or disables keyboard navigation. The left and right keys mimic the left and right arrows of the carousel, p pauses playback and s starts playback (default true).
  • onSlideStart – default function(){},
  • onSlideEnd – default function(){},
  • onPauseClick – default function(){},
  • onPlayClick – default function(){}

HTML

  • An unordered list should contain your items (images, videos, or a mix).
  • All items in the list must have the same dimensions which must be set
  • Images can be wrapped with links
  • Captions must be contained in paragraph tags and come after the image
  • User CSS now controls the look of the thumbnails
  • Video can have their own thumbnails by adding a longdesc attribute to them.
Ex:
    <ul id="carousel">
        <li><img width="200" height="133" alt="" src="p1.png" /><p>This is <strong>a caption</strong></p></li>
        <li><a href="http://www.google.com"><img width="200" height="133" alt="" src="p2.png" /></a></li>
        <li><a href="http://www.google.com"><img width="200" height="133" alt="" src="p3.png" /></a></li>
    </ul>

Instantiating

  • $(‘#carousel’).infiniteCarousel({});

CSS Classes

  • .ic_caption – styles the captions
  • .ic_button – styles thumbnails
  • .ic_active – styles the active thumbnail containers
  • .ic_thumbnails – styles the div that holds the thumbnails

 

	** what's new:
		* completely rewritten. smoother, faster, tighter.
		* new options
		* captions
		* links
		* images or videos
		* new timer
		* new thumbnail options
		* easier styling

10 Responses to “Infinite Carousel 3 – Now Available”

  1. Vicki says:

    I followed Jacketfabric’s YouTube tutorial on IC2 only to find out this (the only available download) is a whole new version. Just spent a couple hours trying to make this work…seems like an awesome slideshow, I’m so close….I know your busy but how about that demo? Thanks in advance!!!

  2. Zimmo says:

    Hi there,

    I have seen an older version of your carousel that has the main container with the image in the middle and then to the left and right of the screen is the other images. So lets say your viewport is 1000 pixels wide, and you have the first image in the carousel loaded on the left of that image and the right is other images within the carousel and they move when you click next etc.. hope this makes sense.

    I want to use version 3, but I cannot see an option for this, or even how to do this, can you help at all.

    It is similar to what the bbc.co.uk have on their homepage where you can see the other slides visible on the screen.

    Thanks
    Zimmo

  3. Zimmo says:

    Hi I sorted it out, I changed the overflow to visible and it works how I want. THANKS

    • Zimmo says:

      Hi again, one thing i cannot do with this now I have them visible.

      I would like to be able to have the images that are visible outside of the main viewport to have transaparancy, again like they have on the bbc.co.uk website. Can this be done easily?

  4. Zimmo says:

    Hi admin, I have managed to get the image i wanted over the viewport, but it stops the caption text being an active link.

    Is there a way that the caption text can be positioned so its not part of the image, I have seen this done with an earlier version of your script.

    So you have the images rotating, then for the caption its positioned outside of the image? if you could let me know what I should change to get this to work. Loving this script as well.

    Thanks
    Zimmo

    • admin says:

      Hmm, I don’t recall the caption not being where it is now. I have a separate drop captions plugin but that’s not integrated into before/after. I suppose to do what you’re asking for would require hacking the plugin to have the caption container below and outside the carousel.

      • Zimmo says:

        I will have a go, but still learning js and jquery etc.. so might struggle. Could you possibly point me in the direction I would need to hack within the script. Also I noticed that you cannot really have html within the caption as its based on p tags. Appreciate the support and script mind :o)

Leave a Reply

You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>