added initial jQuery gallery for index views

app/controllers/users_controller.rb

@@ -32,7 +32,7 @@ def update
         if flickr_username.match('/')
           flickr_username = flickr_username.gsub('http://flickr.com/people/','').gsub('/','')
         end
-        new_flickr_id = check_flickr_user_id(flickr_username])
+        new_flickr_id = check_flickr_user_id(flickr_username)
         if new_flickr_id.blank?
           params[:user].delete(:flickr_username)
         else

app/models/photo.rb

@@ -22,7 +22,7 @@ class Photo < ActiveRecord::Base
   attr_accessor :image, :message
 
   cattr_reader :per_page
-  @@per_page = 9 #10
+  @@per_page = 10
 
   def flickr_api
     @flickr_api ||= Flickr.new(FLICKR.merge(:token => user.flickr_token))

app/stylesheets/application.less

@@ -22,31 +22,38 @@ div#left_column {
   margin-right: 8px; /* over-write blueprint span- class */
   border: 1px solid @blue_dark;
 }
+div.container { margin-bottom: 2em; }
 
 /* ================== */
 /* = General styles = */
 /* ================== */
 #header { background-color: @header_color; }
 a:link, a:visited { color: @pink_dark; text-decoration: none; }
 a:hover { color: @blue_dark; }
-.avatar { border: 1px solid @pink; } /* user avatars */
+.avatar { border: 1px solid @pink; vertical-align: middle; float: left; margin: 0 5px 5px; } /* user avatars */
 .thumbnail { border: 1px solid @blue_dark; } /* Flickr photo thumbnails */
 
-#photos #thumbs ul.thumbs { list-style-type: none; width: 720px; margin: 0 auto; padding: 0; }
+#photos #gallery { height: 575px; }
+#photos #slideshow, #photos #loading { text-align: center; }
+#photos #slideshow img { border: 4px double @blue_dark; padding: 2px; }
+#photos #loading { width: 500px; height: 500px; }
+#photos #caption { margin: 0 auto; float: none; }
+#photos #thumbs ul.thumbs { list-style-type: none; width: 800px; margin: 0 auto; padding: 0; }
 #photos #thumbs ul.thumbs li a.thumb { float: left; margin: 0 5px 5px 0; padding: 0; }
 
-/*
-.photo { margin: 0; padding: 0 0 .5em; height: 120px; }
-.photo_meta p { line-height: 1.4em; }
-*/
 .photo_meta .avatar { float: left; margin: 0 5px 5px 0; padding: 1px; }
 #photo_show .photo { text-align: center; }
 #photo_show .spotlight { border: 4px double @blue_dark; margin: 0 0 1.5em; padding: 2px; }
-#photo_show .caption { text-align: center; margin: 0 auto; }
-#photo_show .avatar { float: left; margin: 5px 0 0 5px; padding: 1px; }
+#photo_show .caption { text-align: left; margin: 0 auto; }
+#photo_show .avatar { 
+	float: left;
+	margin: 0 5px 0 0;
+	padding: 1px;
+	vertical-align: middle;
+}
 
 #users .user { text-align: center; height: 80px; }
-#users .user img.avatar { margin: 0 5px 5px 0; padding: 1px; }
+#users .user img.avatar { margin: 0 5px 5px 0; padding: 1px; float: none; }
 .user_meta { padding-bottom: 1em; }
 .user_meta h2 { margin-bottom: 0.25em; }
 .user_meta .avatar { float: left; margin: 5px 5px 0 0; padding: 3px; }

app/views/photos/index.rhtml

@@ -2,45 +2,30 @@
 <div id="photos">
   <h2>Recent Photos Tweeted through Flickr4Twitter</h2>
   <%- unless @photos.blank? -%>
-    <div id="controls"></div>
-    <div id="loading"></div>
-    <div id="slideshow"></div>
-    <div id="caption"></div>
     <div id="thumbs">
       <ul class="thumbs noscript">
         <%- for photo in @photos -%>
         <li>
           <%- if photo.flickr_image -%>
