Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Making jCarousel on a rails app simple.
Ruby JavaScript
branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
generators/jcarousel_fu
images
javascripts
lib
spec
stylesheets
tasks
README.markdown
Rakefile
init.rb
install.rb
uninstall.rb

README.markdown

jCarousel_fu

Homepage: http://github.com/patricksrobertson/jcarousel_fu Author: Patrick Robertson Copyright: 2010 License: MIT License

About jCarousel

jCarousel is a plugin for jQuery that makes pretty slideshows. It operates on working with specially named div and ul tags within html.

About jCarousel_fu

jCarousel_fu is a rails plugin that creates helper methods for implementing jCarousel. It also places 95% of the configuration of the jCarousel attributes into the rails view helper. The normal use case will require 0 modification of javascript. This plugin is fully tested using rspec so you can run tests to verify it works.

Installation:

Install the plugin with the command script/plugin install git://github.com/patricksrobertson/jcarousel_fu.git Run rake jcarousel_fu:install:all This will place the javascript files, image files, and CSS files for the default jCarousel skin into the public directories. somewhere in the head of your page, put <%= include_jcarousel_fu %>

Usage:

In your view you can use the helper method jcarousel_slideshow(options={}). This creates the html necessary for a slideshow element. It accepts the following parameters:

Hash of options. The supported options as of now are: :auto_scroll=> true or time in seconds to automatically scroll by. Defaults to 3 seconds if set to true. :images=> Array of images. Will create html like this

  • :content=> Array of content. If you want to pass in more than just image paths, use this option. It takes precedence over the images option. :animation=> Integer. Time in milliseconds transition between slides. If this is longer than the auto_scroll time it starts to behave funny. Defaults to 1000ms when left out. :scroll=> Integer. # of slides to scroll by at a time. Default is 1. :visible=> Integer. # of slides visible at a time. Make sure your CSS skin container is wide enough to handle the number of slides you choose to be visible. :jcarousel_name=> String. Changes the name of the div/UL elements that jCarousel is looking for. You'll have to add your own function in application.js to cover this. I built this in if you want to have two different types of jCarousels on one page. :css_style=> String. Changes the skin used for the helper. Defaults to jcarousel-skin-tango, which is the style defined in the skin.css added to your stylesheets folder. :disable_prev=> True. When enabled with true, disables the previous button. :disable_next=> True. When enabled with true, disables the next button.

    To add external controls to your slideshow, use the helper method jcarousel_control(options={}). This creates the html necessary for an external controller. It accepts the following parameters:

    Hash of options. The supported options as of now are:
    :length=> The number of items being slideshowed through. Should just be the content/images array.size. :images=> Array of images. This will create for each item. The # of images you provide overrides anything placed in length. :content=> Array of content to link. This is just meant if you want to name the links. You could also get fancy and pass a blank space and use background images in the CSS to create buttons for external navigation this way. Content overrides both images and length.

    Examples:

    Base usage, non-auto scrolling collection of images. # View <% photos = ["image_1.jpg","image_2.jpg"] %> <%= jcarousel_slideshow :images=>photos %>

    # Creates html
    <div id="jcarousel-slides" class="jcarousel-skin-tango">
        <ul class="jcarousel-slides">
            <li><img src="/images/image_1.jpg"/></li>
            <li><img src="/images/image_2.jpg"/></li>
        </ul>
    </div>
    

    This usage scrolls the image every 3 seconds.
    # View <% photos = ["image_1.jpg","image_2.jpg"] %> <%= jcarousel_slideshow :images=>photos,:auto_scroll=>true %>

    #Creates html
    <div id="jcarousel-slides" class="jcarousel-skin-tango">
        <ul class="jcarousel-slides auto-scroll">
            <li><img src="/images/image_1.jpg"/></li>
            <li><img src="/images/image_2.jpg"/></li>
        </ul>
    </div>
    

    This usage scrolls the image every 3 seconds with an animation of 500 milliseconds. # View <% photos = ["image_1.jpg","image_2.jpg"] %> <%= jcarousel_slideshow :images=>photos,:auto_scroll=>true, :animation=>"500" %>

    #Creates html
    <div id="jcarousel-slides" class="jcarousel-skin-tango">
        <ul animation="500" class="jcarousel-slides auto-scroll">
            <li><img src="/images/image_1.jpg"/></li>
            <li><img src="/images/image_2.jpg"/></li>
        </ul>
    </div>
    

    This usage scrolls the images every 8 seconds.
    # View <% photos = ["image_1.jpg","image_2.jpg"] %> <%= jcarousel_slideshow :images=>photos,:auto_scroll=>"8" %>

    #Creates html
    <div id="jcarousel-slides" class="jcarousel-skin-tango">
        <ul auto="8" class="jcarousel-slides auto-scroll">
            <li><img src="/images/image_1.jpg"/></li>
            <li><img src="/images/image_2.jpg"/></li>
        </ul>
    </div>
    

    This usage scrolls the image every 8 seconds, and doesn't wrap the collection in image_tags.
    # View <% photos = ["image_1.jpg","image_2.jpg"] %> <%= jcarousel_slideshow :content=>photos,:auto_scroll=>"8" %>

    #Creates html
    <div id="jcarousel-slides" class="jcarousel-skin-tango">
        <ul auto="8" class="jcarousel-slides auto-scroll">
            <li>image_1.jpg</li>
            <li>image_2.jpg</li>
        </ul>
    </div>
    

    This is a basic external controller. # View <%= jcarousel_control :length=>"3" %>

    #Creates html
    <div class="jcarousel-control">
        <a carousel_link="1" href="#">1</a>
        <a carousel_link="2" href="#">2</a>     
        <a carousel_link="3" href="#">3</a>
    </div>
    

    This is an external control using thumbnails. #View <% for photo in @photos %> <% thumb_array << photo.public_filename(:thumb) %> <% photo_array << photo.public_filename %> <% end %> <%= jcarousel_control :images=> thumb_array %>

    #Creates html
    <div class="jcarousel-control">
        <a carousel_link="index" href="#"><img src="thumb.jpg" /></a>
        ...
    </div>
    

    This is an external control using content. #View <% external_content = ["jim","bob","sue"] %> <%= jcarousel_control :content=>external_content %>

    #Creates html
    <div class="jcarousel-control">
        <a carousel_link="1" href="#">jim</a>
        <a carousel_link="2" href="#">bob</a>       
        <a carousel_link="3" href="#">sue</a>       
    </div>
    

    To Do's

    • add the features I never use but other people might.

    Copyright (c) 2010 Patrick Robertson, released under the MIT license

    Something went wrong with that request. Please try again.