From 383d9baf2306cb1928a9e084ad01d94b9fd9d21a Mon Sep 17 00:00:00 2001 From: Steven Haddox Date: Mon, 16 Nov 2009 03:15:12 -0500 Subject: [PATCH] added initial jQuery gallery for index views --- app/controllers/users_controller.rb | 2 +- app/models/photo.rb | 2 +- app/stylesheets/application.less | 25 ++++++--- app/views/photos/index.rhtml | 41 +++++--------- app/views/photos/show.rhtml | 2 +- app/views/users/index.rhtml | 2 +- public/images/left_arrow.gif | Bin 0 -> 78 bytes public/images/right_arrow.gif | Bin 0 -> 79 bytes public/javascripts/application.js | 84 +++++++++++++++++----------- 9 files changed, 83 insertions(+), 75 deletions(-) create mode 100644 public/images/left_arrow.gif create mode 100644 public/images/right_arrow.gif diff --git a/app/controllers/users_controller.rb b/app/controllers/users_controller.rb index fd956ce..9f86c4b 100644 --- a/app/controllers/users_controller.rb +++ b/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 diff --git a/app/models/photo.rb b/app/models/photo.rb index 1ff40a4..f175926 100644 --- a/app/models/photo.rb +++ b/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)) diff --git a/app/stylesheets/application.less b/app/stylesheets/application.less index ffe107b..e838ef3 100644 --- a/app/stylesheets/application.less +++ b/app/stylesheets/application.less @@ -22,6 +22,7 @@ div#left_column { margin-right: 8px; /* over-write blueprint span- class */ border: 1px solid @blue_dark; } +div.container { margin-bottom: 2em; } /* ================== */ /* = General styles = */ @@ -29,24 +30,30 @@ div#left_column { #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; } diff --git a/app/views/photos/index.rhtml b/app/views/photos/index.rhtml index 2583580..c4159e0 100644 --- a/app/views/photos/index.rhtml +++ b/app/views/photos/index.rhtml @@ -2,45 +2,30 @@

Recent Photos Tweeted through Flickr4Twitter

<%- unless @photos.blank? -%> -
-
-
-
    <%- for photo in @photos -%>
  • <%- 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 -%> -
    <%= photo.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 %> +
    • - <%- end -%> + <%- end -%>
- + + <%- else -%>

There are currently no photos to display.

<%- end -%> diff --git a/app/views/photos/show.rhtml b/app/views/photos/show.rhtml index f8d5d0b..b471bf3 100644 --- a/app/views/photos/show.rhtml +++ b/app/views/photos/show.rhtml @@ -8,7 +8,7 @@ <%- end -%>

<%= 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 %>

<% end -%>
\ No newline at end of file diff --git a/app/views/users/index.rhtml b/app/views/users/index.rhtml index 0cc9764..bf8ccff 100644 --- a/app/views/users/index.rhtml +++ b/app/views/users/index.rhtml @@ -1,6 +1,6 @@ <%- content_for :title do -%>Users<%- end -%>
-

Twitter Users on Flickr4TWitter

+

Twitter Users on Flickr4Twitter

<%- if !@users.blank? -%> <%- for user in @users -%> <% div_for user, :class=>"span-4" do %> diff --git a/public/images/left_arrow.gif b/public/images/left_arrow.gif new file mode 100644 index 0000000000000000000000000000000000000000..0f4620d93d3b14abc0c707aa8d30bb5aee987d79 GIT binary patch literal 78 zcmZ?wbhEHb6krf$XkcUjg8%>jEB<5wG8q|kKzxu41Cwe`eZ%etXXdncYDv9WDwY1a cbcWlswDL)95>5Ba_r7_tZR1}xA4Udi09AP!tN;K2 literal 0 HcmV?d00001 diff --git a/public/images/right_arrow.gif b/public/images/right_arrow.gif new file mode 100644 index 0000000000000000000000000000000000000000..a39f1c54d761205e4b24173c5ccfbf666c055978 GIT binary patch literal 79 zcmZ?wbhEHb6krf$XkcUjg8%>jEB<5wG8q|kKzxu41Cv@0|MKhyXXdnc+jZ%jD`uZv dk-$7{a_6#VW=XnVoeG!iG_9_b4`X1k1^_<|7&rg` literal 0 HcmV?d00001 diff --git a/public/javascripts/application.js b/public/javascripts/application.js index c4d7496..cf3779b 100644 --- a/public/javascripts/application.js +++ b/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); + } + }); + } });