carousel 1.0.0

data/LICENSE.txt

@@ -0,0 +1,20 @@
+Copyright (c) 2012 Tim Morgan
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,117 @@
+Carousel
+========
+
+A Ruby on Rails engine that adds an image carousel to your application.
+
+|             |                                                                                                         |
+|:------------|:--------------------------------------------------------------------------------------------------------|
+| **Author**  | Tim Morgan                                                                                              |
+| **Version** | 1.0 (Apr 20, 2012)                                                                                      |
+| **License** | Released under the MIT license. Portions released under a different license (see _Sub-Licenses_ below). |
+
+About
+-----
+
+This gem adds assets to your Rails application allowing you to display a simple
+but effective carousel of images. The carousel can be displayed horizontally or
+vertically. It uses Ajax to incrementally load images rather than loading them
+all at once.
+
+### Requirements
+
+* **Rails 3.1**: This gem uses Rails engines.
+* **jQuery**: The carousel and lightbox is rendered and managed using jQuery.
+* **Sass**: The carousel layout is written using SCSS.
+
+#### Optional
+
+* **Paperclip**: The carousel includes native support for Paperclip, but does
+  not depend on it.
+
+Installation
+------------
+
+To use this gem, add to your Gemfile:
+
+```` ruby
+gem 'carousel'
+````
+
+To your `application.css` file (or some other CSS manifest file), add:
+
+ ```` css
+ /*
+  *= require jquery.lightbox-0.5
+  *= require carousel
+  */
+ ````
+
+ To your `application.js` file (or some other JavaScript manifest file), add:
+
+ ```` javascript
+ //= require jquery.lightbox-0.5
+ //= require carousel
+ ````
+
+ You may also need to add the following if it is not already there:
+
+ ```` javascript
+ //= require jquery
+ ````
+
+Usage
+-----
+
+The carousel loads images using an Ajax action. You will need to write such an
+action that returns JSON information about the images the carousel should load
+in an "infinite scrolling" manner. The JSON should have the format shown in the
+following example:
+
+```` json
+[
+    {
+        "caption": "Parents' house from the air",
+        "id": 26,
+        "preview_url": "http://s3.amazonaws.com/flightseein/photographs/26/images/carousel-ac52ff7c1f101e9fe86b1bbe0c7e8dab.png",
+        "url": "http://s3.amazonaws.com/flightseein/photographs/26/images/original-ac52ff7c1f101e9fe86b1bbe0c7e8dab.jpeg"
+    },
+    {
+        "caption": "Mt. Diablo",
+        "id": 27,
+        "preview_url": "http://s3.amazonaws.com/flightseein/photographs/27/images/carousel-9bcf168a861a840be7cdd2914bb3e539.png",
+        "url": "http://s3.amazonaws.com/flightseein/photographs/27/images/original-9bcf168a861a840be7cdd2914bb3e539.jpeg"
+    },
+    {
+        "caption": "UC Berkeley",
+        "id": 28,
+        "preview_url": "http://s3.amazonaws.com/flightseein/photographs/28/images/carousel-663d4602da82c6b2bd0f88cd5be2da7d.png",
+        "url": "http://s3.amazonaws.com/flightseein/photographs/28/images/original-663d4602da82c6b2bd0f88cd5be2da7d.jpeg"
+    }
+]
+````
+
+All fields are required except for `caption`.
+
+Your controller should also correctly manage the infinite-scrolling feature by
+accepting a parameter `last_record`. This parameter will be the ID of the last
+photo previously loaded. You should load the next group of photos from that ID.
+What you define "ID" as, and how you order the photos, and how many photos you
+include in a batch, are all up to you.
+
+In your view, instantiate a Carousel object like so:
+
+```` javascript+erb
+$('#carousel-container').carousel("<%= photographs_url %>", 'horizontal');
+````
+
+where `$('#carousel-container')` is the jQuery-wrapped DOM element to contain
+the carousel, and `photographs_url` is the URL endpoint for the controller you
+wrote above. The second parameter can be either `horizontal` or `vertical` and
+describes the orientation of your carousel.
+
+Sub-Licenses
+------------
+
+Portions of this code were written by
+"Leandro Vieira Pinho":http://leandrovieira.com. These portions are distributed
+under the CCAttribution-Share-Alike 2.5 (Brazil) license.

data/carousel.gemspec

