Articles Tagged 'Slimbox'

Shadowbox 3.0 beta

It was released right now (thanks to the alert author Michael JI Jackson ) release 3.0 beta Shadowbox.js . In addition to the new site design here is the most important changes in this release prior:

More ...

All clones of Lightbox in a dynamic array

Planetozh has created a beautiful scenery of the dynamic tool that can list all of the Javascript libraries like Lightbox.

image

image Using a panel (see image at left) with a number of "ticks" (checkbox), which indicate the various features of the libraries, you can run a filter thus obtaining a 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.

More ...

Light gallery: Lightview 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 adds features for "open" Window with the content that goes beyond the simple picture: 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 are very well known Prototype 1.6.0.2 and Scriptaculous 1.8.1 . Gliattributi used to manage the library are class and rel .

Interesting one aspect of this library is the extreme care with which the graphic appears.

Rating: 9 - Home Lightview

More ...

Light Library: Slimbox by a Shadowbox, galleries in Javascript

Some might say - and rightly so - enough! Javascript libraries (Unobtrusive - not intrusive, or partially) 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 Page, Home Page Reflection.js for MooTools

Lightbox2

Lightbox2 One of the most known and simple. Manages images in this release are (so it does not work with QuickTime, Flash, etc.). For its operation, requires Prototype and Scriptaculous . Use the attribute rel to identify the links of your images to be processed:

1
"images/image-1.jpg" rel = "lightbox" title = "my caption" > image #1 < / a > < a href = "images/image-1.jpg" rel = "lightbox" title = "my caption"> image # 1 </ a >

Like the other libraries that we will see, it supports the slideshow mode, by inserting brackets any identifier 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 >

Rating: 6 - Home Page Lightbox2

LIGHTWINDOW 2.0

LightWindow 2.0 Even this is quite common! After all, how to understand what is the most used? ;) . However it is extremely comprehensive and versatile. On the site stands the request for donations for the purchase of a Mac ... a little invasive and urgent ... Anyway, like the previous one, 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 slide show 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 </ to >
"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 Page LightWindow 2.0

ShadowBox 1.0B

Shadowbox Although the beta version 1.0, this is perhaps the most complete library, both from the functional point of view for both libraries supported. For its operation, in fact, you can choose from a variety of frameworks, with the file "adapters" specially manufactured and supplied by the author:

The visual effect (configurable via skin / css), then, unlike the others, is definitely more appealing. The attributes are used only rel where, at its interior, find space all other configuration parameters. For example, to realize a gallery, just use:

1
2
"beach.jpg" rel = "shadowbox[Vacation]" > The Beach < / a > < a href = "beach.jpg" rel = "shadowbox [Vacation]"> The Beach </ a >
"pier.jpg" rel = "shadowbox[Vacation]" > The Pier < / a > < a href = "pier.jpg" rel = "shadowbox [Vacation]"> The Pier </ a >

If you want to set some options ( see website for complete list ) simply use the following syntax:

1
"myimage.jpg" rel = "shadowbox;options={overlayOpacity: 0.5, resize: false}" > My Image < / a > < a href = "myimage.jpg" rel = "shadowbox; options = {overlayOpacity: 0.5, resize: false}"> My Image </ a >

On the Internet they can find other, like Highslide JS . Indeed, if some other library you want to report me ... Anyway, personally, I prefer Shadowbox for simplicity, scalability and cross-framework.

Rating: 9 - Top Shadowbox 1.0B

More ...


Stop SOPA