Skip to content
An image carousel, or, rotating banner, for Radiant CMS sites http://www.blazingcloud.net
JavaScript Ruby
Find file
Pull request Compare This branch is 14 commits ahead of banane:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
features/support
lib
public
spec
.gitignore
LICENSE
README
Rakefile
cucumber.yml
infinite_carousel_extension.rb

README

= Carousel

A rotating banner for Radiant extensions. Based on "Infinite Carousel" by CatchMyFame.com and includes JQuery 1.4.2. Version 2.0 of Infinite Carousel.
By Blazing Cloud, Inc (http://www.blazingcloud.net)

To Install
1. In your vendor/extensions directory, enter:
git clone git@github.com:blazingcloud/radiant-carousel-extension.git infinite_carousel

2. OPTIONAL: You can copy images to a radiant public image directory by typing, in your Radiant root:
rake radiant:extensions:infinite_carousel:copy_images
Or, you can use MediaMaid to get links to your images. 
Or, you can hand-code in the links to your images.

3. (back to required steps) In your radiant root directory, enter:
rake radiant:extensions:infinite_carousel:update

4. In the Radiant Admin UI interface, use the following tags:
<r:infinite_carousel>
<r:infinite_carousel_image src="/images/infinite_carousel/1.jpg" caption="The image" />
... iterate through as many carousel images as you want.
</r:infinite_carousel>

5. Make sure the pages that carry the carousel have a layout, that includes the following links in the header (in this order):
<script type="text/javascript" src="/javascripts/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/javascripts/jquery.infinitecarousel2.js"></script>

<script type="text/javascript">
    $(function(){
        $('#infinite_carousel').infiniteCarousel({
            /****   Override defaults here  ****
             * transitionSpeed : 250,//how fast the slides move
             * displayTime : 6000, //how long before the slides move
             * autoStart: false, //set to true if you want the carousel to start by default
             * textholderHeight : .2,
             * ... more options available for override, check out jquery.infinitecarousel.js
             */
        });
    });
</script>

6. Lastly, ou must include css that gives your images height and width or this plugin will not work in webkit based browsers (safari/chrome/etc...)
<style type="text/css">

   //this is for webkit based browsers
   #infinite_carousel ul li img {
      width:500px;
      height:325px;
   }

   //do this for firefox - it will center the image in the page while it loads
   #infinite_carousel > ul {
      left: 200px;
      list-style: none outside none;
      margin: 0;
      padding: 0;
      position: relative;
      width: 9999px;
      height:325px;
   }
</style>
Something went wrong with that request. Please try again.