-            <%= link_to image_tag(photo.flickr_image.url('square'), :alt=>photo.short_url, :title=>photo.short_url), photo.flickr_image.url('medium')	, :class=>'thumb' %>
+            <%= link_to image_tag(photo.flickr_image.url('square'), :alt=>photo.short_url, :title=>photo.short_url), photo.flickr_image.url('medium'), :class=>'thumb' %>
           <%- else -%>
             <%= link_to image_tag('/images/missing_square.png', :alt=>'?', :title=>'Missing Photo'), '/images/missing.png', :class=>'thumb' %>
           <%- end -%>
-          <div class="caption"><%= photo.caption %></div>
+          <div class="caption">
+            <%= link_to image_tag(photo.user.avatar_url('n'), :alt=>"#{photo.user.twitter_username}", :title=>"#{photo.user.twitter_username}", :class=>'avatar'), user_path(photo.user) %>
+            <%= photo.caption %>
+          </div>
         </li>
-		<%- end -%>
+  	<%- end -%>
       </ul>
     </div>
-<!--
-    <%- for photo in @photos -%>
-      <% div_for photo, :class=>'span-9 append-1' do %>
-        <div class="photo_thumb span-3">
-          <p>
-          <%- if photo.flickr_image -%>
-            <%= link_to image_tag(photo.flickr_image.url('thumb'), :alt=>photo.flickr_image.url, :class=>'thumbnail'), photo_path(photo) %>
-          <%- else -%>
-            <%= link_to image_tag('/images/missing_thumb.png', :alt=>'?', :title=>'Missing Photo', :class=>'thumbnail'), photo_path(photo) %>
-          <%- end -%>
-          </p>
-        </div> 
-        <div class="photo_meta span-5">
-          <p>
-            <%= link_to image_tag(photo.user.avatar_url('m'), :alt=>"#{photo.user.twitter_username}", :title=>"#{photo.user.twitter_username}", :class=>'avatar'), user_path(photo.user) %>
-            <%=h photo.caption if photo.caption %> 
-          </p>
-        </div>
-      <% end -%>
-    <%- end -%>
--->
+
+    <div id="gallery">
+      <div id="controls"></div>
+      <div id="slideshow"></div>
+      <div id="loading"></div>
+      <div id="caption" class="span-10"></div>
+    </div>
   <%- else -%>
     <p>There are currently no photos to display.</p>
   <%- end -%>

app/views/photos/show.rhtml

@@ -8,7 +8,7 @@
     <%- end -%>
     <p class="span-13 caption">
       <%= link_to image_tag(@photo.user.avatar_url('n'), :alt=>"#{@photo.user.twitter_username}", :title=>"#{@photo.user.twitter_username}", :class=>'avatar'), user_path(@photo.user) %>
-    	<%=h @photo.caption if @photo.caption %> 
+      <%=h @photo.caption if @photo.caption %> 
     </p>
   <% end -%>
 </div>

app/views/users/index.rhtml

@@ -1,6 +1,6 @@
 <%- content_for :title do -%>Users<%- end -%>
 <div id="users">
-  <h2>Twitter Users on Flickr4TWitter</h2>
+  <h2>Twitter Users on Flickr4Twitter</h2>
   <%- if !@users.blank? -%>
     <%- for user in @users -%>
       <% div_for user, :class=>"span-4" do %>

public/javascripts/application.js

@@ -16,39 +16,55 @@ $(document).ready(function() {
 	  slider:             false // True Use counter slider 
 	}); 
 
