More lightbox magic
As I have mentioned before, the gallery is mostly powered by Lightbox.js. I've made a couple of changes to Lightbox 2.02 in order to make it work for the IVRPA site:
- Quicktime VR content
- The original Lightbox script only supports images. Ours supports still images and Quicktime VR. Others have made similar changes, and I'm sure mine are a bit more hacky than some of those. But it looks nice ;-)
- Image scaling
- If an image is too large to fit in the current window, it is now scaled down to fit. No scrolling necessary to view the whole image. Quicktime VR files are automatically extended to fill the screen.
- Image data on top
- The original lighbox script has the image caption, as well as close the button on the bottom of the image. I moved it to the top of the window. This way, the caption and close button are always in the same position (realtive to the window)
- Navigation control in image data bar
- Instead of overlaying the 'next'/'previous' controls on the image, these controls are now in the image data bar, next to the close 'control'. The direct reason for this is I couldn't overlay the same controls over Quicktime VR content. This has the additional benefit that the 'next'/'previous' buttons have a fixed location, so it's easier to step through multiple different-size images.
- Caption parser*
- In lightbox, the caption for the image is taken out of the link attribute for the a element. In our gallery, we want to show proper credit, and add links to extra info to the caption. Our implementation has can parse some additional info out of a specially crafted title attribute.
- URL parser*
- Lightbox adheres to the principle of graceful degradation; if for some reason, the lightbox activation is not triggered, you'ld get the plain vanilla image. In our case, we sometimes wanted to link to a page with more info instead. Our version contains a simple parser that will split a specially crafted url so we can have the best of both worlds. Gracefull degradation to a page, instead of the original image/QuicktimeVR file.
*: Both the parsers are transparent. If the relative data is not 'specially crafted', they will return the original data. Ofcourse the parsers could be changed to parse data differently...
Lightbox is distributed under a Creative Commons Attribution 2.5 License, and in that spirit, here's an archive of the altered files, released under that same license.
Re: More lightbox magic
Hello Aldo,
Thanks a million thus far with your lovely QTVR friendly version though i have small issue.
I cant seem to get your variation of lightbox to work in Firefox. Your example simply displays the leaf photo, the same way it would if i'd used the standard HTML [a href="images/image-1.jpg" target="_top"] tags.
Are you aware of this? and, of course, is there an update coming soon to remedy it?
Thanks again
;)
Re: More lightbox magic
Works for me in Firefox 2.0
What you are describing is expected behavior when you have javascript disabled, or when there's a javascript error. Are you getting any javascript errors?
Re: More lightbox magic
Aldo - It seems the text link from your index page example in the altered files will bring up lightbox but the thumbnail image will not... whereas on Lokesh's index page it works fine. I cannot find a difference to attribute this to - not too swift here with java or css but I think there must be a difference to be found since the behaviors differ. Can you confirm what I say here? Or am I missing something?
Once again, I am able to create a page showing a vr scene through lightbox (YES!!! TVM) that works with the text link but cannot get the thumbnail image working inside Lightbox.
If you get a chance...thanks for your help.
Elizabeth
Re: More lightbox magic
Hello
I have the same effect of Firefox 2.0.0.11 mac. you only get the link transition to next page, without effect.
Same problem under Safari Mac, and Opera 9 for mac.
L
Re: More lightbox magic
Hello, i have been trying to figure out how to insert a quicktime vr mov into lightbox for awhile now... and i cannot figure out how to link the video into the thumbnail... normally when you click on the lightbox thumbnail it would bring up an image by using the <a href="image.jpg" rel="lightbox"> anchor tag.. but i cannot for the life of me figure out how to bring in the mov.. do i still use the anchor tag or something else?
this is my quicktime code i use to import the qtvr... any help on this would be great
<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" width="320" height="256" codebase="http://www.apple.com/qtactivex/qtplugin.cab">
<param name="autoplay" value="true">
<param name="controller" value="true">
<param name="pluginspage" value="http://www.apple.com/quicktime/download/indext.html">
<param name="target" value="myself">
<param name="type" value="video/quicktime">
<param name="src" value="wd_drive1.mov">
<embed src="wd_drive1.mov" width="320" height="256" autoplay="true" controller="true" border="0" pluginspage="http://www.apple.com/quicktime/download/indext.html" target="myself">
</object>
Re: More lightbox magic
Neat. I was just about to start writing an improved gallery exporter for Aperture, this will save me a few hours and look great as well!
Ian
Re: More lightbox magic
The lightbox download is currently a bit messy, because of the added alternative players in the Photokina project.
In the not-so-distant-future, I will probably replace lightbox with a jquery-based alternative, because Drupal is headed in that direction (and I generally like jquery better).
Re: More lightbox magic
Hi
I've managed to get my QTVR come up in the lightbox to come up from a thumbnail, It fills the screen widthwise as I wanted, but I was wondering how to get the contoller bar to be included. I've made PARAM NAME='Controller' VALUE='true'in the lightbox.js inside the "function QT_object(src,width,height)" section but this has no effect.
Is it possible to get the quicktime controllers to appear?
Also I'd like to put a small descriptive section below the movie in a narrow bottom HTML container.
Please help.
Re: More lightbox magic
Have you added the controller to both the EMBED and OBJECT tags?
Ian
Re: More lightbox magic
This is cooler and coler the more I look at it... Scriptaculous indeed! :)
Overall, I think the integration of it with the IVRPA site (and your tweaks) is awesome!
Cheers Aldo,
Patrick Cheatham
--
CheathamLane | spinControl:VR
Berkeley, California
VR Photography
Web, Flash & QuickTime Development
Re: More lightbox magic
I am actually looking at moving away from scriptaculous, and migrating to jquery, because IMHO its the better platform and that's where the Drupal has gone.
I'ld be using imagebox from the interface project. If it were not for jquery, I'ld probably move to slimbox.
Moral of the story: it is not about the underlying code, it's about the experience...
Re: More lightbox magic
Yes... Well, the experience at IVRPA is nice. :)
I've been looking at ThickBox recently; will be rehashing my personal site, and just feeling things out.
At the imagebox link above, the examples crash Safari w/o error (Safari 2.0.4 419.3, OS X 10.4.9)... Works just fine in Firefox.
Cheers,
Patrick Cheatham
--
CheathamLane | spinControl:VR
Berkeley, California
VR Photography
Web, Flash & QuickTime Development
Re: More lightbox magic
Patrick,
http://www.intelliance.fr/jquery/imagebox/ has a version of imagebox that has been adjusted to not crash Safari. Not that I'd have much clue how to alter this to show QTVRs...
Ian Wood
Landmarks of Britain
Azurevision
Re: More lightbox magic
Oh, cool -- thanks!
I'm trying out YAPOLB (yet another permutation of lightbox) at my site now: lightWindow.
Patrick Cheatham
--
CheathamLane | spinControl:VR
Berkeley, California
VR Photography
Web, Flash & QuickTime Development
Re: More lightbox magic
Did you use Thickbox finally ? as I'm still looking a way to display QTVR with it :(
Thanks
Re: More lightbox magic
Hey Aldo,
The Lightbox really does look very fine. Great work! Last night I spent a few hours experimenting with it trying to get a .mov to load. My limitations won over so I was wondering if you have a link or a suggestion that might help me muddle through this. Their forums at huddletogether.com offer some bits but I could not take them anywhere.
You have done an absolutely marvelous job with the VR gallery.
Do your altered files work with video and vr?
Elizabeth