Turning article images zoomable

(ActionItem1801)

Turning article images zoomable
(ActionItem1801)
Caio Almeida · Daniela Feitosa
1 parent caa54550
Showing 32 changed files with 565 additions and 1 deletions Show diff stats
app/helpers/application_helper.rb
app/models/environment.rb
app/views/content_viewer/view_page.rhtml
features/clickable_images.feature
features/step_definitions/noosfero_steps.rb
features/step_definitions/selenium_steps.rb
public/images/fancybox/blank.gif
public/images/fancybox/fancy_close.png
public/images/fancybox/fancy_loading.png
public/images/fancybox/fancy_nav_left.png
public/images/fancybox/fancy_nav_right.png
public/images/fancybox/fancy_shadow_e.png
public/images/fancybox/fancy_shadow_n.png
public/images/fancybox/fancy_shadow_ne.png
public/images/fancybox/fancy_shadow_nw.png
public/images/fancybox/fancy_shadow_s.png
public/images/fancybox/fancy_shadow_se.png
public/images/fancybox/fancy_shadow_sw.png
public/images/fancybox/fancy_shadow_w.png
public/images/fancybox/fancy_title_left.png
@@ -1190,4 +1190,23 @@ module ApplicationHelper
     task.information[:message] % values
   end
  
+  def add_zoom_to_images
+    if environment.enabled?(:show_zoom_button_on_article_images)
+      stylesheet_link_tag('fancybox') +
+      javascript_include_tag('jquery.fancybox-1.3.4.pack') +
+      javascript_tag("jQuery(function($) {
+        $('#article .article-body img').each( function(index) {
+          var original = original_image_dimensions($(this).attr('src'));
+          if ($(this).width() < original['width'] || $(this).height() < original['height']) {
+            $(this).wrap('<div class=\"zoomable-image\" />');
+            $(this).parent('.zoomable-image').attr('style', $(this).attr('style'));
+            $(this).attr('style', '');
+            $(this).after(\'<a href=\"' + $(this).attr('src') + '\" class=\"zoomify-image\"><span class=\"zoomify-text\">%s</span></a>');
+          }
+        });
+        $('.zoomify-image').fancybox();
+      });" % _('Zoom in'))
+    end
+  end
+
 end
@@ -108,7 +108,8 @@ class Environment &lt; ActiveRecord::Base
       'admin_must_approve_new_communities' => _("Admin must approve creation of communities"),
       'enterprises_are_disabled_when_created' => __('Enterprises are disabled when created'),
       'show_balloon_with_profile_links_when_clicked' => _('Show a balloon with profile links when a profile image is clicked'),
-      'xmpp_chat' => _('XMPP/Jabber based chat')
+      'xmpp_chat' => _('XMPP/Jabber based chat'),
+      'show_zoom_button_on_article_images' => _('Show a zoom link on all article images')
     }
   end
  
@@ -135,3 +135,4 @@
 </div><!-- end class="comments" -->
  
 </div><!-- end id="article" -->
+<%= add_zoom_to_images %>
@@ -0,0 +1,50 @@
+Feature: clickable images
+  As a visitor
+  I want to zoom in article images
+
+  Background:
+    Given feature "show_zoom_button_on_article_images" is enabled on environment
+    And the following users
+      | login   |
+      | booking |
+
+  @selenium
+  Scenario: show link if image is scaled
+    Given the following article with image
+      | owner   | name  | image     | dimensions |
+      | booking | small | rails.png | 20x20      |
+    When I go to /booking/small
+    Then I should see "Zoom in"
+
+  @selenium
+  Scenario: not show link if image is not scaled
+    Given the following article with image
+      | owner   | name | image     | dimensions |
+      | booking | real | rails.png | 50x64      |
+    When I go to /booking/real
+    Then I should not see "Zoom in"
+
+  @selenium
+  Scenario: not show link if image does not have dimensions set
+    Given the following article with image
+      | owner   | name    | image     |
+      | booking | not set | rails.png |
+    When I go to /booking/not-set
+    Then I should not see "Zoom in"
+
+  @selenium
+  Scenario: copy style from image
+    Given the following article with image
+      | owner   | name       | image     | style        | dimensions |
+      | booking | with style | rails.png | float: right | 25x32      |
+    When I go to /booking/with-style
+    Then "zoomable-image" should be right aligned
+
+  @selenium
+  Scenario: zoom image
+    Given the following article with image
+      | owner   | name | image     | dimensions |
+      | booking | zoom | rails.png | 25x32      |
+    When I go to /booking/zoom
+    And I follow "Zoom in"
+    Then the "#fancybox-wrap" should be visible
@@ -83,6 +83,29 @@ Given /^the following files$/ do |table|
   end
 end
  
+Given /^the following articles? with images?$/ do |table|
+  table.hashes.each do |item|
+    owner = Profile[item[:owner]]
+    file = item[:image]
+    img = { :src => "/images/#{file}", :alt => file }
+    img[:width] = item[:dimensions].split('x')[0] if item[:dimensions]
+    img[:height] = item[:dimensions].split('x')[1] if item[:dimensions]
+    img[:style] = item[:style] if item[:style]
+    img_tag = "<img "
+    img.each { |attr, value| img_tag += "#{attr}=\"#{value}\" " }
+    img_tag += "/>"
+    article = TinyMceArticle.new(:profile => owner, :name => item[:name], :body => img_tag)
+    if item[:parent]
+      article.parent = Article.find_by_slug(item[:parent])
+    end
+    article.save!
+    if item[:homepage]
+      owner.home_page = article
+      owner.save!
+    end
+  end
+end
+
 Given /^the following products?$/ do |table|
   table.hashes.each do |item|
     data = item.dup
@@ -80,6 +80,11 @@ Then /^there should be ([1-9][0-9]*) &quot;([^\&quot;]*)&quot; within &quot;([^\&quot;]*)&quot;$/ do |number, 
   response.selenium.get_xpath_count("//*[contains(@class,'#{parent_class}')]//*[contains(@class,'#{child_class}')]").to_i.should be(number.to_i)
 end
  
+Then /^"([^\"]*)" should be (left|right) aligned$/ do |element_class, align|
+  # Using xpath is the only way to count
+  response.selenium.get_xpath_count("//*[contains(@class,'#{element_class}') and contains(@style,'float: #{align}')]").to_i.should be(1)
+end
+
 #### Noosfero specific steps ####
  
 Then /^the select for category "([^\"]*)" should be visible$/ do |name|
@@ -667,3 +667,9 @@ function add_comment_reply_form(button, comment_id) {
   }
   return f;
 }