-  if($('div#photos div#thumbs').size()>0) {
-  var gallery = $('div#photos div#thumbs').galleriffic({
-    delay:                     3000, // in milliseconds
-    numThumbs:                 10, // The number of thumbnails to show page
-    preloadAhead:              20, // Set to -1 to preload all images
-    enableTopPager:            false,
-    enableBottomPager:         true,
-    maxPagesToShow:            7,  // The maximum number of pages to display in either the top or bottom pager
-    imageContainerSel:         '', // The CSS selector for the element within which the main slideshow image should be rendered
-    controlsContainerSel:      '', // The CSS selector for the element within which the slideshow controls should be rendered
-    captionContainerSel:       '', // The CSS selector for the element within which the captions should be rendered
-    loadingContainerSel:       '', // The CSS selector for the element within which should be shown when an image is loading
-    renderSSControls:          true, // Specifies whether the slideshow's Play and Pause links should be rendered
-    renderNavControls:         true, // Specifies whether the slideshow's Next and Previous links should be rendered
-    playLinkText:              'Play',
-    pauseLinkText:             'Pause',
-    prevLinkText:              'Previous',
-    nextLinkText:              'Next',
-    nextPageLinkText:          'Next ›',
-    prevPageLinkText:          '‹ Prev',
-    enableHistory:             false, // Specifies whether the url's hash and the browser's history cache should update when the current slideshow image changes
-    enableKeyboardNavigation:  true, // Specifies whether keyboard navigation is enabled
-    autoStart:                 false, // Specifies whether the slideshow should be playing or paused when the page first loads
-    syncTransitions:           false, // Specifies whether the out and in transitions occur simultaneously or distinctly
-    defaultTransitionDuration: 1000, // If using the default transitions, specifies the duration of the transitions
-    onSlideChange:             undefined, // accepts a delegate like such: function(prevIndex, nextIndex) { ... }
-    onTransitionOut:           undefined, // accepts a delegate like such: function(slide, caption, isSync, callback) { ... }
-    onTransitionIn:            undefined, // accepts a delegate like such: function(slide, caption, isSync) { ... }
-    onPageTransitionOut:       undefined, // accepts a delegate like such: function(callback) { ... }
-    onPageTransitionIn:        undefined, // accepts a delegate like such: function() { ... }
-    onImageAdded:              undefined, // accepts a delegate like such: function(imageData, $li) { ... }
-    onImageRemoved:            undefined  // accepts a delegate like such: function(imageData, $li) { ... }
-  });
-  } // end selector test for div#photos index 
+
+	// Initially set opacity on thumbs and add
+	// additional styling for hover effect on thumbs
+	if($('div#photos div#thumbs').size()>0) {
+		var onMouseOutOpacity = 0.67;
+		$('div#photos div#thumbs ul.thumbs li').opacityrollover({
+			mouseOutOpacity: onMouseOutOpacity,
+			mouseOverOpacity: 1.0,
+			fadeSpeed: 'fast',
+			exemptionSelector: '.selected'
+		});
+
+		// Initialize Advanced Galleriffic Gallery
+		var gallery = $('div#photos div#thumbs').galleriffic({
+			delay: 2500,
+			numThumbs: 10,
+			preloadAhead: 10,
+			enableTopPager: true,
+			enableBottomPager: true,
+			maxPagesToShow: 7,
+			imageContainerSel: '#slideshow',
+			controlsContainerSel: '#controls',
+			captionContainerSel: '#caption',
+			loadingContainerSel: '#loading',
+			renderSSControls: false,
+			renderNavControls: false,
+			playLinkText: 'Play Slideshow',
+			pauseLinkText: 'Pause Slideshow',
+			prevLinkText: '‹ Previous Photo',
+			nextLinkText: 'Next Photo ›',
+			nextPageLinkText: 'Next ›',
+			prevPageLinkText: '‹ Prev',
+			enableHistory: false,
+			autoStart: false,
+			syncTransitions: false,
+			defaultTransitionDuration: 900,
+			onSlideChange: function(prevIndex, nextIndex) {
+			// 'this' refers to the gallery, which is an extension of $('#thumbs')
+			this.find('ul.thumbs').children()
+			.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
+			.eq(nextIndex).fadeTo('fast', 1.0);
+			},
+			onPageTransitionOut: function(callback) {
+			this.fadeTo('fast', 0.0, callback);
+			},
+			onPageTransitionIn: function() {
+			this.fadeTo('fast', 1.0);
+			}
+		});
+	}
 
 });