hermitage 0.0.2.1 → 0.0.3

data/CHANGELOG.md

@@ -1,3 +1,13 @@
+### 0.0.3 ###
+
+* *Attention*! In this version some options were renamed: attribute_full_size -> original, attribute_thumbnail -> thumbnail.
+* Added more viewer customization options
+* Ability to set any custom CSS for any viewer element
+* Ability to enable or disable looped navigation
+* More neat navigation buttons
+* Adjust viewer on window resize
+* Bottom panel added. Now you can set image descriptions by passing `title` option to `render_gallery_for` method or config.
+
 ### 0.0.2.1 ###
 
 * Fixed conflict with Twitter Bootstrap in Firefox and Opera.

data/README.md

@@ -2,7 +2,7 @@
 
 [![Build Status](https://travis-ci.org/ImmaculatePine/hermitage.png?branch=master)](https://travis-ci.org/ImmaculatePine/hermitage)
 
-Ruby library for generation of image galleries (thumbnails and full size images viewer).
+Ruby library for generation of image galleries (thumbnails and original images viewer).
 
 ## Requirements
 
@@ -60,13 +60,13 @@ You can pass options hash to `render_gallery_for` method if you want to customiz
 E.g. your `Photo` model has methods `image_full` and `image_thumb` that return path to full image and its thumbnail, respectively.
 Then you can write in your view file:
 
-    render_gallery_for @photos, attribute_full_size: 'image_full', attribute_thumbnail: 'image_thumb'
+    render_gallery_for @photos, original: 'image_full', thumbnail: 'image_thumb'
 
 Then Hermitage will use the specified methods to get paths to your images and thumbnails.
 
 If the only method returns both paths according to passed parameters you can specify it like this:
 
-    render_gallery_for @posts, attribute_full_size: 'attachment(:full)', attribute_thumbnail: 'attachment(:thumbnail)'
+    render_gallery_for @posts, original: 'attachment(:full)', thumbnail: 'attachment(:thumbnail)'
 
 #### Markup
 
@@ -80,7 +80,7 @@ Hermitage renders markup that will look nice with Twitter Bootstrap by default:
       </li>
     </ul>
 
-You can configure any element of this markup by overwriting `list_tag`, `item_tag`, `list_class`, `item_class`, `link_class` and `image_class` properties.
+You can configure any element of this markup by overwriting `list_tag`, `item_tag`, `list_class`, `item_class`, `link_class`, `image_class` and `title` properties.
 
 For example this line of code:
 
@@ -96,6 +96,21 @@ will render the following markup:
       </p>
     </div>
 
+#### Specify Image Title
+
+You can add `title` attribute to generated links by passing `title` option to `render_gallery_for` method:
+
+    render_gallery_for @images, title: 'description' # assuming that image.description returns some text
+
+It will render something like that:
+
+    <div class="thumbnails">
+      ...
+        <a href="/path/to/full/image" class="thumbnail" rel="hermitage" title="This is photo of my cat.">
+      ...
+
+If the link has title attribute there will be bottom panel with this text when you open the gallery.
+
 #### Slicing
 
 If you are using Twitter Bootstrap framework and your gallery is inside `.row-fluid` block the markup above will not look awesome.
@@ -124,8 +139,8 @@ You can overwrite :default config. These changes will be applied to all the gall
 Uncoment the following lines in config/initializers/hermitage.rb file and make some changes here:
 
     Hermitage.configs[:default].merge!({
-      attribute_full_size: 'image.url(:medium)',
-      attribute_thumbnail: 'image.url(:small)'
+      original: 'image.url(:medium)',
+      thumbnail: 'image.url(:small)'
     })
 
 Now Hermitage will use `image.url` method with :medium or :small argument to get images for the gallery.
@@ -155,13 +170,13 @@ Then your config/initializers/hermitage.rb could looks like this:
     # Some rules for :default config if needed...
 
     Hermitage.configs[:pictures] = {
-      attribute_full_size: 'image_path',
-      attribute_thumbnail: 'image_path(:small)'
+      original: 'image_path',
+      thumbnail: 'image_path(:small)'
     }
 
     Hermitage.configs[:posts] = {
-      attribute_full_size: 'attachment',
-      attribute_thumbnail: 'attachment(:tiny)',
+      original: 'attachment',
+      thumbnail: 'attachment(:tiny)',
       list_tag: :div,
       item_tag: div,
       list_class: 'posts',
@@ -184,30 +199,32 @@ So, Hermitage looks for parameters with the following priority:
 You can customize appearance of Hermitage image viewer. All you need is to add to any of your .js or .coffee files lines like this:
 
     hermitage.darkening.opacity = 0
-    hermitage.navigationButton.color = '#faeedd'
+    hermitage.navigationButtons.styles = { color: '#faeedd' }
 
-In the example above the darkening will be disabled and navigation buttons will change their color.
+In the example above the darkening will be disabled and both navigation buttons will change their color.
 
 You can customize the following parameters:
 
-* `zIndex` - image viewer's z-index property
+* `looped` - set it to false if after the last image the first should not be shown
 * `darkening.opacity` - opacity of darkening layer (0 if it should be disabled)
-* `darkening.color` - color of darkening layer
-* `navigationButton.enabled` - are there navigation buttons
-* `navigationButton.color` - color of navigation buttons
-* `navigationButton.width` - width of navigation buttons, px
-* `navigationButton.borderRadius` - border radius of outer corners of navigation buttons, px
-* `navigationButton.margin` - distance between navigation buttons and the image, px
+* `darkening.styles` - any custom CSS for darkening layer
+* `navigationButtons.enabled` - are there navigation buttons
+* `navigationButtons.styles` - any custom CSS for both navigation buttons
+* `navigationButtons.next.styles` - any custom CSS for next navigation button
+* `navigationButtons.previous.styles` - any custom CSS for previous navigation button
+* `navigationButtons.next.text` - text for next navigation button
+* `navigationButtons.previous.text` - text for previous navigation button
 * `closeButton.enabled` - is there close button
 * `closeButton.text` - close button's text
-* `closeButton.color` - close button's color
-* `closeButton.fontSize` - close button's font size
-* `windowPadding.x` - minimum distance between window borders and the image by x axis, px
-* `windowPadding.y` - minimum distance between window borders and the image by y axis, px
+* `closeButton.styles` - any custom CSS for close button
+* `image.styles` - any custom CSS for current image
+* `bottomPanel.styles` - any custom CSS for bottom panel
+* `bottomPanel.text.styles` - any custom CSS for text block of bottom panel
 * `minimumSize.width` - minimum width of scaled image, px
 * `minimumSize.height` - minimum height of scaled image, px
 * `animationDuration` - duration of UI animations, ms
-  
+* `resizeTimeout` - timeout before moving elements to the proper places after resizing, ms
+
 ## Contributing
 
 1. Fork it