@@ -0,0 +1,71 @@
+# Generated by jeweler
+# DO NOT EDIT THIS FILE DIRECTLY
+# Instead, edit Jeweler::Tasks in Rakefile, and run 'rake gemspec'
+# -*- encoding: utf-8 -*-
+
+Gem::Specification.new do |s|
+  s.name = "carousel"
+  s.version = "1.0.0"
+
+  s.required_rubygems_version = Gem::Requirement.new(">= 0") if s.respond_to? :required_rubygems_version=
+  s.authors = ["Tim Morgan"]
+  s.date = "2012-04-20"
+  s.description = "Adds CoffeeScript and SCSS files to your Rails apps allowing you to easily create an Ajax-powered Carousel."
+  s.email = "rubygems@timothymorgan.info"
+  s.extra_rdoc_files = [
+    "LICENSE.txt",
+    "README.md"
+  ]
+  s.files = [
+    "LICENSE.txt",
+    "README.md",
+    "carousel.gemspec",
+    "lib/carousel.rb",
+    "lib/carousel/paperclip/round_corners.rb",
+    "vendor/assets/images/lightbox/blank.gif",
+    "vendor/assets/images/lightbox/close.gif",
+    "vendor/assets/images/lightbox/loading.gif",
+    "vendor/assets/images/lightbox/next.gif",
+    "vendor/assets/images/lightbox/prev.gif",
+    "vendor/assets/javascripts/carousel.js.coffee.erb",
+    "vendor/assets/javascripts/jquery.lightbox-0.5.js",
+    "vendor/assets/stylesheets/carousel.css.scss",
+    "vendor/assets/stylesheets/jquery.lightbox-0.5.css"
+  ]
+  s.homepage = "http://github.com/RISCfuture/carousel"
+  s.licenses = ["MIT"]
+  s.require_paths = ["lib"]
+  s.rubygems_version = "1.8.21"
+  s.summary = "Simple image carousels in your Rails apps."
+
+  if s.respond_to? :specification_version then
+    s.specification_version = 3
+
+    if Gem::Version.new(Gem::VERSION) >= Gem::Version.new('1.2.0') then
+      s.add_runtime_dependency(%q<rails>, [">= 0"])
+      s.add_runtime_dependency(%q<compass>, [">= 0"])
+      s.add_runtime_dependency(%q<jquery-rails>, [">= 0"])
+      s.add_development_dependency(%q<yard>, [">= 0"])
+      s.add_development_dependency(%q<bundler>, [">= 0"])
+      s.add_development_dependency(%q<jeweler>, [">= 0"])
+      s.add_development_dependency(%q<paperclip>, [">= 0"])
+    else
+      s.add_dependency(%q<rails>, [">= 0"])
+      s.add_dependency(%q<compass>, [">= 0"])
+      s.add_dependency(%q<jquery-rails>, [">= 0"])
+      s.add_dependency(%q<yard>, [">= 0"])
+      s.add_dependency(%q<bundler>, [">= 0"])
+      s.add_dependency(%q<jeweler>, [">= 0"])
+      s.add_dependency(%q<paperclip>, [">= 0"])
+    end
+  else
+    s.add_dependency(%q<rails>, [">= 0"])
+    s.add_dependency(%q<compass>, [">= 0"])
+    s.add_dependency(%q<jquery-rails>, [">= 0"])
+    s.add_dependency(%q<yard>, [">= 0"])
+    s.add_dependency(%q<bundler>, [">= 0"])
+    s.add_dependency(%q<jeweler>, [">= 0"])
+    s.add_dependency(%q<paperclip>, [">= 0"])
+  end
+end
+

data/lib/carousel.rb

@@ -0,0 +1,40 @@
+require 'carousel/paperclip/round_corners' if defined?(Paperclip)
+
+# Rails engine for the Carousel plug-in.
+
+class Carousel < Rails::Engine
+
+  # Returns options for the `has_attached_file` method to include a
+  # Carousel-compatible style. You can override any options as necessary using
+  # `additional`.
+  #
+  # @example Basic example with additional styles
+  #   has_attached_file Carousel.paperclip_options(
+  #     styles: {
+  #       another: '512x512'
+  #     }
+  #   )
+  #
+  # @example Overriding carousel border radius
+  #   has_attached_file Carousel.paperclip_options(
+  #     styles: { carousel: { border_radius: 5 } }
+  #   )
+  #
+  # @param [Hash] additional Additional styles or other Paperclip options to
+  #   pass to `has_attached_file`, or overrides for the options this method adds
+  #   (see the source).
+  # @return [Hash] Options to pass to `has_attached_file`.
+
+  def self.paperclip_options(additional={})
+    additional[:processors] = Array.wrap(additional[:processors])
+    additional[:processors] << :round_corners
+
+    additional[:styles]                            ||= {}
+    additional[:styles][:carousel]                 ||= {}
+    additional[:styles][:carousel][:geometry]      ||= '140x100#'
+    additional[:styles][:carousel][:format]        ||= :png
+    additional[:styles][:carousel][:border_radius] ||= 8
+
+    additional
+  end
+end

data/lib/carousel/paperclip/round_corners.rb

@@ -0,0 +1,61 @@
+module Paperclip
+
+  # Paperclip processor that uses ImageMagick to create rounded corners.
+  #
+  # Derived from https://github.com/kerinin/paperclip-rounded-corners
+
+  class RoundCorners < Paperclip::Thumbnail
+    # @private
+    def parse_opts(key)
+      opt = @options[:border_radius]
+      opt.nil? ? nil : opt.to_i
+    end
+
+    # @return [String] The ImageMagick command that rounds an image's corners.
+
+    def transformation
+      trans = " \\( +clone  -threshold -1 "
+      trans << "-draw 'fill black polygon 0,0 0,#{@radius} #{@radius},0 fill white circle #{@radius},#{@radius} #{@radius},0' "
+      trans << "\\( +clone -flip \\) -compose Multiply -composite "
+      trans << "\\( +clone -flop \\) -compose Multiply -composite "
+      trans << "\\) +matte -compose CopyOpacity -composite "
+      trans
+    end
+
+    # Performs the ImageMagick corner-roundage.
+    #
+    # @param [Paperclip::Attachment] dst The Paperclip image.
+    # @return [Paperclip::Attachment] `dst`.
+
+    def round_corners(dst)
+      command = "\"#{ File.expand_path(@thumbnail.path) }[0]\" #{ transformation } \"#{ File.expand_path(dst.path) }\""
+      Paperclip.run('convert', command)
+      dst
+    end
+
+    # @private
+    def initialize(file, options = { }, attachment = nil)
+      super file, options, attachment
+
+      @radius = options[:border_radius]
+      @process = @radius
+    end
+
+    # @private
+    def make
+      @thumbnail = super
+
+      if @process
+        @width  = Paperclip::Geometry.from_file(@thumbnail).width.to_i
+        @height = Paperclip::Geometry.from_file(@thumbnail).height.to_i
+
+        dst = Tempfile.new([@basename, @format].compact.join("."))
+        dst.binmode
+
+        return round_corners(dst)
+      else
+        return @thumbnail
+      end
+    end
+  end
+end