+
+function original_image_dimensions(src) {
+  var img = new Image();
+  img.src = src;
+  return { 'width' : img.width, 'height' : img.height };
+}
@@ -0,0 +1,46 @@
+/*
+ * FancyBox - jQuery Plugin
+ * Simple and fancy lightbox alternative
+ *
+ * Examples and documentation at: http://fancybox.net
+ *
+ * Copyright (c) 2008 - 2010 Janis Skarnelis
+ * That said, it is hardly a one-person project. Many people have submitted bugs, code, and offered their advice freely. Their support is greatly appreciated.
+ *
+ * Version: 1.3.4 (11/11/2010)
+ * Requires: jQuery v1.3+
+ *
+ * Dual licensed under the MIT and GPL licenses:
+ *   http://www.opensource.org/licenses/mit-license.php
+ *   http://www.gnu.org/licenses/gpl.html
+ */
+
+;(function(b){var m,t,u,f,D,j,E,n,z,A,q=0,e={},o=[],p=0,d={},l=[],G=null,v=new Image,J=/\.(jpg|gif|png|bmp|jpeg)(.*)?$/i,W=/[^\.]\.(swf)\s*$/i,K,L=1,y=0,s="",r,i,h=false,B=b.extend(b("<div/>")[0],{prop:0}),M=b.browser.msie&&b.browser.version<7&&!window.XMLHttpRequest,N=function(){t.hide();v.onerror=v.onload=null;G&&G.abort();m.empty()},O=function(){if(false===e.onError(o,q,e)){t.hide();h=false}else{e.titleShow=false;e.width="auto";e.height="auto";m.html('<p id="fancybox-error">The requested content cannot be loaded.<br />Please try again later.</p>');
+F()}},I=function(){var a=o[q],c,g,k,C,P,w;N();e=b.extend({},b.fn.fancybox.defaults,typeof b(a).data("fancybox")=="undefined"?e:b(a).data("fancybox"));w=e.onStart(o,q,e);if(w===false)h=false;else{if(typeof w=="object")e=b.extend(e,w);k=e.title||(a.nodeName?b(a).attr("title"):a.title)||"";if(a.nodeName&&!e.orig)e.orig=b(a).children("img:first").length?b(a).children("img:first"):b(a);if(k===""&&e.orig&&e.titleFromAlt)k=e.orig.attr("alt");c=e.href||(a.nodeName?b(a).attr("href"):a.href)||null;if(/^(?:javascript)/i.test(c)||
+c=="#")c=null;if(e.type){g=e.type;if(!c)c=e.content}else if(e.content)g="html";else if(c)g=c.match(J)?"image":c.match(W)?"swf":b(a).hasClass("iframe")?"iframe":c.indexOf("#")===0?"inline":"ajax";if(g){if(g=="inline"){a=c.substr(c.indexOf("#"));g=b(a).length>0?"inline":"ajax"}e.type=g;e.href=c;e.title=k;if(e.autoDimensions)if(e.type=="html"||e.type=="inline"||e.type=="ajax"){e.width="auto";e.height="auto"}else e.autoDimensions=false;if(e.modal){e.overlayShow=true;e.hideOnOverlayClick=false;e.hideOnContentClick=
+false;e.enableEscapeButton=false;e.showCloseButton=false}e.padding=parseInt(e.padding,10);e.margin=parseInt(e.margin,10);m.css("padding",e.padding+e.margin);b(".fancybox-inline-tmp").unbind("fancybox-cancel").bind("fancybox-change",function(){b(this).replaceWith(j.children())});switch(g){case "html":m.html(e.content);F();break;case "inline":if(b(a).parent().is("#fancybox-content")===true){h=false;break}b('<div class="fancybox-inline-tmp" />').hide().insertBefore(b(a)).bind("fancybox-cleanup",function(){b(this).replaceWith(j.children())}).bind("fancybox-cancel",
+function(){b(this).replaceWith(m.children())});b(a).appendTo(m);F();break;case "image":h=false;b.fancybox.showActivity();v=new Image;v.onerror=function(){O()};v.onload=function(){h=true;v.onerror=v.onload=null;e.width=v.width;e.height=v.height;b("<img />").attr({id:"fancybox-img",src:v.src,alt:e.title}).appendTo(m);Q()};v.src=c;break;case "swf":e.scrolling="no";C='<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="'+e.width+'" height="'+e.height+'"><param name="movie" value="'+c+
+'"></param>';P="";b.each(e.swf,function(x,H){C+='<param name="'+x+'" value="'+H+'"></param>';P+=" "+x+'="'+H+'"'});C+='<embed src="'+c+'" type="application/x-shockwave-flash" width="'+e.width+'" height="'+e.height+'"'+P+"></embed></object>";m.html(C);F();break;case "ajax":h=false;b.fancybox.showActivity();e.ajax.win=e.ajax.success;G=b.ajax(b.extend({},e.ajax,{url:c,data:e.ajax.data||{},error:function(x){x.status>0&&O()},success:function(x,H,R){if((typeof R=="object"?R:G).status==200){if(typeof e.ajax.win==
+"function"){w=e.ajax.win(c,x,H,R);if(w===false){t.hide();return}else if(typeof w=="string"||typeof w=="object")x=w}m.html(x);F()}}}));break;case "iframe":Q()}}else O()}},F=function(){var a=e.width,c=e.height;a=a.toString().indexOf("%")>-1?parseInt((b(window).width()-e.margin*2)*parseFloat(a)/100,10)+"px":a=="auto"?"auto":a+"px";c=c.toString().indexOf("%")>-1?parseInt((b(window).height()-e.margin*2)*parseFloat(c)/100,10)+"px":c=="auto"?"auto":c+"px";m.wrapInner('<div style="width:'+a+";height:"+c+
+";overflow: "+(e.scrolling=="auto"?"auto":e.scrolling=="yes"?"scroll":"hidden")+';position:relative;"></div>');e.width=m.width();e.height=m.height();Q()},Q=function(){var a,c;t.hide();if(f.is(":visible")&&false===d.onCleanup(l,p,d)){b.event.trigger("fancybox-cancel");h=false}else{h=true;b(j.add(u)).unbind();b(window).unbind("resize.fb scroll.fb");b(document).unbind("keydown.fb");f.is(":visible")&&d.titlePosition!=="outside"&&f.css("height",f.height());l=o;p=q;d=e;if(d.overlayShow){u.css({"background-color":d.overlayColor,
+opacity:d.overlayOpacity,cursor:d.hideOnOverlayClick?"pointer":"auto",height:b(document).height()});if(!u.is(":visible")){M&&b("select:not(#fancybox-tmp select)").filter(function(){return this.style.visibility!=="hidden"}).css({visibility:"hidden"}).one("fancybox-cleanup",function(){this.style.visibility="inherit"});u.show()}}else u.hide();i=X();s=d.title||"";y=0;n.empty().removeAttr("style").removeClass();if(d.titleShow!==false){if(b.isFunction(d.titleFormat))a=d.titleFormat(s,l,p,d);else a=s&&s.length?
+d.titlePosition=="float"?'<table id="fancybox-title-float-wrap" cellpadding="0" cellspacing="0"><tr><td id="fancybox-title-float-left"></td><td id="fancybox-title-float-main">'+s+'</td><td id="fancybox-title-float-right"></td></tr></table>':'<div id="fancybox-title-'+d.titlePosition+'">'+s+"</div>":false;s=a;if(!(!s||s==="")){n.addClass("fancybox-title-"+d.titlePosition).html(s).appendTo("body").show();switch(d.titlePosition){case "inside":n.css({width:i.width-d.padding*2,marginLeft:d.padding,marginRight:d.padding});
+y=n.outerHeight(true);n.appendTo(D);i.height+=y;break;case "over":n.css({marginLeft:d.padding,width:i.width-d.padding*2,bottom:d.padding}).appendTo(D);break;case "float":n.css("left",parseInt((n.width()-i.width-40)/2,10)*-1).appendTo(f);break;default:n.css({width:i.width-d.padding*2,paddingLeft:d.padding,paddingRight:d.padding}).appendTo(f)}}}n.hide();if(f.is(":visible")){b(E.add(z).add(A)).hide();a=f.position();r={top:a.top,left:a.left,width:f.width(),height:f.height()};c=r.width==i.width&&r.height==
+i.height;j.fadeTo(d.changeFade,0.3,function(){var g=function(){j.html(m.contents()).fadeTo(d.changeFade,1,S)};b.event.trigger("fancybox-change");j.empty().removeAttr("filter").css({"border-width":d.padding,width:i.width-d.padding*2,height:e.autoDimensions?"auto":i.height-y-d.padding*2});if(c)g();else{B.prop=0;b(B).animate({prop:1},{duration:d.changeSpeed,easing:d.easingChange,step:T,complete:g})}})}else{f.removeAttr("style");j.css("border-width",d.padding);if(d.transitionIn=="elastic"){r=V();j.html(m.contents());
+f.show();if(d.opacity)i.opacity=0;B.prop=0;b(B).animate({prop:1},{duration:d.speedIn,easing:d.easingIn,step:T,complete:S})}else{d.titlePosition=="inside"&&y>0&&n.show();j.css({width:i.width-d.padding*2,height:e.autoDimensions?"auto":i.height-y-d.padding*2}).html(m.contents());f.css(i).fadeIn(d.transitionIn=="none"?0:d.speedIn,S)}}}},Y=function(){if(d.enableEscapeButton||d.enableKeyboardNav)b(document).bind("keydown.fb",function(a){if(a.keyCode==27&&d.enableEscapeButton){a.preventDefault();b.fancybox.close()}else if((a.keyCode==
+37||a.keyCode==39)&&d.enableKeyboardNav&&a.target.tagName!=="INPUT"&&a.target.tagName!=="TEXTAREA"&&a.target.tagName!=="SELECT"){a.preventDefault();b.fancybox[a.keyCode==37?"prev":"next"]()}});if(d.showNavArrows){if(d.cyclic&&l.length>1||p!==0)z.show();if(d.cyclic&&l.length>1||p!=l.length-1)A.show()}else{z.hide();A.hide()}},S=function(){if(!b.support.opacity){j.get(0).style.removeAttribute("filter");f.get(0).style.removeAttribute("filter")}e.autoDimensions&&j.css("height","auto");f.css("height","auto");
+s&&s.length&&n.show();d.showCloseButton&&E.show();Y();d.hideOnContentClick&&j.bind("click",b.fancybox.close);d.hideOnOverlayClick&&u.bind("click",b.fancybox.close);b(window).bind("resize.fb",b.fancybox.resize);d.centerOnScroll&&b(window).bind("scroll.fb",b.fancybox.center);if(d.type=="iframe")b('<iframe id="fancybox-frame" name="fancybox-frame'+(new Date).getTime()+'" frameborder="0" hspace="0" '+(b.browser.msie?'allowtransparency="true""':"")+' scrolling="'+e.scrolling+'" src="'+d.href+'"></iframe>').appendTo(j);
+f.show();h=false;b.fancybox.center();d.onComplete(l,p,d);var a,c;if(l.length-1>p){a=l[p+1].href;if(typeof a!=="undefined"&&a.match(J)){c=new Image;c.src=a}}if(p>0){a=l[p-1].href;if(typeof a!=="undefined"&&a.match(J)){c=new Image;c.src=a}}},T=function(a){var c={width:parseInt(r.width+(i.width-r.width)*a,10),height:parseInt(r.height+(i.height-r.height)*a,10),top:parseInt(r.top+(i.top-r.top)*a,10),left:parseInt(r.left+(i.left-r.left)*a,10)};if(typeof i.opacity!=="undefined")c.opacity=a<0.5?0.5:a;f.css(c);
+j.css({width:c.width-d.padding*2,height:c.height-y*a-d.padding*2})},U=function(){return[b(window).width()-d.margin*2,b(window).height()-d.margin*2,b(document).scrollLeft()+d.margin,b(document).scrollTop()+d.margin]},X=function(){var a=U(),c={},g=d.autoScale,k=d.padding*2;c.width=d.width.toString().indexOf("%")>-1?parseInt(a[0]*parseFloat(d.width)/100,10):d.width+k;c.height=d.height.toString().indexOf("%")>-1?parseInt(a[1]*parseFloat(d.height)/100,10):d.height+k;if(g&&(c.width>a[0]||c.height>a[1]))if(e.type==
+"image"||e.type=="swf"){g=d.width/d.height;if(c.width>a[0]){c.width=a[0];c.height=parseInt((c.width-k)/g+k,10)}if(c.height>a[1]){c.height=a[1];c.width=parseInt((c.height-k)*g+k,10)}}else{c.width=Math.min(c.width,a[0]);c.height=Math.min(c.height,a[1])}c.top=parseInt(Math.max(a[3]-20,a[3]+(a[1]-c.height-40)*0.5),10);c.left=parseInt(Math.max(a[2]-20,a[2]+(a[0]-c.width-40)*0.5),10);return c},V=function(){var a=e.orig?b(e.orig):false,c={};if(a&&a.length){c=a.offset();c.top+=parseInt(a.css("paddingTop"),
+10)||0;c.left+=parseInt(a.css("paddingLeft"),10)||0;c.top+=parseInt(a.css("border-top-width"),10)||0;c.left+=parseInt(a.css("border-left-width"),10)||0;c.width=a.width();c.height=a.height();c={width:c.width+d.padding*2,height:c.height+d.padding*2,top:c.top-d.padding-20,left:c.left-d.padding-20}}else{a=U();c={width:d.padding*2,height:d.padding*2,top:parseInt(a[3]+a[1]*0.5,10),left:parseInt(a[2]+a[0]*0.5,10)}}return c},Z=function(){if(t.is(":visible")){b("div",t).css("top",L*-40+"px");L=(L+1)%12}else clearInterval(K)};
+b.fn.fancybox=function(a){if(!b(this).length)return this;b(this).data("fancybox",b.extend({},a,b.metadata?b(this).metadata():{})).unbind("click.fb").bind("click.fb",function(c){c.preventDefault();if(!h){h=true;b(this).blur();o=[];q=0;c=b(this).attr("rel")||"";if(!c||c==""||c==="nofollow")o.push(this);else{o=b("a[rel="+c+"], area[rel="+c+"]");q=o.index(this)}I()}});return this};b.fancybox=function(a,c){var g;if(!h){h=true;g=typeof c!=="undefined"?c:{};o=[];q=parseInt(g.index,10)||0;if(b.isArray(a)){for(var k=
+0,C=a.length;k<C;k++)if(typeof a[k]=="object")b(a[k]).data("fancybox",b.extend({},g,a[k]));else a[k]=b({}).data("fancybox",b.extend({content:a[k]},g));o=jQuery.merge(o,a)}else{if(typeof a=="object")b(a).data("fancybox",b.extend({},g,a));else a=b({}).data("fancybox",b.extend({content:a},g));o.push(a)}if(q>o.length||q<0)q=0;I()}};b.fancybox.showActivity=function(){clearInterval(K);t.show();K=setInterval(Z,66)};b.fancybox.hideActivity=function(){t.hide()};b.fancybox.next=function(){return b.fancybox.pos(p+
+1)};b.fancybox.prev=function(){return b.fancybox.pos(p-1)};b.fancybox.pos=function(a){if(!h){a=parseInt(a);o=l;if(a>-1&&a<l.length){q=a;I()}else if(d.cyclic&&l.length>1){q=a>=l.length?0:l.length-1;I()}}};b.fancybox.cancel=function(){if(!h){h=true;b.event.trigger("fancybox-cancel");N();e.onCancel(o,q,e);h=false}};b.fancybox.close=function(){function a(){u.fadeOut("fast");n.empty().hide();f.hide();b.event.trigger("fancybox-cleanup");j.empty();d.onClosed(l,p,d);l=e=[];p=q=0;d=e={};h=false}if(!(h||f.is(":hidden"))){h=
+true;if(d&&false===d.onCleanup(l,p,d))h=false;else{N();b(E.add(z).add(A)).hide();b(j.add(u)).unbind();b(window).unbind("resize.fb scroll.fb");b(document).unbind("keydown.fb");j.find("iframe").attr("src",M&&/^https/i.test(window.location.href||"")?"javascript:void(false)":"about:blank");d.titlePosition!=="inside"&&n.empty();f.stop();if(d.transitionOut=="elastic"){r=V();var c=f.position();i={top:c.top,left:c.left,width:f.width(),height:f.height()};if(d.opacity)i.opacity=1;n.empty().hide();B.prop=1;
+b(B).animate({prop:0},{duration:d.speedOut,easing:d.easingOut,step:T,complete:a})}else f.fadeOut(d.transitionOut=="none"?0:d.speedOut,a)}}};b.fancybox.resize=function(){u.is(":visible")&&u.css("height",b(document).height());b.fancybox.center(true)};b.fancybox.center=function(a){var c,g;if(!h){g=a===true?1:0;c=U();!g&&(f.width()>c[0]||f.height()>c[1])||f.stop().animate({top:parseInt(Math.max(c[3]-20,c[3]+(c[1]-j.height()-40)*0.5-d.padding)),left:parseInt(Math.max(c[2]-20,c[2]+(c[0]-j.width()-40)*0.5-
+d.padding))},typeof a=="number"?a:200)}};b.fancybox.init=function(){if(!b("#fancybox-wrap").length){b("body").append(m=b('<div id="fancybox-tmp"></div>'),t=b('<div id="fancybox-loading"><div></div></div>'),u=b('<div id="fancybox-overlay"></div>'),f=b('<div id="fancybox-wrap"></div>'));D=b('<div id="fancybox-outer"></div>').append('<div class="fancybox-bg" id="fancybox-bg-n"></div><div class="fancybox-bg" id="fancybox-bg-ne"></div><div class="fancybox-bg" id="fancybox-bg-e"></div><div class="fancybox-bg" id="fancybox-bg-se"></div><div class="fancybox-bg" id="fancybox-bg-s"></div><div class="fancybox-bg" id="fancybox-bg-sw"></div><div class="fancybox-bg" id="fancybox-bg-w"></div><div class="fancybox-bg" id="fancybox-bg-nw"></div>').appendTo(f);
+D.append(j=b('<div id="fancybox-content"></div>'),E=b('<a id="fancybox-close"></a>'),n=b('<div id="fancybox-title"></div>'),z=b('<a href="javascript:;" id="fancybox-left"><span class="fancy-ico" id="fancybox-left-ico"></span></a>'),A=b('<a href="javascript:;" id="fancybox-right"><span class="fancy-ico" id="fancybox-right-ico"></span></a>'));E.click(b.fancybox.close);t.click(b.fancybox.cancel);z.click(function(a){a.preventDefault();b.fancybox.prev()});A.click(function(a){a.preventDefault();b.fancybox.next()});
+b.fn.mousewheel&&f.bind("mousewheel.fb",function(a,c){if(h)a.preventDefault();else if(b(a.target).get(0).clientHeight==0||b(a.target).get(0).scrollHeight===b(a.target).get(0).clientHeight){a.preventDefault();b.fancybox[c>0?"prev":"next"]()}});b.support.opacity||f.addClass("fancybox-ie");if(M){t.addClass("fancybox-ie6");f.addClass("fancybox-ie6");b('<iframe id="fancybox-hide-sel-frame" src="'+(/^https/i.test(window.location.href||"")?"javascript:void(false)":"about:blank")+'" scrolling="no" border="0" frameborder="0" tabindex="-1"></iframe>').prependTo(D)}}};
+b.fn.fancybox.defaults={padding:10,margin:40,opacity:false,modal:false,cyclic:false,scrolling:"auto",width:560,height:340,autoScale:true,autoDimensions:true,centerOnScroll:false,ajax:{},swf:{wmode:"transparent"},hideOnOverlayClick:true,hideOnContentClick:false,overlayShow:true,overlayOpacity:0.7,overlayColor:"#777",titleShow:true,titlePosition:"float",titleFormat:null,titleFromAlt:false,transitionIn:"fade",transitionOut:"fade",speedIn:300,speedOut:300,changeSpeed:300,changeFade:"fast",easingIn:"swing",
+easingOut:"swing",showCloseButton:true,showNavArrows:true,enableEscapeButton:true,enableKeyboardNav:true,onStart:function(){},onCancel:function(){},onComplete:function(){},onCleanup:function(){},onClosed:function(){},onError:function(){}};b(document).ready(function(){b.fancybox.init()})})(jQuery);
@@ -1010,6 +1010,43 @@ code input {
   display: none;
 }
  
