Safeguarding the past, present and future of RISC OS for everyone
Account
News | Downloads | Bugs | Bounties | Forums | Library
You are currently browsing the Subversion repository.
Changesets can be listed by changeset number.
The Git repository is here.
  • Changesets
  • » Changeset 76

Changeset 76

Upgraded Lightbox to latest version from the Lightbox Home page at
"http://www.huddletogether.com/projects/lightbox/". Customised the
Lightbox CSS. Tweaked wording in 'theme' partial for RISC OS Open
theme. The Lightbox controller was trying to generate URLs correct
for any location of the Rails application but the attribute it was
trying to use did not return the expected string; changed to use
another blog-specific property that generates the correct result.

  • Comitted by: adh
  • Date: Tuesday August 08 00:19:50 2006 (over 18 years ago)

Affected files:

  • Updated rool/rails/typo/trunk/components/plugins/textfilters/lightbox_controller.rb (diff)
  • Updated rool/rails/typo/trunk/public/javascripts/lightbox.js (diff)
  • Updated rool/rails/typo/trunk/public/stylesheets/lightbox.css (diff)
  • Updated rool/rails/typo/trunk/themes/risc_os_open/views/shared/_theme.rhtml (diff)

rool/rails/typo/trunk/components/plugins/textfilters/lightbox_controller.rb:

prev.current 
end
def self.set_whiteboard controller, content
  116 base = content.blog.canonical_server_url.chomp('/')
content.whiteboard['page_header_lightbox'] = <<-HTML
117   <link href="#{controller.request.relative_url_root}/stylesheets/lightbox.css" media="all" rel="Stylesheet" type="text/css" />
118   <script src="#{controller.request.relative_url_root}/javascripts/lightbox.js" type="text/javascript"></script>
  118 <link href="#{base}/stylesheets/lightbox.css" media="all" rel="Stylesheet" type="text/css" />
  119 <script src="#{base}/javascripts/lightbox.js" type="text/javascript"></script>
HTML
end

rool/rails/typo/trunk/public/javascripts/lightbox.js:

prev.current 
- getPageScroll()
- getPageSize()
- pause()
  19 - getKey()
  20 - listenKey()
- showLightbox()
- hideLightbox()
- initLightbox()
... ...
// Configuration
//
35   // If you would like to use a loading image, point to it in the next line, otherwise leave as-is.
36   var loadingImage = '/images/loading.gif';
  37 // If you would like to use a custom loading image or close button reference them in the next two lines.
  38 var loadingImage = '/images/risc_os_open/lightbox/loading.gif';
  39 var closeButton = '/images/risc_os_open/lightbox/close.gif';
... ...
return arrayPageSize;
}
  120
//
// pause(numberMillis)
// Pauses code execution for specified time. Uses busy code, not good.
... ...
}
}
  136 //
  137 // getKey(key)
  138 // Gets keycode. If 'x' is pressed then it hides the lightbox.
  139 //
  141 function getKey(e){
  142 if (e == null) { // ie
  143 keycode = event.keyCode;
  144 } else { // mozilla
  145 keycode = e.which;
  146 }
  147 key = String.fromCharCode(keycode).toLowerCase();
  148
  149 if(key == 'x'){ hideLightbox(); }
  150 }
  153 //
  154 // listenKey()
  155 //
  156 function listenKey () { document.onkeypress = getKey; }
  157
//
// showLightbox()
... ...
var objCaption = document.getElementById('lightboxCaption');
var objImage = document.getElementById('lightboxImage');
var objLoadingImage = document.getElementById('loadingImage');
  171 var objLightboxDetails = document.getElementById('lightboxDetails');
  172
var arrayPageSize = getPageSize();
var arrayPageScroll = getPageScroll();
... ...
// center loadingImage if it exists
if (objLoadingImage) {
objLoadingImage.style.top = (arrayPageScroll[1] + ((arrayPageSize[3] - 35 - objLoadingImage.height) / 2) + 'px');
155   objLoadingImage.style.left = (((arrayPageSize[0] - 40 - objLoadingImage.width) / 2) + 'px');
  180 objLoadingImage.style.left = (((arrayPageSize[0] - 20 - objLoadingImage.width) / 2) + 'px');
  181 objLoadingImage.style.display = 'block';
}
// set height of Overlay to take up whole page and show
... ...
// center lightbox and make sure that the top and left values are not negative
// and the image placed outside the viewport
var lightboxTop = arrayPageScroll[1] + ((arrayPageSize[3] - 35 - imgPreload.height) / 2);
171   var lightboxLeft = ((arrayPageSize[0] - 40 - imgPreload.width) / 2);
  197 var lightboxLeft = ((arrayPageSize[0] - 20 - imgPreload.width) / 2);