data/vendor/assets/javascripts/carousel.js.coffee.erb

@@ -0,0 +1,84 @@
+class Carousel
+  constructor: (@element, @url, @orientation, @options={}) ->
+    @options = $.extend({ captions: true, lightboxes: true }, @options)
+    @element.addClass "carousel-#{@orientation}"
+    @data = []
+
+    this.refresh()
+    this.setScroll()
+
+  refresh: ->
+    this.clear()
+    $.ajax @url,
+      dataType: 'json',
+      error: (xhr, status, error) =>
+        this.setError "Couldn't load photos: #{if status == 'error' then error else status}."
+      success: (data) =>
+        this.populate data
+
+  clear: ->
+    @element.find('>li').remove()
+    @data = []
+
+  populate: (data) ->
+    @data = @data.concat(data) # must clone it
+
+    if @data.length == 0
+      this.setNote "No photos yet."
+      return
+
+    $.each data, (_, photo) =>
+      li = $('<li/>').appendTo(@element)
+      fig = $('<figure/>').appendTo(li)
+      a = $('<a/>').attr(href: photo.url, title: photo.caption).appendTo(fig)
+      $('<img/>').attr('src', photo.preview_url).appendTo a
+      $('<figcaption/>').text(photo.caption).appendTo(fig) if @options['captions'] and photo.caption
+
+    if @options['lightboxes']
+      @element.find('a').lightBox
+        imageLoading: '<%= image_path "lightbox/loading.gif" %>'
+        imageBtnClose: '<%= image_path "lightbox/close.gif" %>'
+        imageBtnPrev: '<%= image_path "lightbox/prev.gif" %>'
+        imageBtnNext: '<%= image_path "lightbox/next.gif" %>'
+        imageBlank: '<%= image_path "lightbox/blank.gif" %>'
+        txtImage: ''
+
+    this.loadNextPage() if this.noScroll() and data.length > 0
+
+  setError: (error) ->
+    this.clear()
+    li = $('<li/>').addClass('center').appendTo @element
+    $('<p/>').addClass('error').text(error).appendTo li
+
+  setNote: (note) ->
+    this.clear()
+    li = $('<li/>').addClass('center').appendTo @element
+    $('<p/>').addClass('note').text(note).appendTo li
+
+  setScroll: ->
+    @element.scroll =>
+      this.loadNextPage() if this.isAtEnd()
+
+  noScroll: ->
+    switch @orientation
+      when 'horizontal' then @element.width() == @element[0].scrollWidth
+      when 'vertical' then @element.height() == @element[0].scrollHeight
+
+  isAtEnd: ->
+    switch @orientation
+      when 'horizontal' then @element.scrollLeft() == @element[0].scrollWidth - @element.width()
+      when 'vertical' then @element.scrollTop() == @element[0].scrollheight - @element.height()
+
+  loadNextPage: ->
+    return if @data.length == 0
+    $.ajax @url,
+      data: { last_record: @data[@data.length - 1].id }
+      dataType: 'json'
+      error: (xhr, status, error) =>
+        this.setError "Couldn't load photos: #{if status == 'error' then error else status}."
+      success: (data) =>
+        this.populate data
+
+$.fn.extend
+  carousel: (url, orient, options={}) ->
+    new Carousel(this, url, orient, options)

data/vendor/assets/javascripts/jquery.lightbox-0.5.js