+.zoomable-image {
+  position: relative;
+  display: inline-block;
+}
+
+/* IE 7 hack to simulate inline-block */
+.msie7 .zoomable-image {
+  zoom: 1;
+  *display: inline;
+}
+
+.zoomify-image {
+  position: absolute;
+  left: 0;
+  top: 0;
+  display: block;
+  width: 100%;
+  height: 16px;
+  text-align: right;
+  background: transparent url(/images/black-alpha-pixel.png);
+  border-bottom: 1px solid #333;
+}
+
+#article .zoomify-image {
+  text-decoration: none;
+  color: #fff;
+}
+
+.zoomify-image span {
+  font-size: 10px;
+  line-height: 16px;
+  padding-right: 16px;
+  border-bottom: 1px solid #eee;
+  display: block;
+  background: transparent url(/images/zoom.png) right center no-repeat;
+}
+
 /* * *  Comments  * * */
  
 .comments {  }
@@ -0,0 +1,359 @@
+/*
+ * FancyBox - jQuery Plugin
+ * Simple and fancy lightbox alternative
+ *
+ * Examples and documentation at: http://fancybox.net
+ *
+ * Copyright (c) 2008 - 2010 Janis Skarnelis
+ * That said, it is hardly a one-person project. Many people have submitted bugs, code, and offered their advice freely. Their support is greatly appreciated.
+ *
+ * Version: 1.3.4 (11/11/2010)
+ * Requires: jQuery v1.3+
+ *
+ * Dual licensed under the MIT and GPL licenses:
+ *   http://www.opensource.org/licenses/mit-license.php
+ *   http://www.gnu.org/licenses/gpl.html
+ */
+
+#fancybox-loading {
+	position: fixed;
+	top: 50%;
+	left: 50%;
+	width: 40px;
+	height: 40px;
+	margin-top: -20px;
+	margin-left: -20px;
+	cursor: pointer;
+	overflow: hidden;
+	z-index: 1104;
+	display: none;
+}
+
+#fancybox-loading div {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 40px;
+	height: 480px;
+	background-image: url('../images/fancybox/fancybox.png');
+}
+
+#fancybox-overlay {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	z-index: 1100;
+	display: none;
+}
+
+#fancybox-tmp {
+	padding: 0;
+	margin: 0;
+	border: 0;
+	overflow: auto;
+	display: none;
+}
+
+#fancybox-wrap {
+	position: absolute;
+	top: 0;
+	left: 0;
+	padding: 20px;
+	z-index: 1101;
+	outline: none;
+	display: none;
+}
+
+#fancybox-outer {
+	position: relative;
+	width: 100%;
+	height: 100%;
+	background: #fff;
+}
+
+#fancybox-content {
+	width: 0;
+	height: 0;
+	padding: 0;
+	outline: none;
+	position: relative;
+	overflow: hidden;
+	z-index: 1102;
+	border: 0px solid #fff;
+}
+
+#fancybox-hide-sel-frame {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background: transparent;
+	z-index: 1101;
+}
+
+#fancybox-close {
+	position: absolute;
+	top: -15px;
+	right: -15px;
+	width: 30px;
+	height: 30px;
+	background: transparent url('../images/fancybox/fancybox.png') -40px 0px;
+	cursor: pointer;
+	z-index: 1103;
+	display: none;
+}
+
+#fancybox-error {
+	color: #444;
+	font: normal 12px/20px Arial;
+	padding: 14px;
+	margin: 0;
+}
+
+#fancybox-img {
+	width: 100%;
+	height: 100%;
+	padding: 0;
+	margin: 0;
+	border: none;
+	outline: none;
+	line-height: 0;
+	vertical-align: top;
+}
+
+#fancybox-frame {
+	width: 100%;
+	height: 100%;
+	border: none;
+	display: block;
+}
+
+#fancybox-left, #fancybox-right {
+	position: absolute;
+	bottom: 0px;
+	height: 100%;
+	width: 35%;
+	cursor: pointer;
+	outline: none;
+	background: transparent url('../images/fancybox/blank.gif');
+	z-index: 1102;
+	display: none;
+}
+
+#fancybox-left {
+	left: 0px;
+}
+
+#fancybox-right {
+	right: 0px;
+}
+
+#fancybox-left-ico, #fancybox-right-ico {
+	position: absolute;
+	top: 50%;
+	left: -9999px;
+	width: 30px;
+	height: 30px;
+	margin-top: -15px;
+	cursor: pointer;
+	z-index: 1102;
+	display: block;
+}
+
+#fancybox-left-ico {
+	background-image: url('../images/fancybox/fancybox.png');
+	background-position: -40px -30px;
+}
+
+#fancybox-right-ico {
+	background-image: url('../images/fancybox/fancybox.png');
+	background-position: -40px -60px;
+}
+
+#fancybox-left:hover, #fancybox-right:hover {
+	visibility: visible; /* IE6 */
+}
+
+#fancybox-left:hover span {
+	left: 20px;
+}
+
+#fancybox-right:hover span {
+	left: auto;
+	right: 20px;
+}
+
+.fancybox-bg {
+	position: absolute;
+	padding: 0;
+	margin: 0;
+	border: 0;
+	width: 20px;
+	height: 20px;
+	z-index: 1001;
+}
+
+#fancybox-bg-n {
+	top: -20px;
+	left: 0;
+	width: 100%;
+	background-image: url('../images/fancybox/fancybox-x.png');
+}
+
+#fancybox-bg-ne {
+	top: -20px;
+	right: -20px;
+	background-image: url('../images/fancybox/fancybox.png');
+	background-position: -40px -162px;
+}
+
+#fancybox-bg-e {
+	top: 0;
+	right: -20px;
+	height: 100%;
+	background-image: url('../images/fancybox/fancybox-y.png');
+	background-position: -20px 0px;
+}
+
+#fancybox-bg-se {
+	bottom: -20px;
+	right: -20px;
+	background-image: url('../images/fancybox/fancybox.png');
+	background-position: -40px -182px;
+}
+
+#fancybox-bg-s {
+	bottom: -20px;
+	left: 0;
+	width: 100%;
+	background-image: url('../images/fancybox/fancybox-x.png');
+	background-position: 0px -20px;
+}
+
+#fancybox-bg-sw {
+	bottom: -20px;
+	left: -20px;
+	background-image: url('../images/fancybox/fancybox.png');
+	background-position: -40px -142px;
+}
+
+#fancybox-bg-w {
+	top: 0;
+	left: -20px;
+	height: 100%;
+	background-image: url('../images/fancybox/fancybox-y.png');
+}
+
+#fancybox-bg-nw {
+	top: -20px;
+	left: -20px;
+	background-image: url('../images/fancybox/fancybox.png');
+	background-position: -40px -122px;
+}
+
+#fancybox-title {
+	font-family: Helvetica;
+	font-size: 12px;
+	z-index: 1102;
+}
+
+.fancybox-title-inside {
+	padding-bottom: 10px;
+	text-align: center;
+	color: #333;
+	background: #fff;
+	position: relative;
+}
+
+.fancybox-title-outside {
+	padding-top: 10px;
+	color: #fff;
+}
+
+.fancybox-title-over {
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	color: #FFF;
+	text-align: left;
+}
+
+#fancybox-title-over {
+	padding: 10px;
+	background-image: url('../images/fancybox/fancy_title_over.png');
+	display: block;
+}
+
+.fancybox-title-float {
+	position: absolute;
+	left: 0;
+	bottom: -20px;
+	height: 32px;
+}
+
+#fancybox-title-float-wrap {
+	border: none;
+	border-collapse: collapse;
+	width: auto;
+}
+
+#fancybox-title-float-wrap td {
+	border: none;
+	white-space: nowrap;
+}
+
+#fancybox-title-float-left {
+	padding: 0 0 0 15px;
+	background: url('../images/fancybox/fancybox.png') -40px -90px no-repeat;
+}
+
+#fancybox-title-float-main {
+	color: #FFF;
+	line-height: 29px;
+	font-weight: bold;
+	padding: 0 0 3px 0;
+	background: url('../images/fancybox/fancybox-x.png') 0px -40px;
+}
+
+#fancybox-title-float-right {
+	padding: 0 0 0 15px;
+	background: url('../images/fancybox/fancybox.png') -55px -90px no-repeat;
+}
+
+/* IE6 */
+
+.fancybox-ie6 #fancybox-close { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/fancybox/fancy_close.png', sizingMethod='scale'); }
+
+.fancybox-ie6 #fancybox-left-ico { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/fancybox/fancy_nav_left.png', sizingMethod='scale'); }
+.fancybox-ie6 #fancybox-right-ico { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/fancybox/fancy_nav_right.png', sizingMethod='scale'); }
+
+.fancybox-ie6 #fancybox-title-over { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/fancybox/fancy_title_over.png', sizingMethod='scale'); zoom: 1; }
+.fancybox-ie6 #fancybox-title-float-left { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/fancybox/fancy_title_left.png', sizingMethod='scale'); }
+.fancybox-ie6 #fancybox-title-float-main { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/fancybox/fancy_title_main.png', sizingMethod='scale'); }
+.fancybox-ie6 #fancybox-title-float-right { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/fancybox/fancy_title_right.png', sizingMethod='scale'); }
+
+.fancybox-ie6 #fancybox-bg-w, .fancybox-ie6 #fancybox-bg-e, .fancybox-ie6 #fancybox-left, .fancybox-ie6 #fancybox-right, #fancybox-hide-sel-frame {
+	height: expression(this.parentNode.clientHeight + "px");
+}
+
+#fancybox-loading.fancybox-ie6 {
+	position: absolute; margin-top: 0;
+	top: expression( (-20 + (document.documentElement.clientHeight ? document.documentElement.clientHeight/2 : document.body.clientHeight/2 ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop )) + 'px');
+}
+
+#fancybox-loading.fancybox-ie6 div	{ background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/fancybox/fancy_loading.png', sizingMethod='scale'); }
+
+/* IE6, IE7, IE8 */
+
+.fancybox-ie .fancybox-bg { background: transparent !important; }
+
+.fancybox-ie #fancybox-bg-n { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/fancybox/fancy_shadow_n.png', sizingMethod='scale'); }
+.fancybox-ie #fancybox-bg-ne { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/fancybox/fancy_shadow_ne.png', sizingMethod='scale'); }
+.fancybox-ie #fancybox-bg-e { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/fancybox/fancy_shadow_e.png', sizingMethod='scale'); }
+.fancybox-ie #fancybox-bg-se { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/fancybox/fancy_shadow_se.png', sizingMethod='scale'); }
+.fancybox-ie #fancybox-bg-s { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/fancybox/fancy_shadow_s.png', sizingMethod='scale'); }
+.fancybox-ie #fancybox-bg-sw { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/fancybox/fancy_shadow_sw.png', sizingMethod='scale'); }
+.fancybox-ie #fancybox-bg-w { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/fancybox/fancy_shadow_w.png', sizingMethod='scale'); }
+.fancybox-ie #fancybox-bg-nw { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/fancybox/fancy_shadow_nw.png', sizingMethod='scale'); }
@@ -593,6 +593,20 @@ class ApplicationHelperTest &lt; Test::Unit::TestCase
     assert_match person.name, task_information(task)
   end
  
