mslonik.pl

http://www.digitalia.be/software/slimbox2

Wstęp

Slimbox 2 to koło 4 KB kodu, który jest klonem popularnego efektu graficznego Lightbox 2, czyli skryptu stworzonego przez Lokesh Dhakara. Slimbox2 został napisany z wykorzystaniem biblioteki javascript o nazwie jQuery.Jest mały, wydajny, przyjazny dla użytkownika, daje się dopasować do potrzeb użytkownika dzięki bogatemu zestawowi argumentów oraz w 100% kompatybilny z oryginalnym Lightbox 2.

Funkcje

W porównaniu z oryginalnym skryptem Lightbox skrypt Slimbox 2 został wyposażony w następujący zestaw funkcji:

• Slimbox daje się wywołać natychmiast po zakończeniu edycji dokumentu. Oznacza to, że nie musisz czekać na wszystkie obrazki dostępne na twojej stronie zanim będziesz mógł kliknąć na pierwszy z obrazków by wywołać efekt Lightbox.
• Slimbox potrafi wycentrować obrazki w pionie, nie tylko w poziomie. Możliwe jest także przewijanie galerii w pionie.
• Działa wspaniale na stronach wymagających przewijania w poziomie.
• Po wywołaniu tymczasowo ukrywa animacje flash oraz inne osadzone obiekty by uniknąć wyświetlenia błędów w niektórych przeglądarkach. Podobnie ukrywa opcje wyboru w Internet Explorer 6.
• Wykorzystanie specjalnej opcji ("loop") pozwala na przewinięcie galerii pomiędzy pierwszym i ostatnim obrazkiem tworzącym galerię.
• Slimbox szybciej reaguje na działania użytkownika; można go błyskawicznie w dowolnym momencie zamknąć, tak za pomocą myszy jak i klawiatury, jak i
• Slimbox is more responsive; it allows you to close it immediately at any time using the keyboard or mouse and to instantly navigate to any image before the current image has loaded or the animations are complete.
• The script is more robust; for example you can try to start and stop Slimbox or navigate between images very quickly to interrupt the animations and resume them and you won’t notice any bug like in the original Lightbox where sometimes the animation stops or the elements are wrongly sized or positioned.
• Slimbox can be launched from the traditional image links inside the page like the original Lightbox, but also directly from Javascript using its complete API.

From a design point of view, Slimbox 2 is very different from Lightbox:

• The code is optimized to an insane level and has been written from scratch with efficiency in mind for the jQuery library instead of the huge Prototype/Scriptaculous. The script itself is as tiny as 4kb (minified, uncompressed).
• Slimbox can be entirely customized thanks to many options. You can change the duration of any effect, the counter text translation or even the navigtation keys.
• Slimbox has a much more powerful API, allowing you to apply the Lightbox effect easily on any clickable element or from any script. For example, it can be easily integrated with links pointing to Flickr or Picasa Web Albums pages or with any javascript image gallery.
• The Slimbox CSS are simpler and 100% valid (no more CSS hacks). Also, every visual aspect of Slimbox (including images) is specified in the CSS instead of the Javascript so it is easier to style. You may even change any border size in the CSS and Slimbox will still work fine, which means that nothing is “hard-coded” in the source code.

<cut>

More specific info about slimbox2 available at Christophe Beyls' homepage.

New added features to version 2.05 by Karol Domagała from mslonik.pl team...

• In any previous version of the script there were used special small pictures to visualize functions 'next', 'previous' and 'close'. From now one can use any text string against pictures. It was made with use  of new added arguments: nextImageLbText, prevImageLbText, closeLbText, counterText
• The default CSS was slightly changed, so above text strings are semi transparent.

You can download 2.05 slimbox2 source code from here.

One of the most importan developments made with use of the slimbox2 ver. 2.05 is YASIG joomla gallery plugin, but that's another story...

http://www.digitalia.be/software/slimbox2

Introduction

Slimbox 2 is a 4 KB visual clone of the popular Lightbox 2 script by Lokesh Dhakar, written using the jQuery javascript library. It was designed to be very small, efficient, standards-friendly, fully customizable, more convenient and 100% compatible with the original Lightbox 2.

Features

From a functional point of view, Slimbox 2 has the following added features compared to the original Lightbox:

• Slimbox is ready to launch as soon as the document is ready. This means that you don’t have to wait for all images of the page to be loaded before clicking on a link that will launch the Lightbox effect.
• Slimbox also centers images vertically on startup, not just horizontally. Vertical scrolling is still possible.
• It works perfectly on horizontal-scrolling websites.
• It temporary hides flash animations and other embedded videos while it is open to avoid display bugs in some browsers. It also hides select boxes in Internet Explorer 6.
• Using a special option (“loop”), it allows you to navigate between the first and last images.
• Slimbox is more responsive; it allows you to close it immediately at any time using the keyboard or mouse and to instantly navigate to any image before the current image has loaded or the animations are complete.
• The script is more robust; for example you can try to start and stop Slimbox or navigate between images very quickly to interrupt the animations and resume them and you won’t notice any bug like in the original Lightbox where sometimes the animation stops or the elements are wrongly sized or positioned.
• Slimbox can be launched from the traditional image links inside the page like the original Lightbox, but also directly from Javascript using its complete API.

From a design point of view, Slimbox 2 is very different from Lightbox:

