Skip to content

Instantly share code, notes, and snippets.

@walterdavis

walterdavis/application.css

Created October 4, 2011 21:58
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save walterdavis/1262951 to your computer and use it in GitHub Desktop.
Save walterdavis/1262951 to your computer and use it in GitHub Desktop.
Download ZIP
Simplest possible lightbox effect
Raw
application.css
#overlay {
position: fixed;
z-index: 1000;
width: 100%;
height: 100%;
text-align: center;
background-color: rgba(0, 0, 0, 0.7);
}
#overlay img {
max-width: 87%;
max-height: 87%;
margin-top: 30px;
border: 8px solid #ffffff;
-moz-box-shadow: 0 0 12px #000000;
-webkit-box-shadow: 0 0 12px #000000;
box-shadow: 0 0 12px #000000;
background: url(/images/loading.gif) no-repeat center center #ffffff;
}
Raw
application.html.erb
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title><%= content_for?(:title) ? yield(:title) : "Untitled" %></title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<%= stylesheet_link_tag "application" %>
<%= javascript_include_tag :defaults %>
<%= csrf_meta_tag %>
<%= yield(:head) %>
</head>
<body>
<div id="centered">
<div id="user_nav">
<%=( link_to("Home", :root) + ' | '.html_safe ) unless current_page?(:root) %>
<% if user_signed_in? %>
Signed in as <%= link_to(current_user.full_name, edit_user_path(current_user)) %>. Not you?
<%= link_to "Sign Out", destroy_user_session_path, :method => :delete %>
<% end %>
</div>
<div id="container">
<% flash.each do |name, msg| %>
<%= content_tag :div, msg, :id => "flash_#{name}" %>
<% end %>
<%= content_tag :h1, yield(:headline) if show_title? %>
<%= yield %>
</div>
<div id="footer">
<p><%= copyright %></p>
<p>Application developed by <a href="http://walterdavisstudio.com" title="Walter Davis Studio">Walter Davis Studio</a>.</p>
</div>
</div>
</body>
</html>
Raw
application.js
document.observe('dom:loaded',function(){
var overlay = new Element('div',{id:'overlay'});
$$('body').first().insert({top:overlay});
overlay.hide().observe('click',function(evt){this.update().hide();});
$$('a[target="_blank"]').invoke('observe','click',function(evt){
var img = this.href;
if(img.match(/(gif|png|jpe?g)$/i)){
evt.stop();
overlay.show().update('<img src="' + img + '" alt="" />');
}
});
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment