waltd
October 4, 2011, 10:17pm
1
Ever need a lightbox in a big hurry that doesn’t rely on much of anything besides Prototype? Here’s a very simple version, probably won’t look like much in IE < 8, but plays nicely on the standard browsers.
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 {show original
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 %>show original
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="" />');
}show original
All it does is resize the image using CSS to fill the screen. I started my layout with links to full-size images that were set to target = _blank (hey, built-in support for graceful degradation!) and just hooked their click event to open the effect.
Walter
dynamo mailing listhttp://freewaytalk.net/person/options
Have you got this online somewhere Walter?
D
dynamo mailing listhttp://freewaytalk.net/person/options
waltd
October 5, 2011, 12:05am
3
Here. A little bit hacked up from being extracted out of Rails (I just did view source and a bit of editing).
http://scripty.walterdavisstudio.com/light/
The large images are really large, I know.
Walter
On Oct 4, 2011, at 6:33 PM, DeltaDave wrote:
Have you got this online somewhere Walter?
D
dynamo mailing listhttp://freewaytalk.net/person/options
dynamo mailing listhttp://freewaytalk.net/person/options