• The code is optimized to an insane level and has been written from scratch with efficiency in mind for the jQuery library instead of the huge Prototype/Scriptaculous. The script itself is as tiny as 4kb (minified, uncompressed).
• Slimbox can be entirely customized thanks to many options. You can change the duration of any effect, the counter text translation or even the navigtation keys.
• Slimbox has a much more powerful API, allowing you to apply the Lightbox effect easily on any clickable element or from any script. For example, it can be easily integrated with links pointing to Flickr or Picasa Web Albums pages or with any javascript image gallery.
• The Slimbox CSS are simpler and 100% valid (no more CSS hacks). Also, every visual aspect of Slimbox (including images) is specified in the CSS instead of the Javascript so it is easier to style. You may even change any border size in the CSS and Slimbox will still work fine, which means that nothing is “hard-coded” in the source code.

<cut>

More specific info about slimbox2 available at Christophe Beyls' homepage.

New added features to version 2.05 by Karol Domagała from mslonik.pl team...

• In any previous version of the script there were used special small pictures to visualize functions 'next', 'previous' and 'close'. From now one can use any text string against pictures. It was made with use  of new added arguments: nextImageLbText, prevImageLbText, closeLbText, counterText
• The default CSS was slightly changed, so above text strings are semi transparent.

You can download 2.05 slimbox2 source code from here.

One of the most importan developments made with use of the slimbox2 ver. 2.05 is YASIG joomla gallery plugin, but that's another story...

This demo page was prepared for you to show you at least some features of YASIG gallery.

YASIG gallery displays a set of user pictures in the following modes:

a. miniature (default),

b.normal.

What could be seen below, is gallery in miniature mode. Pictures are displayed in article body, one beside another. When you click at any of the miniatures gallery switches to normal mode. In normal mode screen is covered with just one picture, enlarged in comparison to miniature. Additionally when a cursor is moved over picture there are displayed control buttons and below a picture there is displayed short comment.

Going along a gallery pictures is possible after clicking over a picture body or by use of keyboard shortcuts ('left', 'right', 'Esc'). Gallery switches again to miniature mode, which is default one, if 'Close' function was activated.

Application of above gallery is as easy as placing the following text into your article body, paying attention to some syntax requirements:

Poniższa strona ma za zadanie zademonstrować chociaż niektóre możliwości galerii YASIG.

Galeria YASIG przedstawia zdjęcia składowe galerii za pomocą następujących widoków:

a. miniatur (domyślnego),

b. normalnego.

To, co widać poniżej, to widok miniatur. Zdjęcia tworzące galerię są wyświetlane w treści artykułu, jedno obok drugiego. Po kliknięciu na którymś ze zdjęć galeria przełącza się w widok normalny. W trybie normalnym na ekranie jednorazowo widocznej jest jedno zdjęcie, powiększone w stosunku do miniatury. Dodatkowo po najechaniu na obszar zdjęcia pojawiają się elementy sterujące, a pod zdjęciem wyświetla się opis.

Przechodzenie pomiędzy kolejnymi zdjęciami galerii jest możliwe dzięki klikaniu w odpowiednie obszary ekranu, albo poprzez naciskanie klawiszy kursorów ('prawo', 'lewo', 'Esc'). Po wybraniu przycisku 'Zamknij' galeria ponownie przechodzi do widoku miniatur, który jest widokiem domyślnym.

Wywołanie powyższej galerii, czyli tekst, który wystarczy wkleić w tekście artykułu, by wyświetlona została galeria, wygląda następująco:

{yasig

images/stories/20090705_ParadaZaglowcow/800_img_6265_LordNelson.jpg|
images/stories/20090705_ParadaZaglowcow/200_img_6265_LordNelson.jpg|

Przykładowy komentarz z przecinkiem :-),||

images/stories/20090705_ParadaZaglowcow/800_img_6303_KapitanPoinc.jpg|
images/stories/20090705_ParadaZaglowcow/200_img_6303_KapitanPoinc.jpg|

Kolejny komentarz...||

images/stories/20090705_ParadaZaglowcow/800_img_6306_Sorlandet.jpg|
images/stories/20090705_ParadaZaglowcow/200_img_6306_Sorlandet.jpg|

I jeszcze jeden komentarz||

images/stories/20090705_ParadaZaglowcow/800_img_6328_Eendracht.jpg|
images/stories/20090705_ParadaZaglowcow/200_img_6328_Eendracht.jpg|

fik||

images/stories/20090705_ParadaZaglowcow/800_img_6334_AnneMargaritha.jpg|
images/stories/20090705_ParadaZaglowcow/200_img_6334_AnneMargaritha.jpg|

Kolejny komentarz...||

images/stories/20090705_ParadaZaglowcow/800_img_6347_AnneMargaritha.jpg|
images/stories/20090705_ParadaZaglowcow/200_img_6347_AnneMargaritha.jpg|

Kolejny komentarz...||

images/stories/20090705_ParadaZaglowcow/800_img_6348_Szwed.jpg|
images/stories/20090705_ParadaZaglowcow/200_img_6348_Szwed.jpg|

Kolejny komentarz...||

images/stories/20090705_ParadaZaglowcow/800_img_6350_Humboldt.jpg|
images/stories/20090705_ParadaZaglowcow/200_img_6350_Humboldt.jpg|

Kolejny komentarz...||

}