+  should 'return nil when :show_zoom_button_on_article_images is not enabled in environment' do
+    env = Environment.default
+    env.stubs(:enabled?).with(:show_zoom_button_on_article_images).returns(false)
+    stubs(:environment).returns(env)
+    assert_nil add_zoom_to_images
+  end
+
+  should 'return code when :show_zoom_button_on_article_images is enabled in environment' do
+    env = Environment.default
+    env.stubs(:enabled?).with(:show_zoom_button_on_article_images).returns(true)
+    stubs(:environment).returns(env)
+    assert_not_nil add_zoom_to_images
+  end
+
   protected
  
   def url_for(args = {})
@@ -604,6 +618,9 @@ class ApplicationHelperTest &lt; Test::Unit::TestCase
   def javascript_tag(any)
     ''
   end
+  def javascript_include_tag(any)
+    ''
+  end
   def link_to(label, action, options = {})
     label
   end
...	...	@@ -1190,4 +1190,23 @@ module ApplicationHelper
1190	1190	task.information[:message] % values
1191	1191	end
1192	1192
	1193	+ def add_zoom_to_images
	1194	+ if environment.enabled?(:show_zoom_button_on_article_images)
	1195	+ stylesheet_link_tag('fancybox') +
	1196	+ javascript_include_tag('jquery.fancybox-1.3.4.pack') +
	1197	+ javascript_tag("jQuery(function($) {
	1198	+ $('#article .article-body img').each( function(index) {
	1199	+ var original = original_image_dimensions($(this).attr('src'));
	1200	+ if ($(this).width() < original['width'] \|\| $(this).height() < original['height']) {
	1201	+ $(this).wrap('<div class=\"zoomable-image\" />');
	1202	+ $(this).parent('.zoomable-image').attr('style', $(this).attr('style'));
	1203	+ $(this).attr('style', '');
	1204	+ $(this).after(\'<a href=\"' + $(this).attr('src') + '\" class=\"zoomify-image\"><span class=\"zoomify-text\">%s</span></a>');
	1205	+ }
	1206	+ });
	1207	+ $('.zoomify-image').fancybox();
	1208	+ });" % _('Zoom in'))
	1209	+ end
	1210	+ end
	1211	+