@@ -0,0 +1,498 @@
+/**
+ * jQuery lightBox plugin
+ * This jQuery plugin was inspired and based on Lightbox 2 by Lokesh Dhakar (http://www.huddletogether.com/projects/lightbox2/)
+ * and adapted to me for use like a plugin from jQuery.
+ * @name jquery-lightbox-0.5.js
+ * @author Leandro Vieira Pinho - http://leandrovieira.com
+ * @version 0.5
+ * @date April 11, 2008
+ * @category jQuery plugin
+ * @copyright (c) 2008 Leandro Vieira Pinho (leandrovieira.com)
+ * @license CCAttribution-ShareAlike 2.5 Brazil - http://creativecommons.org/licenses/by-sa/2.5/br/deed.en_US
+ * @example Visit http://leandrovieira.com/projects/jquery/lightbox/ for more informations about this jQuery plugin
+ */
+
+// Offering a Custom Alias suport - More info: http://docs.jquery.com/Plugins/Authoring#Custom_Alias
+(function($) {
+    /**
+     * $ is an alias to jQuery object
+     *
+     */
+    $.fn.lightBox = function(settings) {
+        // Settings to configure the jQuery lightBox plugin how you like
+        settings = jQuery.extend({
+                                     // Configuration related to overlay
+                                     overlayBgColor:         '#000',        // (string) Background color to overlay; inform a hexadecimal value like: #RRGGBB. Where RR, GG, and BB are the hexadecimal values for the red, green, and blue values of the color.
+                                     overlayOpacity:            0.8,        // (integer) Opacity value to overlay; inform: 0.X. Where X are number from 0 to 9
+                                     // Configuration related to navigation
+                                     fixedNavigation:        false,        // (boolean) Boolean that informs if the navigation (next and prev button) will be fixed or not in the interface.
+                                     // Configuration related to images
+                                     imageLoading:            'images/lightbox-ico-loading.gif',        // (string) Path and the name of the loading icon
+                                     imageBtnPrev:            'images/lightbox-btn-prev.gif',            // (string) Path and the name of the prev button image
+                                     imageBtnNext:            'images/lightbox-btn-next.gif',            // (string) Path and the name of the next button image
+                                     imageBtnClose:            'images/lightbox-btn-close.gif',        // (string) Path and the name of the close btn
+                                     imageBlank:                'images/lightbox-blank.gif',            // (string) Path and the name of a blank image (one pixel)
+                                     // Configuration related to container image box
+                                     containerBorderSize:    10,            // (integer) If you adjust the padding in the CSS for the container, #lightbox-container-image-box, you will need to update this value
+                                     containerResizeSpeed:    400,        // (integer) Specify the resize duration of container image. These number are miliseconds. 400 is default.
+                                     // Configuration related to texts in caption. For example: Image 2 of 8. You can alter either "Image" and "of" texts.
+                                     txtImage:                'Image',    // (string) Specify text "Image"
+                                     txtOf:                    'of',        // (string) Specify text "of"
+                                     // Configuration related to keyboard navigation
+                                     keyToClose:                'c',        // (string) (c = close) Letter to close the jQuery lightBox interface. Beyond this letter, the letter X and the SCAPE key is used to.
+                                     keyToPrev:                'p',        // (string) (p = previous) Letter to show the previous image
+                                     keyToNext:                'n',        // (string) (n = next) Letter to show the next image.
+                                     // Don't alter these variables in any way
+                                     imageArray:                [],
+                                     activeImage:            0
+                                 }, settings);
+        // Caching the jQuery object with all elements matched
+        var jQueryMatchedObj = this; // This, in this context, refer to jQuery object
+        /**
+         * Initializing the plugin calling the start function
+         *
+         * @return boolean false
+         */
+        function _initialize() {
+            _start(this, jQueryMatchedObj); // This, in this context, refer to object (link) which the user have clicked
+            return false; // Avoid the browser following the link
+        }
+
+        /**
+         * Start the jQuery lightBox plugin
+         *
+         * @param object objClicked The object (link) whick the user have clicked
+         * @param object jQueryMatchedObj The jQuery object with all elements matched
+         */
+        function _start(objClicked, jQueryMatchedObj) {
+            // Hime some elements to avoid conflict with overlay in IE. These elements appear above the overlay.
+            $('embed, object, select').css({ 'visibility' : 'hidden' });
+            // Call the function to create the markup structure; style some elements; assign events in some elements.
+            _set_interface();
+            // Unset total images in imageArray
+            settings.imageArray.length = 0;
+            // Unset image active information
+            settings.activeImage = 0;
+            // We have an image set? Or just an image? Let's see it.
+            if (jQueryMatchedObj.length == 1) {
+                settings.imageArray.push(new Array(objClicked.getAttribute('href'), objClicked.getAttribute('title')));
+            } else {
+                // Add an Array (as many as we have), with href and title atributes, inside the Array that storage the images references
+                for (var i = 0; i < jQueryMatchedObj.length; i++) {
+                    settings.imageArray.push(new Array(jQueryMatchedObj[i].getAttribute('href'), jQueryMatchedObj[i].getAttribute('title')));
+                }
+            }
+            while (settings.imageArray[settings.activeImage][0] != objClicked.getAttribute('href')) {
+                settings.activeImage++;
+            }
+            // Call the function that prepares image exibition
+            _set_image_to_view();
+        }
+
+        /**
+         * Create the jQuery lightBox plugin interface
+         *
+         * The HTML markup will be like that:
+         <div id="jquery-overlay"></div>
+         <div id="jquery-lightbox">
+         <div id="lightbox-container-image-box">
+         <div id="lightbox-container-image">
+         <img src="../fotos/XX.jpg" id="lightbox-image">
+         <div id="lightbox-nav">
+         <a href="#" id="lightbox-nav-btnPrev"></a>
+         <a href="#" id="lightbox-nav-btnNext"></a>
+         </div>
+         <div id="lightbox-loading">
+         <a href="#" id="lightbox-loading-link">
+         <img src="../images/lightbox-ico-loading.gif">
+         </a>
+         </div>
+         </div>
+         </div>
+         <div id="lightbox-container-image-data-box">
+         <div id="lightbox-container-image-data">
+         <div id="lightbox-image-details">
+         <span id="lightbox-image-details-caption"></span>
+         <span id="lightbox-image-details-currentNumber"></span>
+         </div>
+         <div id="lightbox-secNav">
+         <a href="#" id="lightbox-secNav-btnClose">
+         <img src="../images/lightbox-btn-close.gif">
+         </a>
+         </div>
+         </div>
+         </div>
+         </div>
+         *
+         */
+        function _set_interface() {
+            // Apply the HTML markup into body tag
+            $('body').append('<div id="jquery-overlay"></div><div id="jquery-lightbox"><div id="lightbox-container-image-box"><div id="lightbox-container-image"><img id="lightbox-image"><div style="" id="lightbox-nav"><a href="#" id="lightbox-nav-btnPrev"></a><a href="#" id="lightbox-nav-btnNext"></a></div><div id="lightbox-loading"><a href="#" id="lightbox-loading-link"><img src="' + settings.imageLoading + '"></a></div></div></div><div id="lightbox-container-image-data-box"><div id="lightbox-container-image-data"><div id="lightbox-image-details"><span id="lightbox-image-details-caption"></span><span id="lightbox-image-details-currentNumber"></span></div><div id="lightbox-secNav"><a href="#" id="lightbox-secNav-btnClose"><img src="' + settings.imageBtnClose + '"></a></div></div></div></div>');
+            // Get page sizes
+            var arrPageSizes = ___getPageSize();
+            // Style overlay and show it
+            $('#jquery-overlay').css({
+                                         backgroundColor:    settings.overlayBgColor,
+                                         opacity:            settings.overlayOpacity,
+                                         width:                arrPageSizes[0],
+                                         height:                arrPageSizes[1]
+                                     }).fadeIn();
+            // Get page scroll
+            var arrPageScroll = ___getPageScroll();
+            // Calculate top and left offset for the jquery-lightbox div object and show it
+            $('#jquery-lightbox').css({
+                                          top:    arrPageScroll[1] + (arrPageSizes[3] / 10),
+                                          left:    arrPageScroll[0]
+                                      }).show();
+            // Assigning click events in elements to close overlay
+            $('#jquery-overlay,#jquery-lightbox').click(function() {
+                _finish();
+            });
+            // Assign the _finish function to lightbox-loading-link and lightbox-secNav-btnClose objects
+            $('#lightbox-loading-link,#lightbox-secNav-btnClose').click(function() {
+                _finish();
+                return false;
+            });
+            // If window was resized, calculate the new overlay dimensions
+            $(window).resize(function() {
+                // Get page sizes
+                var arrPageSizes = ___getPageSize();
+                // Style overlay and show it
+                $('#jquery-overlay').css({
+                                             width:        arrPageSizes[0],
+                                             height:        arrPageSizes[1]
+                                         });
+                // Get page scroll
+                var arrPageScroll = ___getPageScroll();
+                // Calculate top and left offset for the jquery-lightbox div object and show it
+                $('#jquery-lightbox').css({
+                                              top:    arrPageScroll[1] + (arrPageSizes[3] / 10),
+                                              left:    arrPageScroll[0]
+                                          });
+            });
+        }
+
+        /**
+         * Prepares image exibition; doing a image's preloader to calculate it's size
+         *
+         */
+        function _set_image_to_view() { // show the loading
+            // Show the loading
+            $('#lightbox-loading').show();
+            if (settings.fixedNavigation) {
+                $('#lightbox-image,#lightbox-container-image-data-box,#lightbox-image-details-currentNumber').hide();
+            } else {
+                // Hide some elements
+                $('#lightbox-image,#lightbox-nav,#lightbox-nav-btnPrev,#lightbox-nav-btnNext,#lightbox-container-image-data-box,#lightbox-image-details-currentNumber').hide();
+            }
+            // Image preload process
+            var objImagePreloader = new Image();
+            objImagePreloader.onload = function() {
+                $('#lightbox-image').attr('src', settings.imageArray[settings.activeImage][0]);
+                // Perfomance an effect in the image container resizing it
+                _resize_container_image_box(objImagePreloader.width, objImagePreloader.height);
+                //	clear onLoad, IE behaves irratically with animated gifs otherwise
+                objImagePreloader.onload = function() {};
+            };
+            objImagePreloader.src = settings.imageArray[settings.activeImage][0];
+        }
+
+        ;
+        /**
+         * Perfomance an effect in the image container resizing it
+         *
+         * @param integer intImageWidth The image's width that will be showed
+         * @param integer intImageHeight The image's height that will be showed
+         */
+        function _resize_container_image_box(intImageWidth, intImageHeight) {
+            // Get current width and height
+            var intCurrentWidth = $('#lightbox-container-image-box').width();
+            var intCurrentHeight = $('#lightbox-container-image-box').height();
+            // Get the width and height of the selected image plus the padding
+            var intWidth = (intImageWidth + (settings.containerBorderSize * 2)); // Plus the image's width and the left and right padding value
+            var intHeight = (intImageHeight + (settings.containerBorderSize * 2)); // Plus the image's height and the left and right padding value
+            // Diferences
+            var intDiffW = intCurrentWidth - intWidth;
+            var intDiffH = intCurrentHeight - intHeight;
+            // Perfomance the effect
+            $('#lightbox-container-image-box').animate({ width: intWidth, height: intHeight }, settings.containerResizeSpeed, function() { _show_image(); });
+            if (( intDiffW == 0 ) && ( intDiffH == 0 )) {
+                if ($.browser.msie) {
+                    ___pause(250);
+                } else {
+                    ___pause(100);
+                }
+            }
+            $('#lightbox-container-image-data-box').css({ width: intImageWidth });
+            $('#lightbox-nav-btnPrev,#lightbox-nav-btnNext').css({ height: intImageHeight + (settings.containerBorderSize * 2) });
+        }
+
+        ;
+        /**
+         * Show the prepared image
+         *
+         */
+        function _show_image() {
+            $('#lightbox-loading').hide();
+            $('#lightbox-image').fadeIn(function() {
+                _show_image_data();
+                _set_navigation();
+            });
+            _preload_neighbor_images();
+        }
+
+        ;
+        /**
+         * Show the image information
+         *
+         */
+        function _show_image_data() {
+            $('#lightbox-container-image-data-box').slideDown('fast');
+            $('#lightbox-image-details-caption').hide();
+            if (settings.imageArray[settings.activeImage][1]) {
+                $('#lightbox-image-details-caption').html(settings.imageArray[settings.activeImage][1]).show();
+            }
+            // If we have a image set, display 'Image X of X'
+            if (settings.imageArray.length > 1) {
+                $('#lightbox-image-details-currentNumber').html(settings.txtImage + ' ' + ( settings.activeImage + 1 ) + ' ' + settings.txtOf + ' ' + settings.imageArray.length).show();
+            }
+        }
+
+        /**
+         * Display the button navigations
+         *
+         */
+        function _set_navigation() {
+            $('#lightbox-nav').show();
+
+            // Instead to define this configuration in CSS file, we define here. And it's need to IE. Just.
+            $('#lightbox-nav-btnPrev,#lightbox-nav-btnNext').css({ 'background' : 'transparent url(' + settings.imageBlank + ') no-repeat' });
+
+            // Show the prev button, if not the first image in set
+            if (settings.activeImage != 0) {
+                if (settings.fixedNavigation) {
+                    $('#lightbox-nav-btnPrev').css({ 'background' : 'url(' + settings.imageBtnPrev + ') left 15% no-repeat' })
+                            .unbind()
+                            .bind('click', function() {
+                                      settings.activeImage = settings.activeImage - 1;
+                                      _set_image_to_view();
+                                      return false;
+                                  });
+                } else {
+                    // Show the images button for Next buttons
+                    $('#lightbox-nav-btnPrev').unbind().hover(
+                            function() {
+                                $(this).css({ 'background' : 'url(' + settings.imageBtnPrev + ') left 15% no-repeat' });
+                            },
+                            function() {
+                                $(this).css({ 'background' : 'transparent url(' + settings.imageBlank + ') no-repeat' });
+                            }).show().bind('click', function() {
+                                               settings.activeImage = settings.activeImage - 1;
+                                               _set_image_to_view();
+                                               return false;
+                                           });
+                }
+            }
+
+            // Show the next button, if not the last image in set
+            if (settings.activeImage != ( settings.imageArray.length - 1 )) {
+                if (settings.fixedNavigation) {
+                    $('#lightbox-nav-btnNext').css({ 'background' : 'url(' + settings.imageBtnNext + ') right 15% no-repeat' })
+                            .unbind()
+                            .bind('click', function() {
+                                      settings.activeImage = settings.activeImage + 1;
+                                      _set_image_to_view();
+                                      return false;
+                                  });
+                } else {
+                    // Show the images button for Next buttons
+                    $('#lightbox-nav-btnNext').unbind().hover(
+                            function() {
+                                $(this).css({ 'background' : 'url(' + settings.imageBtnNext + ') right 15% no-repeat' });
+                            },
+                            function() {
+                                $(this).css({ 'background' : 'transparent url(' + settings.imageBlank + ') no-repeat' });
+                            }).show().bind('click', function() {
+                                               settings.activeImage = settings.activeImage + 1;
+                                               _set_image_to_view();
+                                               return false;
+                                           });
+                }
+            }
+            // Enable keyboard navigation
+            _enable_keyboard_navigation();
+        }
+
+        /**
+         * Enable a support to keyboard navigation
+         *
+         */
+        function _enable_keyboard_navigation() {
+            $(document).keydown(function(objEvent) {
+                _keyboard_action(objEvent);
+            });
+        }
+
+        /**
+         * Disable the support to keyboard navigation
+         *
+         */
+        function _disable_keyboard_navigation() {
+            $(document).unbind();
+        }
+
+        /**
+         * Perform the keyboard actions
+         *
+         */
+        function _keyboard_action(objEvent) {
+            // To ie
+            if (objEvent == null) {
+                keycode = event.keyCode;
+                escapeKey = 27;
+                // To Mozilla
+            } else {
+                keycode = objEvent.keyCode;
+                escapeKey = objEvent.DOM_VK_ESCAPE;
+            }
+            // Get the key in lower case form
+            key = String.fromCharCode(keycode).toLowerCase();
+            // Verify the keys to close the ligthBox
+            if (( key == settings.keyToClose ) || ( key == 'x' ) || ( keycode == escapeKey )) {
+                _finish();
+            }
+            // Verify the key to show the previous image
+            if (( key == settings.keyToPrev ) || ( keycode == 37 )) {
+                // If we're not showing the first image, call the previous
+                if (settings.activeImage != 0) {
+                    settings.activeImage = settings.activeImage - 1;
+                    _set_image_to_view();
+                    _disable_keyboard_navigation();
+                }
+            }
+            // Verify the key to show the next image
+            if (( key == settings.keyToNext ) || ( keycode == 39 )) {
+                // If we're not showing the last image, call the next
+                if (settings.activeImage != ( settings.imageArray.length - 1 )) {
+                    settings.activeImage = settings.activeImage + 1;
+                    _set_image_to_view();
+                    _disable_keyboard_navigation();
+                }
+            }
+        }
+
+        /**
+         * Preload prev and next images being showed
+         *
+         */
+        function _preload_neighbor_images() {
+            if ((settings.imageArray.length - 1) > settings.activeImage) {
+                objNext = new Image();
+                objNext.src = settings.imageArray[settings.activeImage + 1][0];
+            }
+            if (settings.activeImage > 0) {
+                objPrev = new Image();
+                objPrev.src = settings.imageArray[settings.activeImage - 1][0];
+            }
+        }
+
+        /**
+         * Remove jQuery lightBox plugin HTML markup
+         *
+         */
+        function _finish() {
+            $('#jquery-lightbox').remove();
+            $('#jquery-overlay').fadeOut(function() { $('#jquery-overlay').remove(); });
+            // Show some elements to avoid conflict with overlay in IE. These elements appear above the overlay.
+            $('embed, object, select').css({ 'visibility' : 'visible' });
+        }
+
+        /**
+         / THIRD FUNCTION
+         * getPageSize() by quirksmode.com
+         *
+         * @return Array Return an array with page width, height and window width, height
+         */
+        function ___getPageSize() {
+            var xScroll, yScroll;
+            if (window.innerHeight && window.scrollMaxY) {
+                xScroll = window.innerWidth + window.scrollMaxX;
+                yScroll = window.innerHeight + window.scrollMaxY;
+            } else if (document.body.scrollHeight > document.body.offsetHeight) { // all but Explorer Mac
+                xScroll = document.body.scrollWidth;
+                yScroll = document.body.scrollHeight;
+            } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
+                xScroll = document.body.offsetWidth;
+                yScroll = document.body.offsetHeight;
+            }
+            var windowWidth, windowHeight;
+            if (self.innerHeight) {    // all except Explorer
+                if (document.documentElement.clientWidth) {
+                    windowWidth = document.documentElement.clientWidth;
+                } else {
+                    windowWidth = self.innerWidth;
+                }
+                windowHeight = self.innerHeight;
+            } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
+                windowWidth = document.documentElement.clientWidth;
+                windowHeight = document.documentElement.clientHeight;
+            } else if (document.body) { // other Explorers
+                windowWidth = document.body.clientWidth;
+                windowHeight = document.body.clientHeight;
+            }
+            // for small pages with total height less then height of the viewport
+            if (yScroll < windowHeight) {
+                pageHeight = windowHeight;
+            } else {
+                pageHeight = yScroll;
+            }
+            // for small pages with total width less then width of the viewport
+            if (xScroll < windowWidth) {
+                pageWidth = xScroll;
+            } else {
+                pageWidth = windowWidth;
+            }
+            arrayPageSize = new Array(pageWidth, pageHeight, windowWidth, windowHeight);
+            return arrayPageSize;
+        }
+
+        ;
+        /**
+         / THIRD FUNCTION
+         * getPageScroll() by quirksmode.com
+         *
+         * @return Array Return an array with x,y page scroll values.
+         */
+        function ___getPageScroll() {
+            var xScroll, yScroll;
+            if (self.pageYOffset) {
+                yScroll = self.pageYOffset;
+                xScroll = self.pageXOffset;
+            } else if (document.documentElement && document.documentElement.scrollTop) {     // Explorer 6 Strict
+                yScroll = document.documentElement.scrollTop;
+                xScroll = document.documentElement.scrollLeft;
+            } else if (document.body) {// all other Explorers
+                yScroll = document.body.scrollTop;
+                xScroll = document.body.scrollLeft;
+            }
+            arrayPageScroll = new Array(xScroll, yScroll);
+            return arrayPageScroll;
+        }
+
+        ;
+        /**
+         * Stop the code execution from a escified time in milisecond
+         *
+         */
+        function ___pause(ms) {
+            var date = new Date();
+            curDate = null;
+            do { var curDate = new Date(); }
+            while (curDate - date < ms);
+        }
+
+        ;
+        // Return the jQuery object for chaining. The unbind method is used to avoid click conflict when the plugin is called more than once
+        return this.unbind('click').click(_initialize);
+    };
+})(jQuery); // Call and execute the function immediately passing the jQuery object

