It was released right now (thanks to alert the author Michael JI Jackson ) release 3.0 beta Shadowbox.js . In addition to the new site design here is the most important changes prior to this release:
Articles Tagged 'galleries'
Shadowbox 3.0 beta
Shadowbox assetURL: set the image path
When Shadowbox opens his window to show content (images, iframes, Movie, etc ...), displays, waiting, an animated gif that comes in the package. If the page is using Shadowbox is at the same level of the images folder, everything works fine. By default, in fact, look for the animated gif below Shadowbox images / loading.gif - or images / loading-light.gif if you chose light styles (shadowbox-light.css). Otherwise, there is a risk and often not even accorgesene, if we are in a different tree, it generates a nice code 404 - page not girder, in our case file not found!
To resolve this problem sufficient to initialize Shadowbox with an appropriate parameter which indicates the absolute path of your images folder: undolog.com of, for example, I placed the animated gif of loading directly into the images folder present in root (like a billion others sites
. To make this folder accessible to Shadowbox, regardless of the path, I put semplicemenete:
1 2 | / / Init assetURL shadowbox with parameter assetURL : 'http://www.undolog.com/' } ) ; Shadowbox. Init ({assetURL: 'http://www.undolog.com/'}); |
All Lightbox clones in a dynamic array
Planetozh has created a beautiful scenery of the dynamic tool that can list all of the Javascript libraries like Lightbox.
Using a panel (see picture on left) with a series of "ticks" (checkbox), which indicate the various features of the libraries, you can run a filter, obtaining the list of one or more libraries that do the job. We hope that the author maintains updated this great page, very useful in extricating one of the numerous and powerful libraries of this type.
Light gallery: 2.0.0_rc1 Lightview
Here is yet another newly released Unobtrusive JavaScript library for image galleries and more. Lightview in 2.0.0_rc1 release , also added the functions to "open" Window with the content that goes beyond simple image: Flash movies, QuickTime , Form and IFRAME! Compared to the previous version (1.1.0 - which handles only images), then, this release candidate is enhanced features are also present in other libraries . . The tools required by Lighview to work very well known are the Prototype 1.6.0.2 and Scriptaculous 1.8.1 . Gliattributi library are used to manage the class and rel .
Interesting one aspect of this library is the extreme care with which the graphic appears.
Score: 9 - Home Lightview
Light Library: Slimbox by a Shadowbox, galleries in Javascript
Some might say - and rightly so - enough! JavaScript libraries (Unobtrusive - not intrusive or in part) to manage images and galleries there are so many. Anyway here's the list, with pros and cons, the best I've tried.
Slimbox 1:41
Extremely minimal, 7K (version 1.41), requires mootools to work. As indicated on the home page is a real clone graph Lightbox , we will see below. Honestly, aside from the extreme compactness of the library does not own peculiar characteristics. On the same site, however, you can also find a script to generate run-time reflections ... you may want to limit this ![]()
Rating: -6 - Slimbox Home, Home Reflection.js for MooTools
Lightbox2
One of the most known and simple. Manages images in this release are (so it does not work with QuickTime, Flash, or other). To operate, requires Prototype and Scriptaculous . Use the attribute rel to identify the links of images to be processed:
1 |
Like the other libraries that we shall see, supports the slideshow mode, enter any identifier in square brackets in a series of link / image:
1 2 3 | "images/image-1.jpg" rel = "lightbox[roadtrip]" > image #1 < / a > < a href = "images/image-1.jpg" rel = "lightbox [roadtrip]"> image # 1 </ a > "images/image-2.jpg" rel = "lightbox[roadtrip]" > image #2 < / a > < a href = "images/image-2.jpg" rel = "lightbox [roadtrip]"> image # 2 </ a > "images/image-3.jpg" rel = "lightbox[roadtrip]" > image #3 < / a > < a href = "images/image-3.jpg" rel = "lightbox [roadtrip]"> image # 3 </ a > |
Score: 6 - Top Lightbox2
LIGHTWINDOW 2.0
This is also quite common! After all how can you tell which one is used?
. However it is extremely comprehensive and versatile. On the site stands the request for donations for the purchase of a Mac ... and pressing a little invasive ... However, as above, but for its operation, requires the presence of Prototype and Scriptaculous . Unlike its predecessor, however, this allows you to view moltisiimi types of files: from the images, QuickTime movies, Flash movies, external HTML pages and PDF. ) altri obbligatori ( class e params - per impostare il comportamento della libreria). By contrast, uses various attributes, some optional ( author, caption and title ) other mandatory ( class and params - to set the behavior of the library). For example, to view a gallery or slideshow using the attribute rel :
1 2 3 | "gallery/0-sushi.jpg" class = "lightwindow" rel = "[Sushi]" title = "Left Behind" caption = "Look's super tasty!" author = "Unknown" > image #1 < / a > < a href = "gallery/0-sushi.jpg" class = "lightwindow" rel = "[Sushi]" title = "Left Behind" caption = "Look's super tasty!" author = "Unknown"> image # 1 </ a > "gallery/1-sushi.jpg" class = "lightwindow" rel = "[Sushi]" title = "Beware of warewolves..." caption = "I shouldn't be doing this when I am hungry" author = "Unknown" > image #2 < / a > < a href = "gallery/1-sushi.jpg" class = "lightwindow" rel = "[Sushi]" title = "Beware of warewolves ..." caption = "I Should not Be doing this when i am hungry" author = "Unknown"> image # 2 </ a > "gallery/2-sushi.jpg" class = "lightwindow" rel = "[Sushi]" title = "That was good!" caption = "Take that sushi!" author = "Unknown" > image #3 < / a > < a href = "gallery/2-sushi.jpg" class = "lightwindow" rel = "[Sushi]" title = "That was good!" caption = "Take that sushi!" author = "Unknown"> image # 3 </ a > |
Score: 8 - Home LightWindow 2.0
ShadowBox 1.0B
Although the version 1.0 beta, this is perhaps the most complete library, both from the functional point of view is supported by the libraries. For its operation, in fact, you can choose from a variety of frameworks, with the file "adapter" specially manufactured and supplied by the author:
- Yahoo! User Interface Library (Yahoo, Dom, Event, anim)
- Ext (standalone core.js-ext)
- Prototype + Scriptaculous
- jQuery
- MooTools (requires Fx.Styles and Its dependancies)
- Dojo Toolkit (thanks Peter Higgins)
The visual effect (configurable via skin / css), then, unlike the others, is definitely more appealing. The attributes used are only rel where, in its internal space are all the other configuration parameters. For example, to create a gallery, just use:
1 2 |
If you want to set some options ( see website for complete list ) simply use the following syntax:
1 |
On the Internet they can find other, such as JS Highslide . In fact, if you want to report some other library ... Anyway, personally, I prefer Shadowbox for simplicity, scalability and cross-framework.
Score: 9 - Top Shadowbox 1.0B
Unobtrusive LightWindow 2.0
New version of the library "unobtrusive" LightWindow Javascript specialized in displaying image galleries and now beyond. With this version you can view many links: images, Flash movies, QuickTime movies, PDF via FlashPaper documents, websites, and "windows" custom. Also among the new features include:
- Customizing the "caption" in the Window
- Ability to create windows sovrainpressione directly from Javascript code
- Support the iframe
- More parameters to customize the presentation
- Improved handling of animated transitions
- Ability to mix images with Flash animations and QuickTime movies








Latest Comments
datrix : Thank you very much!
Robert : I rispsoto your questions with pleasure. The idea is really great. I am looking for a solution ...
Sting : @ Darius - you can see an example here: http://www.fight4fun.it/ clicking on: MAPS I hope ...
vik : Giustappunto I'm working on a project and the client asked me to show all the news (which are CPT) in ...
Giovambattista Fazioli : @ paso: absolutely. Simply identifying the field [cci] input [/ cci] you want to ...