1193	1212	end
...	...
...	...	@@ -108,7 +108,8 @@ class Environment < ActiveRecord::Base
108	108	'admin_must_approve_new_communities' => _("Admin must approve creation of communities"),
109	109	'enterprises_are_disabled_when_created' => __('Enterprises are disabled when created'),
110	110	'show_balloon_with_profile_links_when_clicked' => _('Show a balloon with profile links when a profile image is clicked'),
111		- 'xmpp_chat' => _('XMPP/Jabber based chat')
	111	+ 'xmpp_chat' => _('XMPP/Jabber based chat'),
	112	+ 'show_zoom_button_on_article_images' => _('Show a zoom link on all article images')
112	113	}
113	114	end
114	115
...	...
...	...	@@ -135,3 +135,4 @@
135	135	</div><!-- end class="comments" -->
136	136
137	137	</div><!-- end id="article" -->
	138	+<%= add_zoom_to_images %>
...	...
...	...	@@ -0,0 +1,50 @@
	1	+Feature: clickable images
	2	+ As a visitor
	3	+ I want to zoom in article images
	4	+
	5	+ Background:
	6	+ Given feature "show_zoom_button_on_article_images" is enabled on environment
	7	+ And the following users
	8	+ \| login \|
	9	+ \| booking \|
	10	+
	11	+ @selenium
	12	+ Scenario: show link if image is scaled
	13	+ Given the following article with image
	14	+ \| owner \| name \| image \| dimensions \|
	15	+ \| booking \| small \| rails.png \| 20x20 \|
	16	+ When I go to /booking/small
	17	+ Then I should see "Zoom in"
	18	+
	19	+ @selenium
	20	+ Scenario: not show link if image is not scaled
	21	+ Given the following article with image
	22	+ \| owner \| name \| image \| dimensions \|
	23	+ \| booking \| real \| rails.png \| 50x64 \|
	24	+ When I go to /booking/real
	25	+ Then I should not see "Zoom in"
	26	+
	27	+ @selenium
	28	+ Scenario: not show link if image does not have dimensions set
	29	+ Given the following article with image
	30	+ \| owner \| name \| image \|
	31	+ \| booking \| not set \| rails.png \|
	32	+ When I go to /booking/not-set
	33	+ Then I should not see "Zoom in"
	34	+
	35	+ @selenium
	36	+ Scenario: copy style from image
	37	+ Given the following article with image
	38	+ \| owner \| name \| image \| style \| dimensions \|
	39	+ \| booking \| with style \| rails.png \| float: right \| 25x32 \|
	40	+ When I go to /booking/with-style
	41	+ Then "zoomable-image" should be right aligned
	42	+
	43	+ @selenium
	44	+ Scenario: zoom image
	45	+ Given the following article with image
	46	+ \| owner \| name \| image \| dimensions \|
	47	+ \| booking \| zoom \| rails.png \| 25x32 \|
	48	+ When I go to /booking/zoom
	49	+ And I follow "Zoom in"
	50	+ Then the "#fancybox-wrap" should be visible
...	...
...	...	@@ -83,6 +83,29 @@ Given /^the following files$/ do \|table\|
83	83	end
84	84	end
85	85
	86	+Given /^the following articles? with images?$/ do \|table\|
	87	+ table.hashes.each do \|item\|
	88	+ owner = Profile[item[:owner]]
	89	+ file = item[:image]
	90	+ img = { :src => "/images/#{file}", :alt => file }
	91	+ img[:width] = item[:dimensions].split('x')[0] if item[:dimensions]
	92	+ img[:height] = item[:dimensions].split('x')[1] if item[:dimensions]
	93	+ img[:style] = item[:style] if item[:style]
	94	+ img_tag = "<img "
	95	+ img.each { \|attr, value\| img_tag += "#{attr}=\"#{value}\" " }
	96	+ img_tag += "/>"
	97	+ article = TinyMceArticle.new(:profile => owner, :name => item[:name], :body => img_tag)
	98	+ if item[:parent]
	99	+ article.parent = Article.find_by_slug(item[:parent])
	100	+ end
	101	+ article.save!
	102	+ if item[:homepage]
	103	+ owner.home_page = article
	104	+ owner.save!
	105	+ end
	106	+ end
	107	+end
	108	+
86	109	Given /^the following products?$/ do \|table\|
87	110	table.hashes.each do \|item\|
88	111	data = item.dup
...	...
...	...	@@ -80,6 +80,11 @@ Then /^there should be ([1-9][0-9]) "([^\"])" within "([^\"]*)"$/ do \|number,
80	80	response.selenium.get_xpath_count("//[contains(@class,'#{parent_class}')]//[contains(@class,'#{child_class}')]").to_i.should be(number.to_i)
81	81	end
82	82
	83	+Then /^"([^\"]*)" should be (left\|right) aligned$/ do \|element_class, align\|
	84	+ # Using xpath is the only way to count
	85	+ response.selenium.get_xpath_count("//*[contains(@class,'#{element_class}') and contains(@style,'float: #{align}')]").to_i.should be(1)
	86	+end
	87	+
83	88	#### Noosfero specific steps ####
84	89
85	90	Then /^the select for category "([^\"]*)" should be visible$/ do \|name\|
...	...
...	...	@@ -667,3 +667,9 @@ function add_comment_reply_form(button, comment_id) {
667	667	}
668	668	return f;
669	669	}
	670	+
	671	+function original_image_dimensions(src) {
	672	+ var img = new Image();
	673	+ img.src = src;
	674	+ return { 'width' : img.width, 'height' : img.height };
	675	+}