data/vendor/assets/stylesheets/carousel.css.scss

@@ -0,0 +1,35 @@
+@import "vars";
+@import "compass/css3/box";
+@import "compass/css3/border-radius";
+
+@mixin carousel {
+    @include border-radius(5px);
+
+    margin-top: 1em;
+
+    >li {
+        margin: 0.5em;
+        width: 140px;
+    }
+
+    figcaption {
+        text-align: center;
+        font-size: 10pt;
+    }
+}
+
+ul.carousel-horizontal {
+    @include carousel;
+    @include display-box;
+    @include box-orient(horizontal);
+
+    overflow-x: auto;
+}
+
+ul.carousel-vertical {
+    @include carousel;
+
+    overflow-y: auto;
+    max-height: 400px;
+    width: 170px;
+}

data/vendor/assets/stylesheets/jquery.lightbox-0.5.css

@@ -0,0 +1,101 @@
+/**
+ * jQuery lightBox plugin
+ * This jQuery plugin was inspired and based on Lightbox 2 by Lokesh Dhakar (http://www.huddletogether.com/projects/lightbox2/)
+ * and adapted to me for use like a plugin from jQuery.
+ * @name jquery-lightbox-0.5.css
+ * @author Leandro Vieira Pinho - http://leandrovieira.com
+ * @version 0.5
+ * @date April 11, 2008
+ * @category jQuery plugin
+ * @copyright (c) 2008 Leandro Vieira Pinho (leandrovieira.com)
+ * @license CCAttribution-ShareAlike 2.5 Brazil - http://creativecommons.org/licenses/by-sa/2.5/br/deed.en_US
+ * @example Visit http://leandrovieira.com/projects/jquery/lightbox/ for more informations about this jQuery plugin
+ */
+#jquery-overlay {
+	position: absolute;
+	top: 0;
+	left: 0;
+	z-index: 90;
+	width: 100%;
+	height: 500px;
+}
+#jquery-lightbox {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	z-index: 100;
+	text-align: center;
+	line-height: 0;
+}
+#jquery-lightbox a img { border: none; }
+#lightbox-container-image-box {
+	position: relative;
+	background-color: #fff;
+	width: 250px;
+	height: 250px;
+	margin: 0 auto;
+}
+#lightbox-container-image { padding: 10px; }
+#lightbox-loading {
+	position: absolute;
+	top: 40%;
+	left: 0%;
+	height: 25%;
+	width: 100%;
+	text-align: center;
+	line-height: 0;
+}
+#lightbox-nav {
+	position: absolute;
+	top: 0;
+	left: 0;
+	height: 100%;
+	width: 100%;
+	z-index: 10;
+}
+#lightbox-container-image-box > #lightbox-nav { left: 0; }
+#lightbox-nav a { outline: none;}
+#lightbox-nav-btnPrev, #lightbox-nav-btnNext {
+	width: 49%;
+	height: 100%;
+	zoom: 1;
+	display: block;
+}
+#lightbox-nav-btnPrev { 
+	left: 0; 
+	float: left;
+}
+#lightbox-nav-btnNext { 
+	right: 0; 
+	float: right;
+}
+#lightbox-container-image-data-box {
+	font: 10px Verdana, Helvetica, sans-serif;
+	background-color: #fff;
+	margin: 0 auto;
+	line-height: 1.4em;
+	overflow: auto;
+	width: 100%;
+	padding: 0 10px 0;
+}
+#lightbox-container-image-data {
+	padding: 0 10px; 
+	color: #666; 
+}
+#lightbox-container-image-data #lightbox-image-details { 
+	width: 70%; 
+	float: left; 
+	text-align: left; 
+}	
+#lightbox-image-details-caption { font-weight: bold; }
+#lightbox-image-details-currentNumber {
+	display: block; 
+	clear: left; 
+	padding-bottom: 1.0em;	
+}			
+#lightbox-secNav-btnClose {
+	width: 66px; 
+	float: right;
+	padding-bottom: 0.7em;	
+}

