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:
Articles Tagged 'scriptaculous'
Shadowbox 3.0 beta
Simple Accordion with the class USimpleTabStrip
The class USimpleTabStrip , presented in Unobtrusive Simple TabStrip , can also be used to realize a simple menu Accordion .
offerti da Scriptaculous : Using the effects of BlindUp() and BlindDown() offered by Scriptaculous :
1 2 3 4 5 6 7 8 9 10 | function init () { USimpleTabStrip ( ) ; USimpleTabStrip uts = new (); ; uts. Init (); function ( e ) { uts. OnShow = function (s) { ( e ) ; new Effect. BlindDown (s); } function ( e ) { uts. onHide = function (s) { ( e ) ; new Effect. BlindUp (s); } } |
And by replacing HTML elements ( HTML source ):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | "accordion" > < div class = "accordion"> "#acc1" > Accordion 1 < / a > < a href = "# ACC1"> Accordion 1 </ a > "acc1" >< / a > < a name = "ACC1"> </ a > < div > h1 > < h1 > Content # 1 </ h1 > p > < p > Blah blah blah .... </ p > </ div > "#acc2" > Accordion 2 < / a > < a href = "# ACC2"> Accordion 2 </ a > "acc2" >< / a > < a name = "ACC2"> </ a > < div > h1 > < h1 > Content # 2 </ h1 > p > < p > Blah blah blah .... </ p > </ div > "#acc3" > Accordion 3 < / a > < a href = "# ACC3"> Accordion 3 </ a > "acc3" >< / a > < a name = "ACC3"> </ a > < div > h1 > < h1 > # 3 Content </ h1 > p > < p > Blah blah blah .... </ p > </ div > </ div > |
Is obtained by a simple menu Accordion that can be used in an extremely rapid.
Unobtrusive Simple TabStrip
USimpleTabStrip Unobtrusive JavaScript is to improve the classic link anchor (still) inside of an HTML page. This source is an improvement of the function presented in Unobtrusive Tabstrip . In this version as well as align the code to release 1.6 of prototype.js has created a real class to handle the TabStrip. The release presented here is very simple and straightforward. His main work lies in adding a click event to the normal link anchor. CSS styles are not presented also, just to leave the maximum freedom of action, but you can get an effective TabStrip with a few extra lines of CSS code, see Adding CSS styles below.
HTML Code
The class USimpleTabStrip works on a simple HTML, sftuttando the anchor ( <a name></a> ):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <! - Simple list of links on the page -> < ul > = "#tbs1" > Link 1 < / a >< / li > < them > < a href = "# Tbs1"> Link 1 </ a > </ trip > = "#tbs2" > Link 2 < / a >< / li > < them > < a href = "# tbs2"> Link 2 </ a > </ trip > = "#tbs3" > Link 3 < / a >< / li > < them > < a href = "# tbs3"> Link 3 </ a > </ trip > </ ul > <! - Blocks / tabs -> "tbs1" >< / a > < a name = "Tbs1"> </ a > < div > h1 > < h1 > Listing # 1 </ h1 > p > < p > Blah blah blah .... </ p > </ div > "tbs2" >< / a > < a name = "tbs2"> </ a > < div > h1 > < h1 > Listing # 2 </ h1 > p > < p > Blah blah blah .... </ p > </ div > "tbs3" >< / a > < a name = "tbs3"> </ a > < div > h1 > < h1 > Data # 3 </ h1 > p > < p > Blah blah blah .... </ p > </ div > |
funziona da contenitore. The tag div just below the anchor a work as a container.
Google AJAX Library API: a breakthrough for developers
Google , in the latter period, has released a multitude of tools for developers, constantly updating their releases. Now holds an agreement with popular AJAX framework, and not only to centralize the distribution of library jQuery , Prototype , script.aculo.us , MooTools and dojo !
In practice it is possible to access these libraries leveraging the infrastructure and the Google network, with significant advantages in terms of speed and safety.
The speed, in the load, is guaranteed by the same network as Google that, in addition to providing a structure per se of distributed server, allows (by default) loading compressed (gzip / minify) of the libraries. The hosting Google closest to the request will be used to send the code and, if not met or down temporarily, Google will provide the network, however, sending the Javascript code!
Shadowbox assetURL: set the image path
When Shadowbox opens his window to show a content (images, iframes, Movie, etc ...), displays, waiting for 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, and often there is also the risk of not accorgesene, if we're in a different tree, it generates a nice code 404 - page not girder, in our case file not found!
To solve the problem just initialize Shadowbox with an appropriate parameter which points to the absolute path to the images folder: undolog.com of, for example, I placed the animated gif of loading directly into the root present in the images folder (how about a billion others sites 
. To make this folder accessible to Shadowbox, regardless of the path, I entered semplicemenete:
1 2 | / / Init shadowbox with assetURL parameter assetURL : 'http://www.undolog.com/' } ) ; Shadowbox. Init ({assetURL: 'http://www.undolog.com/'}); |
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.
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.
Add new transitions to Scriptaculous
Some do not know, maybe, but you can overwrite or add transitions effects scriptaculous.js very easily and quickly. Scriptaculous transitions, effects used in determining the type of animation, such as those are not implemented in Flash (I recommend a look at this PDF of the great Robert Penner ), but the effect is - in fact - the same . Furthermore, in the package Scriptaculous, are not present some transitions based invence present in Actionscript. If we wanted to add a new transition to Scriptaculous just insert this code before using any effect:
1 2 3 | = function ( pos ) { Effect. Transitions. Exponential = function (pos) { - Math. pow ( 1 - pos , 2 ) ; return 1 - Math. pow (1 - pos, 2); } |
From this point on we can use the new transition exponential in all the effects of Scriptaculous. For a useful series of transitions - almost a porting to Actionscript Scriptaculous - see Add some spice to Scriptaculous .
Scriptaculous Effect.Tween: how it works
Of all the libraries 'web 2.0' available, scriptaculous is certainly the most poorly documented! On the official website, often slow, the documentation is incomplete, poorly made and difficult to use. With the latest releases, then, some new features are completely missing, just as the new core effect Tween (Effect.Tween). The latter, in a manner similar to Tween Flash, allows to manipulate custom transitions. SYNOPSIS its base is the following:
Light gallery: Lightview 2.0.0_rc1
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
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
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 |
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
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
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:
- Yahoo! User Interface Library (yahoo, dom, event, anim)
- Ext (standalone, ext-core.js)
- 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 are used only rel where, at its interior, find space all other configuration parameters. For example, to realize 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, 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
Latest Comments
Giovambattista Fazioli : @ Nik: I'm happy! Good luck then!
Nik : I have Monday examining information on java, thanks to me you have been very useful, the book I was unclear ...
Mark : Thank you very much, I've lit
I solved it by setting [cc_objc] / / OptionViewController.m - ...
Giovambattista Fazioli : @ Mark: I suggest you think a more correct approach. If you run the subclass of the tab ...
louis : very clear and simple I have to admit that writing a pa hardly use delegates created by ...