...	...
...	...	@@ -0,0 +1,46 @@
	1	+/*
	2	+ * FancyBox - jQuery Plugin
	3	+ * Simple and fancy lightbox alternative
	4	+ *
	5	+ * Examples and documentation at: http://fancybox.net
	6	+ *
	7	+ * Copyright (c) 2008 - 2010 Janis Skarnelis
	8	+ * That said, it is hardly a one-person project. Many people have submitted bugs, code, and offered their advice freely. Their support is greatly appreciated.
	9	+ *
	10	+ * Version: 1.3.4 (11/11/2010)
	11	+ * Requires: jQuery v1.3+
	12	+ *
	13	+ * Dual licensed under the MIT and GPL licenses:
	14	+ * http://www.opensource.org/licenses/mit-license.php
	15	+ * http://www.gnu.org/licenses/gpl.html
	16	+ */
	17	+
	18	+;(function(b){var m,t,u,f,D,j,E,n,z,A,q=0,e={},o=[],p=0,d={},l=[],G=null,v=new Image,J=/\.(jpg\|gif\|png\|bmp\|jpeg)(.)?$/i,W=/[^\.]\.(swf)\s$/i,K,L=1,y=0,s="",r,i,h=false,B=b.extend(b("<div/>")[0],{prop:0}),M=b.browser.msie&&b.browser.version<7&&!window.XMLHttpRequest,N=function(){t.hide();v.onerror=v.onload=null;G&&G.abort();m.empty()},O=function(){if(false===e.onError(o,q,e)){t.hide();h=false}else{e.titleShow=false;e.width="auto";e.height="auto";m.html('<p id="fancybox-error">The requested content cannot be loaded.<br />Please try again later.</p>');
	19	+F()}},I=function(){var a=o[q],c,g,k,C,P,w;N();e=b.extend({},b.fn.fancybox.defaults,typeof b(a).data("fancybox")=="undefined"?e:b(a).data("fancybox"));w=e.onStart(o,q,e);if(w===false)h=false;else{if(typeof w=="object")e=b.extend(e,w);k=e.title\|\|(a.nodeName?b(a).attr("title"):a.title)\|\|"";if(a.nodeName&&!e.orig)e.orig=b(a).children("img:first").length?b(a).children("img:first"):b(a);if(k===""&&e.orig&&e.titleFromAlt)k=e.orig.attr("alt");c=e.href\|\|(a.nodeName?b(a).attr("href"):a.href)\|\|null;if(/^(?:javascript)/i.test(c)\|\|
	20	+c=="#")c=null;if(e.type){g=e.type;if(!c)c=e.content}else if(e.content)g="html";else if(c)g=c.match(J)?"image":c.match(W)?"swf":b(a).hasClass("iframe")?"iframe":c.indexOf("#")===0?"inline":"ajax";if(g){if(g=="inline"){a=c.substr(c.indexOf("#"));g=b(a).length>0?"inline":"ajax"}e.type=g;e.href=c;e.title=k;if(e.autoDimensions)if(e.type=="html"\|\|e.type=="inline"\|\|e.type=="ajax"){e.width="auto";e.height="auto"}else e.autoDimensions=false;if(e.modal){e.overlayShow=true;e.hideOnOverlayClick=false;e.hideOnContentClick=
	21	+false;e.enableEscapeButton=false;e.showCloseButton=false}e.padding=parseInt(e.padding,10);e.margin=parseInt(e.margin,10);m.css("padding",e.padding+e.margin);b(".fancybox-inline-tmp").unbind("fancybox-cancel").bind("fancybox-change",function(){b(this).replaceWith(j.children())});switch(g){case "html":m.html(e.content);F();break;case "inline":if(b(a).parent().is("#fancybox-content")===true){h=false;break}b('<div class="fancybox-inline-tmp" />').hide().insertBefore(b(a)).bind("fancybox-cleanup",function(){b(this).replaceWith(j.children())}).bind("fancybox-cancel",
	22	+function(){b(this).replaceWith(m.children())});b(a).appendTo(m);F();break;case "image":h=false;b.fancybox.showActivity();v=new Image;v.onerror=function(){O()};v.onload=function(){h=true;v.onerror=v.onload=null;e.width=v.width;e.height=v.height;b("<img />").attr({id:"fancybox-img",src:v.src,alt:e.title}).appendTo(m);Q()};v.src=c;break;case "swf":e.scrolling="no";C='<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="'+e.width+'" height="'+e.height+'"><param name="movie" value="'+c+
	23	+'"></param>';P="";b.each(e.swf,function(x,H){C+='<param name="'+x+'" value="'+H+'"></param>';P+=" "+x+'="'+H+'"'});C+='<embed src="'+c+'" type="application/x-shockwave-flash" width="'+e.width+'" height="'+e.height+'"'+P+"></embed></object>";m.html(C);F();break;case "ajax":h=false;b.fancybox.showActivity();e.ajax.win=e.ajax.success;G=b.ajax(b.extend({},e.ajax,{url:c,data:e.ajax.data\|\|{},error:function(x){x.status>0&&O()},success:function(x,H,R){if((typeof R=="object"?R:G).status==200){if(typeof e.ajax.win==
	24	+"function"){w=e.ajax.win(c,x,H,R);if(w===false){t.hide();return}else if(typeof w=="string"\|\|typeof w=="object")x=w}m.html(x);F()}}}));break;case "iframe":Q()}}else O()}},F=function(){var a=e.width,c=e.height;a=a.toString().indexOf("%")>-1?parseInt((b(window).width()-e.margin2)parseFloat(a)/100,10)+"px":a=="auto"?"auto":a+"px";c=c.toString().indexOf("%")>-1?parseInt((b(window).height()-e.margin2)parseFloat(c)/100,10)+"px":c=="auto"?"auto":c+"px";m.wrapInner('<div style="width:'+a+";height:"+c+
	25	+";overflow: "+(e.scrolling=="auto"?"auto":e.scrolling=="yes"?"scroll":"hidden")+';position:relative;"></div>');e.width=m.width();e.height=m.height();Q()},Q=function(){var a,c;t.hide();if(f.is(":visible")&&false===d.onCleanup(l,p,d)){b.event.trigger("fancybox-cancel");h=false}else{h=true;b(j.add(u)).unbind();b(window).unbind("resize.fb scroll.fb");b(document).unbind("keydown.fb");f.is(":visible")&&d.titlePosition!=="outside"&&f.css("height",f.height());l=o;p=q;d=e;if(d.overlayShow){u.css({"background-color":d.overlayColor,
	26	+opacity:d.overlayOpacity,cursor:d.hideOnOverlayClick?"pointer":"auto",height:b(document).height()});if(!u.is(":visible")){M&&b("select:not(#fancybox-tmp select)").filter(function(){return this.style.visibility!=="hidden"}).css({visibility:"hidden"}).one("fancybox-cleanup",function(){this.style.visibility="inherit"});u.show()}}else u.hide();i=X();s=d.title\|\|"";y=0;n.empty().removeAttr("style").removeClass();if(d.titleShow!==false){if(b.isFunction(d.titleFormat))a=d.titleFormat(s,l,p,d);else a=s&&s.length?
	27	+d.titlePosition=="float"?'<table id="fancybox-title-float-wrap" cellpadding="0" cellspacing="0"><tr><td id="fancybox-title-float-left"></td><td id="fancybox-title-float-main">'+s+'</td><td id="fancybox-title-float-right"></td></tr></table>':'<div id="fancybox-title-'+d.titlePosition+'">'+s+"</div>":false;s=a;if(!(!s\|\|s==="")){n.addClass("fancybox-title-"+d.titlePosition).html(s).appendTo("body").show();switch(d.titlePosition){case "inside":n.css({width:i.width-d.padding*2,marginLeft:d.padding,marginRight:d.padding});
	28	+y=n.outerHeight(true);n.appendTo(D);i.height+=y;break;case "over":n.css({marginLeft:d.padding,width:i.width-d.padding2,bottom:d.padding}).appendTo(D);break;case "float":n.css("left",parseInt((n.width()-i.width-40)/2,10)-1).appendTo(f);break;default:n.css({width:i.width-d.padding*2,paddingLeft:d.padding,paddingRight:d.padding}).appendTo(f)}}}n.hide();if(f.is(":visible")){b(E.add(z).add(A)).hide();a=f.position();r={top:a.top,left:a.left,width:f.width(),height:f.height()};c=r.width==i.width&&r.height==
	29	+i.height;j.fadeTo(d.changeFade,0.3,function(){var g=function(){j.html(m.contents()).fadeTo(d.changeFade,1,S)};b.event.trigger("fancybox-change");j.empty().removeAttr("filter").css({"border-width":d.padding,width:i.width-d.padding2,height:e.autoDimensions?"auto":i.height-y-d.padding2});if(c)g();else{B.prop=0;b(B).animate({prop:1},{duration:d.changeSpeed,easing:d.easingChange,step:T,complete:g})}})}else{f.removeAttr("style");j.css("border-width",d.padding);if(d.transitionIn=="elastic"){r=V();j.html(m.contents());
	30	+f.show();if(d.opacity)i.opacity=0;B.prop=0;b(B).animate({prop:1},{duration:d.speedIn,easing:d.easingIn,step:T,complete:S})}else{d.titlePosition=="inside"&&y>0&&n.show();j.css({width:i.width-d.padding2,height:e.autoDimensions?"auto":i.height-y-d.padding2}).html(m.contents());f.css(i).fadeIn(d.transitionIn=="none"?0:d.speedIn,S)}}}},Y=function(){if(d.enableEscapeButton\|\|d.enableKeyboardNav)b(document).bind("keydown.fb",function(a){if(a.keyCode==27&&d.enableEscapeButton){a.preventDefault();b.fancybox.close()}else if((a.keyCode==
	31	+37\|\|a.keyCode==39)&&d.enableKeyboardNav&&a.target.tagName!=="INPUT"&&a.target.tagName!=="TEXTAREA"&&a.target.tagName!=="SELECT"){a.preventDefault();b.fancybox[a.keyCode==37?"prev":"next"]()}});if(d.showNavArrows){if(d.cyclic&&l.length>1\|\|p!==0)z.show();if(d.cyclic&&l.length>1\|\|p!=l.length-1)A.show()}else{z.hide();A.hide()}},S=function(){if(!b.support.opacity){j.get(0).style.removeAttribute("filter");f.get(0).style.removeAttribute("filter")}e.autoDimensions&&j.css("height","auto");f.css("height","auto");
	32	+s&&s.length&&n.show();d.showCloseButton&&E.show();Y();d.hideOnContentClick&&j.bind("click",b.fancybox.close);d.hideOnOverlayClick&&u.bind("click",b.fancybox.close);b(window).bind("resize.fb",b.fancybox.resize);d.centerOnScroll&&b(window).bind("scroll.fb",b.fancybox.center);if(d.type=="iframe")b('<iframe id="fancybox-frame" name="fancybox-frame'+(new Date).getTime()+'" frameborder="0" hspace="0" '+(b.browser.msie?'allowtransparency="true""':"")+' scrolling="'+e.scrolling+'" src="'+d.href+'"></iframe>').appendTo(j);
	33	+f.show();h=false;b.fancybox.center();d.onComplete(l,p,d);var a,c;if(l.length-1>p){a=l[p+1].href;if(typeof a!=="undefined"&&a.match(J)){c=new Image;c.src=a}}if(p>0){a=l[p-1].href;if(typeof a!=="undefined"&&a.match(J)){c=new Image;c.src=a}}},T=function(a){var c={width:parseInt(r.width+(i.width-r.width)a,10),height:parseInt(r.height+(i.height-r.height)a,10),top:parseInt(r.top+(i.top-r.top)a,10),left:parseInt(r.left+(i.left-r.left)a,10)};if(typeof i.opacity!=="undefined")c.opacity=a<0.5?0.5:a;f.css(c);
	34	+j.css({width:c.width-d.padding2,height:c.height-ya-d.padding2})},U=function(){return[b(window).width()-d.margin2,b(window).height()-d.margin2,b(document).scrollLeft()+d.margin,b(document).scrollTop()+d.margin]},X=function(){var a=U(),c={},g=d.autoScale,k=d.padding2;c.width=d.width.toString().indexOf("%")>-1?parseInt(a[0]parseFloat(d.width)/100,10):d.width+k;c.height=d.height.toString().indexOf("%")>-1?parseInt(a[1]parseFloat(d.height)/100,10):d.height+k;if(g&&(c.width>a[0]\|\|c.height>a[1]))if(e.type==
	35	+"image"\|\|e.type=="swf"){g=d.width/d.height;if(c.width>a[0]){c.width=a[0];c.height=parseInt((c.width-k)/g+k,10)}if(c.height>a[1]){c.height=a[1];c.width=parseInt((c.height-k)g+k,10)}}else{c.width=Math.min(c.width,a[0]);c.height=Math.min(c.height,a[1])}c.top=parseInt(Math.max(a[3]-20,a[3]+(a[1]-c.height-40)0.5),10);c.left=parseInt(Math.max(a[2]-20,a[2]+(a[0]-c.width-40)*0.5),10);return c},V=function(){var a=e.orig?b(e.orig):false,c={};if(a&&a.length){c=a.offset();c.top+=parseInt(a.css("paddingTop"),
	36	+10)\|\|0;c.left+=parseInt(a.css("paddingLeft"),10)\|\|0;c.top+=parseInt(a.css("border-top-width"),10)\|\|0;c.left+=parseInt(a.css("border-left-width"),10)\|\|0;c.width=a.width();c.height=a.height();c={width:c.width+d.padding2,height:c.height+d.padding2,top:c.top-d.padding-20,left:c.left-d.padding-20}}else{a=U();c={width:d.padding2,height:d.padding2,top:parseInt(a[3]+a[1]0.5,10),left:parseInt(a[2]+a[0]0.5,10)}}return c},Z=function(){if(t.is(":visible")){b("div",t).css("top",L*-40+"px");L=(L+1)%12}else clearInterval(K)};
	37	+b.fn.fancybox=function(a){if(!b(this).length)return this;b(this).data("fancybox",b.extend({},a,b.metadata?b(this).metadata():{})).unbind("click.fb").bind("click.fb",function(c){c.preventDefault();if(!h){h=true;b(this).blur();o=[];q=0;c=b(this).attr("rel")\|\|"";if(!c\|\|c==""\|\|c==="nofollow")o.push(this);else{o=b("a[rel="+c+"], area[rel="+c+"]");q=o.index(this)}I()}});return this};b.fancybox=function(a,c){var g;if(!h){h=true;g=typeof c!=="undefined"?c:{};o=[];q=parseInt(g.index,10)\|\|0;if(b.isArray(a)){for(var k=
	38	+0,C=a.length;k<C;k++)if(typeof a[k]=="object")b(a[k]).data("fancybox",b.extend({},g,a[k]));else a[k]=b({}).data("fancybox",b.extend({content:a[k]},g));o=jQuery.merge(o,a)}else{if(typeof a=="object")b(a).data("fancybox",b.extend({},g,a));else a=b({}).data("fancybox",b.extend({content:a},g));o.push(a)}if(q>o.length\|\|q<0)q=0;I()}};b.fancybox.showActivity=function(){clearInterval(K);t.show();K=setInterval(Z,66)};b.fancybox.hideActivity=function(){t.hide()};b.fancybox.next=function(){return b.fancybox.pos(p+
	39	+1)};b.fancybox.prev=function(){return b.fancybox.pos(p-1)};b.fancybox.pos=function(a){if(!h){a=parseInt(a);o=l;if(a>-1&&a<l.length){q=a;I()}else if(d.cyclic&&l.length>1){q=a>=l.length?0:l.length-1;I()}}};b.fancybox.cancel=function(){if(!h){h=true;b.event.trigger("fancybox-cancel");N();e.onCancel(o,q,e);h=false}};b.fancybox.close=function(){function a(){u.fadeOut("fast");n.empty().hide();f.hide();b.event.trigger("fancybox-cleanup");j.empty();d.onClosed(l,p,d);l=e=[];p=q=0;d=e={};h=false}if(!(h\|\|f.is(":hidden"))){h=
	40	+true;if(d&&false===d.onCleanup(l,p,d))h=false;else{N();b(E.add(z).add(A)).hide();b(j.add(u)).unbind();b(window).unbind("resize.fb scroll.fb");b(document).unbind("keydown.fb");j.find("iframe").attr("src",M&&/^https/i.test(window.location.href\|\|"")?"javascript:void(false)":"about:blank");d.titlePosition!=="inside"&&n.empty();f.stop();if(d.transitionOut=="elastic"){r=V();var c=f.position();i={top:c.top,left:c.left,width:f.width(),height:f.height()};if(d.opacity)i.opacity=1;n.empty().hide();B.prop=1;
	41	+b(B).animate({prop:0},{duration:d.speedOut,easing:d.easingOut,step:T,complete:a})}else f.fadeOut(d.transitionOut=="none"?0:d.speedOut,a)}}};b.fancybox.resize=function(){u.is(":visible")&&u.css("height",b(document).height());b.fancybox.center(true)};b.fancybox.center=function(a){var c,g;if(!h){g=a===true?1:0;c=U();!g&&(f.width()>c[0]\|\|f.height()>c[1])\|\|f.stop().animate({top:parseInt(Math.max(c[3]-20,c[3]+(c[1]-j.height()-40)0.5-d.padding)),left:parseInt(Math.max(c[2]-20,c[2]+(c[0]-j.width()-40)0.5-
	42	+d.padding))},typeof a=="number"?a:200)}};b.fancybox.init=function(){if(!b("#fancybox-wrap").length){b("body").append(m=b('<div id="fancybox-tmp"></div>'),t=b('<div id="fancybox-loading"><div></div></div>'),u=b('<div id="fancybox-overlay"></div>'),f=b('<div id="fancybox-wrap"></div>'));D=b('<div id="fancybox-outer"></div>').append('<div class="fancybox-bg" id="fancybox-bg-n"></div><div class="fancybox-bg" id="fancybox-bg-ne"></div><div class="fancybox-bg" id="fancybox-bg-e"></div><div class="fancybox-bg" id="fancybox-bg-se"></div><div class="fancybox-bg" id="fancybox-bg-s"></div><div class="fancybox-bg" id="fancybox-bg-sw"></div><div class="fancybox-bg" id="fancybox-bg-w"></div><div class="fancybox-bg" id="fancybox-bg-nw"></div>').appendTo(f);
	43	+D.append(j=b('<div id="fancybox-content"></div>'),E=b('<a id="fancybox-close"></a>'),n=b('<div id="fancybox-title"></div>'),z=b('<a href="javascript:;" id="fancybox-left"><span class="fancy-ico" id="fancybox-left-ico"></span></a>'),A=b('<a href="javascript:;" id="fancybox-right"><span class="fancy-ico" id="fancybox-right-ico"></span></a>'));E.click(b.fancybox.close);t.click(b.fancybox.cancel);z.click(function(a){a.preventDefault();b.fancybox.prev()});A.click(function(a){a.preventDefault();b.fancybox.next()});
	44	+b.fn.mousewheel&&f.bind("mousewheel.fb",function(a,c){if(h)a.preventDefault();else if(b(a.target).get(0).clientHeight==0\|\|b(a.target).get(0).scrollHeight===b(a.target).get(0).clientHeight){a.preventDefault();b.fancybox[c>0?"prev":"next"]()}});b.support.opacity\|\|f.addClass("fancybox-ie");if(M){t.addClass("fancybox-ie6");f.addClass("fancybox-ie6");b('<iframe id="fancybox-hide-sel-frame" src="'+(/^https/i.test(window.location.href\|\|"")?"javascript:void(false)":"about:blank")+'" scrolling="no" border="0" frameborder="0" tabindex="-1"></iframe>').prependTo(D)}}};
	45	+b.fn.fancybox.defaults={padding:10,margin:40,opacity:false,modal:false,cyclic:false,scrolling:"auto",width:560,height:340,autoScale:true,autoDimensions:true,centerOnScroll:false,ajax:{},swf:{wmode:"transparent"},hideOnOverlayClick:true,hideOnContentClick:false,overlayShow:true,overlayOpacity:0.7,overlayColor:"#777",titleShow:true,titlePosition:"float",titleFormat:null,titleFromAlt:false,transitionIn:"fade",transitionOut:"fade",speedIn:300,speedOut:300,changeSpeed:300,changeFade:"fast",easingIn:"swing",
	46	+easingOut:"swing",showCloseButton:true,showNavArrows:true,enableEscapeButton:true,enableKeyboardNav:true,onStart:function(){},onCancel:function(){},onComplete:function(){},onCleanup:function(){},onClosed:function(){},onError:function(){}};b(document).ready(function(){b.fancybox.init()})})(jQuery);