objLightbox.style.top = (lightboxTop < 0) ? "0px" : lightboxTop + "px";
objLightbox.style.left = (lightboxLeft < 0) ? "0px" : lightboxLeft + "px";
  203 objLightboxDetails.style.width = imgPreload.width + 'px';
if(objLink.getAttribute('title')){
objCaption.style.display = 'block';
180   objCaption.style.width = imgPreload.width + 'px';
  207 //objCaption.style.width = imgPreload.width + 'px';
objCaption.innerHTML = objLink.getAttribute('title');
} else {
objCaption.style.display = 'none';
... ...
pause(250);
}
  219 if (objLoadingImage) { objLoadingImage.style.display = 'none'; }
  220
  221 // Hide select boxes as they will 'peek' through the image in IE
  222 selects = document.getElementsByTagName("select");
  223 for (i = 0; i != selects.length; i++) {
  224 selects[i].style.visibility = "hidden";
  225 }
  226
  227
objLightbox.style.display = 'block';
  230 // After image is loaded, update the overlay height as the new image might have
  231 // increased the overall page height.
  232 arrayPageSize = getPageSize();
  233 objOverlay.style.height = (arrayPageSize[1] + 'px');
  234
  235 // Check for 'x' keypress
  236 listenKey();
  237
return false;
}
... ...
// hide lightbox and overlay
objOverlay.style.display = 'none';
objLightbox.style.display = 'none';
  261
  262 // make select boxes visible
  263 selects = document.getElementsByTagName("select");
  264 for (i = 0; i != selects.length; i++) {
  265 selects[i].style.visibility = "visible";
  266 }
  267
  268 // disable keypress listener
  269 document.onkeypress = '';
}
... ...
//
function initLightbox()
{
  284
if (!document.getElementsByTagName){ return; }
var anchors = document.getElementsByTagName("a");
... ...
// <a href="#" onclick="hideLightbox(); return false;"><img id="loadingImage" /></a>
// </div>
// <div id="lightbox">
249   // <a href="#" onclick="hideLightbox(); return false;" title="Click anywhere to close image"><img /></a>
250   // <div id="lightboxCaption"></div>
  303 // <a href="#" onclick="hideLightbox(); return false;" title="Click anywhere to close image">
  304 // <img id="closeButton" />
  305 // <img id="lightboxImage" />
  306 // </a>
  307 // <div id="lightboxDetails">
  308 // <div id="lightboxCaption"></div>
  309 // <div id="keyboardMsg"></div>
  310 // </div>
// </div>
var objBody = document.getElementsByTagName("body").item(0);
... ...
// create overlay div and hardcode some functional styles (aesthetic styles are in CSS file)
var objOverlay = document.createElement("div");
objOverlay.setAttribute('id','overlay');
  318 objOverlay.onclick = function () {hideLightbox(); return false;}
objOverlay.style.display = 'none';
objOverlay.style.position = 'absolute';
objOverlay.style.top = '0';
... ...
objLink.setAttribute('title','Click to close');
objLink.onclick = function () {hideLightbox(); return false;}
objLightbox.appendChild(objLink);
308  
  369
  370 // preload and create close button image
  371 var imgPreloadCloseButton = new Image();
  372
  373 // if close button image found,
  374 imgPreloadCloseButton.onload=function(){
  375
  376 var objCloseButton = document.createElement("img");
  377 objCloseButton.src = closeButton;
  378 objCloseButton.setAttribute('id','closeButton');
  379 objCloseButton.style.position = 'absolute';
  380 objCloseButton.style.zIndex = '200';
  381 objLink.appendChild(objCloseButton);
  382
  383 return false;
  384 }
  385
  386 imgPreloadCloseButton.src = closeButton;
  387
// create image
var objImage = document.createElement("img");
objImage.setAttribute('id','lightboxImage');
objLink.appendChild(objImage);
  393 // create details div, a container for the caption and keyboard message
  394 var objLightboxDetails = document.createElement("div");
  395 objLightboxDetails.setAttribute('id','lightboxDetails');
  396 objLightbox.appendChild(objLightboxDetails);
  397
// create caption
var objCaption = document.createElement("div");
objCaption.setAttribute('id','lightboxCaption');
objCaption.style.display = 'none';
318   objLightbox.appendChild(objCaption);
319  
  402 objLightboxDetails.appendChild(objCaption);
  403
  404 // create keyboard message
  405 var objKeyboardMsg = document.createElement("div");
  406 objKeyboardMsg.setAttribute('id','keyboardMsg');
  407 objKeyboardMsg.innerHTML = 'press <a href="#" onclick="hideLightbox(); return false;"><kbd>x</kbd></a> to close';
  408 objLightboxDetails.appendChild(objKeyboardMsg);
  409
  410
}
... ...
// Function found at Simon Willison's weblog - http://simon.incutio.com/
//
function addLoadEvent(func)
331   {
  422 {
var oldonload = window.onload;
if (typeof window.onload != 'function'){
334   window.onload = func;
  425 window.onload = func;
} else {
window.onload = function(){
337   oldonload();
338   func();
  428 oldonload();
  429 func();
}
}
... ...
346  
347   //addLoadEvent(initLightbox); // run initLightbox onLoad
348   register_onload(initLightbox);
  438 addLoadEvent(initLightbox); // run initLightbox onLoad

rool/rails/typo/trunk/public/stylesheets/lightbox.css:

prev.current 
1   #lightbox{
2   background-color:#eee;
3   padding: 10px;
4   border-bottom: 2px solid #666;
5   border-right: 2px solid #666;
6   }
7   #lightboxCaption{
8   font-size: 0.8em;
9   padding-top: 0.4em;
10   }
11   #lightbox img{ border: none; }
12   #overlay img{ border: none; }
  1 /* Modified Lightbox CSS file. Taken originally from:
  2 * http://www.huddletogether.com/projects/lightbox/
  3 */