metadata

@@ -0,0 +1,177 @@
+--- !ruby/object:Gem::Specification
+name: carousel
+version: !ruby/object:Gem::Version
+  version: 1.0.0
+  prerelease: 
+platform: ruby
+authors:
+- Tim Morgan
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2012-04-21 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: rails
+  requirement: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: compass
+  requirement: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: jquery-rails
+  requirement: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: yard
+  requirement: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: bundler
+  requirement: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: jeweler
+  requirement: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: paperclip
+  requirement: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+description: Adds CoffeeScript and SCSS files to your Rails apps allowing you to easily
+  create an Ajax-powered Carousel.
+email: rubygems@timothymorgan.info
+executables: []
+extensions: []
+extra_rdoc_files:
+- LICENSE.txt
+- README.md
+files:
+- LICENSE.txt
+- README.md
+- carousel.gemspec
+- lib/carousel.rb
+- lib/carousel/paperclip/round_corners.rb
+- vendor/assets/images/lightbox/blank.gif
+- vendor/assets/images/lightbox/close.gif
+- vendor/assets/images/lightbox/loading.gif
+- vendor/assets/images/lightbox/next.gif
+- vendor/assets/images/lightbox/prev.gif
+- vendor/assets/javascripts/carousel.js.coffee.erb
+- vendor/assets/javascripts/jquery.lightbox-0.5.js
+- vendor/assets/stylesheets/carousel.css.scss
+- vendor/assets/stylesheets/jquery.lightbox-0.5.css
+homepage: http://github.com/RISCfuture/carousel
+licenses:
+- MIT
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  none: false
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+      segments:
+      - 0
+      hash: 2934254892831708062
+required_rubygems_version: !ruby/object:Gem::Requirement
+  none: false
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 1.8.23
+signing_key: 
+specification_version: 3
+summary: Simple image carousels in your Rails apps.
+test_files: []