...	...
...	...	@@ -1010,6 +1010,43 @@ code input {
1010	1010	display: none;
1011	1011	}
1012	1012
	1013	+.zoomable-image {
	1014	+ position: relative;
	1015	+ display: inline-block;
	1016	+}
	1017	+
	1018	+/* IE 7 hack to simulate inline-block */
	1019	+.msie7 .zoomable-image {
	1020	+ zoom: 1;
	1021	+ *display: inline;
	1022	+}
	1023	+
	1024	+.zoomify-image {
	1025	+ position: absolute;
	1026	+ left: 0;
	1027	+ top: 0;
	1028	+ display: block;
	1029	+ width: 100%;
	1030	+ height: 16px;
	1031	+ text-align: right;
	1032	+ background: transparent url(/images/black-alpha-pixel.png);
	1033	+ border-bottom: 1px solid #333;
	1034	+}
	1035	+
	1036	+#article .zoomify-image {
	1037	+ text-decoration: none;
	1038	+ color: #fff;
	1039	+}
	1040	+
	1041	+.zoomify-image span {
	1042	+ font-size: 10px;
	1043	+ line-height: 16px;
	1044	+ padding-right: 16px;
	1045	+ border-bottom: 1px solid #eee;
	1046	+ display: block;
	1047	+ background: transparent url(/images/zoom.png) right center no-repeat;
	1048	+}
	1049	+