14   #overlay{ background-image: url(/images/overlay.png); }
  5 #lightbox
  6 {
  7 background-color:#eee;
  8 padding: 10px;
  9 }
16   * html #overlay{
17   background-color: #333;
18   back\ground-color: transparent;
19   background-image: url(blank.gif);
20   filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/images/overlay.png", sizingMethod="scale");
21   }
22  
  12 #lightbox A,
  13 #lightbox A:hover,
  14 .lightboxplugin A,
  15 .lightboxplugin A:hover
  16 {
  17 border: none;
  18 background: inherit;
  19 }
  20
  21 #lightboxDetails
  22 {
  23 font-size: 100%;
  24 padding-top: 0.4em;
  25 }
  26
  27 #lightboxDetails KBD
  28 {
  29 font-size: 150%;
  30 }
  31
  32 #lightboxCaption { float: left; margin-top: 5px }
  33 #keyboardMsg { float: right; }
  34 #closeButton { top: 0px; right: 0px; }
  35
  36 #lightbox IMG { border: none; clear: both;}
  37 #overlay IMG { border: none; }
  38
  39 #overlay { background-image: url("/images/risc_os_open/lightbox/overlay.png"); }
  40
  41 * HTML #overlay
  42 {
  43 background-color: #333;
  44 back\ground-color: transparent;
  45 background-image: url("/images/utilities/blank.gif");
  46 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/images/risc_$
  47 }

rool/rails/typo/trunk/themes/risc_os_open/views/shared/_theme.rhtml:

prev.current 
1   -->The RISC OS Open Typo theme is distantly based on Azure, Typo 2.6.0<!--
  1 -->The RISC OS Open Typo theme is distantly based on Typo's 'Azure'<!--

Search tickets

Social

Follow us on and

ROOL Store

Buy RISC OS Open merchandise here, including SD cards for Raspberry Pi and more.

Donate! Why?

Help ROOL make things happen – please consider donating!

RISC OS IPR

RISC OS is an Open Source operating system owned by RISC OS Developments Ltd and licensed primarily under the Apache 2.0 license.

Options

  • Tickets
  • New ticket
  • Milestones
  • Subversion: Changesets
  • Subversion: Browse
  • CVS: Revisions
  • CVS: Browse
  • Search

RSS feeds Rss

  • Changesets
  • Everything!
  • More feeds...
Contact Us  |  About Us

The RISC OS Open Collaboa theme is distantly based on the Collaboa default layout
Site design © RISC OS Open Limited 2024 except where indicated

Hosted by Arachsys

Powered by Collaboa
This site runs on Rails