(als Button)
I always dreamed of a fullscreen-image-viewer in my online-gallery. I wanted a viewer overlaying all other parts of the website/desktop, allowing me to concentrate on the image…
All attempts i found were based on the “lightbox-idea”, opening a overlay with js, but without covering my whole desktop.
Content:
Requirements
- Webspace
- Images in “original-size” and thumbnails of them
- the Fullscreen-Viewer swf
- SWFObject.js
jump to the download of the newest version
“Install”
Well, you don’t really have to install anything, copying the files to your server is enough…the flash-file is embedded with SWFObject inside a webpage… how to do that is described below (this is not a guide how to integrate the app in a gallery like coppermine)
1. files
put the following files into a folder (u can put them where you want them to be, but you’ll have to take care of the path variables inside the html-file):
- vollbild_button.swf
- swfobject.js
You will need a website embedding vollbild_button.swf and some images stored on a webserver.
2. SWFObject and parameters
The demo website shows how to use the swfobject-script inside the <head> of your webpage. There is a window.onload-function to avoid problems with the InternetExplorer.
The <body> contains the SWFObject to embed vollbild_button.swf :
function addSwfs(){var so = new SWFObject(”vollbild_button.swf”, “vollbild”, “130″, “20″, “9″, “#000000″);so.addParam(”allowFullScreen”, “true”);
so.addVariable(”imgUrl”, “images/gaense.jpg”);
so.addVariable(”exifData”, “empty,not used”);
so.addVariable(”title”, “title, not used”);
so.addVariable(”album_urls”,”URL1|URL2|URL3″);
so.addVariable(”all_urls”,escape(”by | separated list to all picture-pages”));
so.write(”flashcontent”);
}
SWFObject writes the content to a <div> named “flashcontent”:
To use the slideshow-feature, the swfobject needs some parameters:
- imgUrl: URL to the Image, loaded first (most probably the actual viewed image)
- exifData: not used
- title: not used
- album_urls: A list of all used image-urls, separated by “|“
example:
so.addVariable("album_urls","http://meine-seite.de/images/bild1.jpg|http://meine-seite.de/images/bild2.jpg|http://meine-seite.de/images/bild3.jpg");
- all_urls: Another list of URLs, this time the urls of the picture-pages (in coppermine etc.) The app loads the picture-page of the actual viewed picture in the viewer.
Ther allowFullScreen parameter is important for flash’s fullscreen mode, without, the app won’t work!!!
3. Thumbs
To use thumbnails, u have to place a thumbnail of every image in the same folder.(working with coppermine here ;))
Original: http://meine-seite.de/bild.jpg
Thumb: http://meine-seite.de/thumb_bild.jpg
If no thums exists, the originals will be loaded into the thumbnail-view of the app.
- the larger the images, the longer it loads
- not optimized, they will be displayed not resized!
Demo
See the viewer in action: fsdia.makrograf.com click here.
Download
The demo-page zipped, without vollbild_button.swf and swfobject.js
Latest version, 20.09.2007
Problems and To-Do list
The program works fine in my coppermine gallery. Anyway, there are still some problems, i have to fix. The slideshow feature is not working perfect at the moment… 
Have fun testing it!
To-Do
- Work on icons in the menu-bar
- optimize slideshow with a interval defined by the user
- show infos: title/album/exif
- own themes with css
- zoom/magnification (perhaps hi-res image)
- drag and drop in 100%-view
- optimize positioning of zoomed images
Done
- show images in flash’s fullscreen-mode
- slideshow
- thumbnail-view
- “Eye-Candy”
Screenshots
2007-09-20 um 11.15 am
[…] LINK zur Seite (auch rechts im Menü zu finden ;)) […]
2008-09-21 um 2.23 pm
eh was ist mit den download links los?
greez