1013	1050	/* * * Comments * * */
1014	1051
1015	1052	.comments { }
...	...
...	...	@@ -0,0 +1,359 @@
	1	+/*
	2	+ * FancyBox - jQuery Plugin
	3	+ * Simple and fancy lightbox alternative
	4	+ *
	5	+ * Examples and documentation at: http://fancybox.net
	6	+ *
	7	+ * Copyright (c) 2008 - 2010 Janis Skarnelis
	8	+ * That said, it is hardly a one-person project. Many people have submitted bugs, code, and offered their advice freely. Their support is greatly appreciated.
	9	+ *
	10	+ * Version: 1.3.4 (11/11/2010)
	11	+ * Requires: jQuery v1.3+
	12	+ *
	13	+ * Dual licensed under the MIT and GPL licenses:
	14	+ * http://www.opensource.org/licenses/mit-license.php
	15	+ * http://www.gnu.org/licenses/gpl.html
	16	+ */
	17	+
	18	+#fancybox-loading {
	19	+ position: fixed;
	20	+ top: 50%;
	21	+ left: 50%;
	22	+ width: 40px;
	23	+ height: 40px;
	24	+ margin-top: -20px;
	25	+ margin-left: -20px;
	26	+ cursor: pointer;
	27	+ overflow: hidden;
	28	+ z-index: 1104;
	29	+ display: none;
	30	+}
	31	+
	32	+#fancybox-loading div {
	33	+ position: absolute;
	34	+ top: 0;
	35	+ left: 0;
	36	+ width: 40px;
	37	+ height: 480px;
	38	+ background-image: url('../images/fancybox/fancybox.png');
	39	+}
	40	+
	41	+#fancybox-overlay {
	42	+ position: absolute;
	43	+ top: 0;
	44	+ left: 0;
	45	+ width: 100%;
	46	+ z-index: 1100;
	47	+ display: none;
	48	+}
	49	+
	50	+#fancybox-tmp {
	51	+ padding: 0;
	52	+ margin: 0;
	53	+ border: 0;
	54	+ overflow: auto;
	55	+ display: none;
	56	+}
	57	+
	58	+#fancybox-wrap {
	59	+ position: absolute;
	60	+ top: 0;
	61	+ left: 0;
	62	+ padding: 20px;
	63	+ z-index: 1101;
	64	+ outline: none;
	65	+ display: none;
	66	+}
	67	+
	68	+#fancybox-outer {
	69	+ position: relative;
	70	+ width: 100%;
	71	+ height: 100%;
	72	+ background: #fff;
	73	+}
	74	+
	75	+#fancybox-content {
	76	+ width: 0;
	77	+ height: 0;
	78	+ padding: 0;
	79	+ outline: none;
	80	+ position: relative;
	81	+ overflow: hidden;
	82	+ z-index: 1102;
	83	+ border: 0px solid #fff;
	84	+}
	85	+
	86	+#fancybox-hide-sel-frame {
	87	+ position: absolute;
	88	+ top: 0;
	89	+ left: 0;
	90	+ width: 100%;
	91	+ height: 100%;
	92	+ background: transparent;
	93	+ z-index: 1101;
	94	+}
	95	+
	96	+#fancybox-close {
	97	+ position: absolute;
	98	+ top: -15px;
	99	+ right: -15px;
	100	+ width: 30px;
	101	+ height: 30px;
	102	+ background: transparent url('../images/fancybox/fancybox.png') -40px 0px;
	103	+ cursor: pointer;
	104	+ z-index: 1103;
	105	+ display: none;
	106	+}
	107	+
	108	+#fancybox-error {
	109	+ color: #444;
	110	+ font: normal 12px/20px Arial;
	111	+ padding: 14px;
	112	+ margin: 0;
	113	+}
	114	+
	115	+#fancybox-img {
	116	+ width: 100%;
	117	+ height: 100%;
	118	+ padding: 0;
	119	+ margin: 0;
	120	+ border: none;
	121	+ outline: none;
	122	+ line-height: 0;
	123	+ vertical-align: top;
	124	+}
	125	+
	126	+#fancybox-frame {
	127	+ width: 100%;
	128	+ height: 100%;
	129	+ border: none;
	130	+ display: block;
	131	+}
	132	+
	133	+#fancybox-left, #fancybox-right {
	134	+ position: absolute;
	135	+ bottom: 0px;
	136	+ height: 100%;
	137	+ width: 35%;
	138	+ cursor: pointer;
	139	+ outline: none;
	140	+ background: transparent url('../images/fancybox/blank.gif');
	141	+ z-index: 1102;
	142	+ display: none;
	143	+}
	144	+
	145	+#fancybox-left {
	146	+ left: 0px;
	147	+}
	148	+
	149	+#fancybox-right {
	150	+ right: 0px;
	151	+}
	152	+
	153	+#fancybox-left-ico, #fancybox-right-ico {
	154	+ position: absolute;
	155	+ top: 50%;
	156	+ left: -9999px;
	157	+ width: 30px;
	158	+ height: 30px;
	159	+ margin-top: -15px;
	160	+ cursor: pointer;
	161	+ z-index: 1102;
	162	+ display: block;
	163	+}
	164	+
	165	+#fancybox-left-ico {
	166	+ background-image: url('../images/fancybox/fancybox.png');
	167	+ background-position: -40px -30px;
	168	+}
	169	+
	170	+#fancybox-right-ico {
	171	+ background-image: url('../images/fancybox/fancybox.png');
	172	+ background-position: -40px -60px;
	173	+}
	174	+
	175	+#fancybox-left:hover, #fancybox-right:hover {
	176	+ visibility: visible; /* IE6 */
	177	+}
	178	+
	179	+#fancybox-left:hover span {
	180	+ left: 20px;
	181	+}
	182	+
	183	+#fancybox-right:hover span {
	184	+ left: auto;
	185	+ right: 20px;
	186	+}
	187	+
	188	+.fancybox-bg {
	189	+ position: absolute;
	190	+ padding: 0;
	191	+ margin: 0;
	192	+ border: 0;
	193	+ width: 20px;
	194	+ height: 20px;
	195	+ z-index: 1001;
	196	+}
	197	+
	198	+#fancybox-bg-n {
	199	+ top: -20px;
	200	+ left: 0;
	201	+ width: 100%;
	202	+ background-image: url('../images/fancybox/fancybox-x.png');
	203	+}
	204	+
	205	+#fancybox-bg-ne {
	206	+ top: -20px;
	207	+ right: -20px;
	208	+ background-image: url('../images/fancybox/fancybox.png');
	209	+ background-position: -40px -162px;
	210	+}
	211	+
	212	+#fancybox-bg-e {
	213	+ top: 0;
	214	+ right: -20px;
	215	+ height: 100%;
	216	+ background-image: url('../images/fancybox/fancybox-y.png');
	217	+ background-position: -20px 0px;
	218	+}
	219	+
	220	+#fancybox-bg-se {
	221	+ bottom: -20px;
	222	+ right: -20px;
	223	+ background-image: url('../images/fancybox/fancybox.png');
	224	+ background-position: -40px -182px;
	225	+}
	226	+
	227	+#fancybox-bg-s {
	228	+ bottom: -20px;
	229	+ left: 0;
	230	+ width: 100%;
	231	+ background-image: url('../images/fancybox/fancybox-x.png');
	232	+ background-position: 0px -20px;
	233	+}
	234	+
	235	+#fancybox-bg-sw {
	236	+ bottom: -20px;
	237	+ left: -20px;
	238	+ background-image: url('../images/fancybox/fancybox.png');
	239	+ background-position: -40px -142px;
	240	+}
	241	+
	242	+#fancybox-bg-w {
	243	+ top: 0;
	244	+ left: -20px;
	245	+ height: 100%;
	246	+ background-image: url('../images/fancybox/fancybox-y.png');
	247	+}
	248	+
	249	+#fancybox-bg-nw {
	250	+ top: -20px;
	251	+ left: -20px;
	252	+ background-image: url('../images/fancybox/fancybox.png');
	253	+ background-position: -40px -122px;
	254	+}
	255	+
	256	+#fancybox-title {
	257	+ font-family: Helvetica;
	258	+ font-size: 12px;
	259	+ z-index: 1102;
	260	+}
	261	+
	262	+.fancybox-title-inside {
	263	+ padding-bottom: 10px;
	264	+ text-align: center;
	265	+ color: #333;
	266	+ background: #fff;
	267	+ position: relative;
	268	+}
	269	+
	270	+.fancybox-title-outside {
	271	+ padding-top: 10px;
	272	+ color: #fff;
	273	+}
	274	+
	275	+.fancybox-title-over {
	276	+ position: absolute;
	277	+ bottom: 0;
	278	+ left: 0;
	279	+ color: #FFF;
	280	+ text-align: left;
	281	+}
	282	+
	283	+#fancybox-title-over {
	284	+ padding: 10px;
	285	+ background-image: url('../images/fancybox/fancy_title_over.png');
	286	+ display: block;
	287	+}
	288	+
	289	+.fancybox-title-float {
	290	+ position: absolute;
	291	+ left: 0;
	292	+ bottom: -20px;
	293	+ height: 32px;
	294	+}
	295	+
	296	+#fancybox-title-float-wrap {
	297	+ border: none;
	298	+ border-collapse: collapse;
	299	+ width: auto;
	300	+}
	301	+
	302	+#fancybox-title-float-wrap td {
	303	+ border: none;
	304	+ white-space: nowrap;
	305	+}
	306	+
	307	+#fancybox-title-float-left {
	308	+ padding: 0 0 0 15px;
	309	+ background: url('../images/fancybox/fancybox.png') -40px -90px no-repeat;
	310	+}
	311	+
	312	+#fancybox-title-float-main {
	313	+ color: #FFF;
	314	+ line-height: 29px;
	315	+ font-weight: bold;
	316	+ padding: 0 0 3px 0;
	317	+ background: url('../images/fancybox/fancybox-x.png') 0px -40px;
	318	+}
	319	+
	320	+#fancybox-title-float-right {
	321	+ padding: 0 0 0 15px;
	322	+ background: url('../images/fancybox/fancybox.png') -55px -90px no-repeat;
	323	+}
	324	+
	325	+/* IE6 */
	326	+
	327	+.fancybox-ie6 #fancybox-close { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/fancybox/fancy_close.png', sizingMethod='scale'); }
	328	+
	329	+.fancybox-ie6 #fancybox-left-ico { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/fancybox/fancy_nav_left.png', sizingMethod='scale'); }
	330	+.fancybox-ie6 #fancybox-right-ico { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/fancybox/fancy_nav_right.png', sizingMethod='scale'); }
	331	+
	332	+.fancybox-ie6 #fancybox-title-over { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/fancybox/fancy_title_over.png', sizingMethod='scale'); zoom: 1; }
	333	+.fancybox-ie6 #fancybox-title-float-left { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/fancybox/fancy_title_left.png', sizingMethod='scale'); }
	334	+.fancybox-ie6 #fancybox-title-float-main { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/fancybox/fancy_title_main.png', sizingMethod='scale'); }
	335	+.fancybox-ie6 #fancybox-title-float-right { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/fancybox/fancy_title_right.png', sizingMethod='scale'); }
	336	+
	337	+.fancybox-ie6 #fancybox-bg-w, .fancybox-ie6 #fancybox-bg-e, .fancybox-ie6 #fancybox-left, .fancybox-ie6 #fancybox-right, #fancybox-hide-sel-frame {
	338	+ height: expression(this.parentNode.clientHeight + "px");
	339	+}
	340	+
	341	+#fancybox-loading.fancybox-ie6 {
	342	+ position: absolute; margin-top: 0;
	343	+ top: expression( (-20 + (document.documentElement.clientHeight ? document.documentElement.clientHeight/2 : document.body.clientHeight/2 ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop )) + 'px');
	344	+}
	345	+
	346	+#fancybox-loading.fancybox-ie6 div { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/fancybox/fancy_loading.png', sizingMethod='scale'); }
	347	+
	348	+/* IE6, IE7, IE8 */
	349	+
	350	+.fancybox-ie .fancybox-bg { background: transparent !important; }
	351	+
	352	+.fancybox-ie #fancybox-bg-n { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/fancybox/fancy_shadow_n.png', sizingMethod='scale'); }
	353	+.fancybox-ie #fancybox-bg-ne { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/fancybox/fancy_shadow_ne.png', sizingMethod='scale'); }
	354	+.fancybox-ie #fancybox-bg-e { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/fancybox/fancy_shadow_e.png', sizingMethod='scale'); }
	355	+.fancybox-ie #fancybox-bg-se { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/fancybox/fancy_shadow_se.png', sizingMethod='scale'); }
	356	+.fancybox-ie #fancybox-bg-s { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/fancybox/fancy_shadow_s.png', sizingMethod='scale'); }
	357	+.fancybox-ie #fancybox-bg-sw { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/fancybox/fancy_shadow_sw.png', sizingMethod='scale'); }
	358	+.fancybox-ie #fancybox-bg-w { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/fancybox/fancy_shadow_w.png', sizingMethod='scale'); }
	359	+.fancybox-ie #fancybox-bg-nw { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/fancybox/fancy_shadow_nw.png', sizingMethod='scale'); }
...	...