Smooth Slideshow to darmowa biblioteka, autorem której jest Jonathan Schemoul. Kilka słów podsumowania:

1. pozwala na wyświetlanie zdjęć w trybach zarówno ręcznym jak i automatycznym,
2. jest oparta o framework mootools,
3. skrypty ważą razem około 22kB.

I jeszcze dwa linki bezpośrednio do przykładów:

• Wersja automatyczna
• Wersja działająca po kliknięciu

Klient wyraził swoją aprobatę, więc pozostało jedynie zaimplementować to ustrojstwo na stronie, a właściwie zastąpić obecnego już Thickboxa. Niestety – oferowany przez autorów sposób integracji jest dość nieszczęśliwy i całkowicie niezgodny z zasadami unobtrusive javascript [ciągle nie znam dobrego polskiego tłumaczenia]. Dlatego przygotowałem krótki skrypt, który załatwia to w bardziej elegancki sposób.

Wersja zależna od jQuery

var uoSlideshow = {
	CLASS_NAME : 'slideshow',
	viewer : new PhotoViewer(),
	initialize : function(){
		$('a.'+uoSlideshow.CLASS_NAME).each(function(i){
			uoSlideshow.viewer.add(this.href);
			$(this).click(function(e){ e.preventDefault(); uoSlideshow.viewer.show(i)});
		});
	}
}

$(document).ready(uoSlideshow.initialize);

Wersja w osobnym pliku | Przykład

Powyższe skrypt wymaga podłączonej biblioteki jQuery. Aby wszystko działało poprawnie powyższy plik powinnien być podłączony po plikach jQuery i właściwego slideshowa, czyli np w ten sposób:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/slide.js"></script>
<script type="text/javascript" src="js/uoSlideshow-jquery.js"></script>

Wersja niezależna od zewnętrznych bibliotek

Napisałem też wersję, która może działać samodzielnie. Do przypisywania zdarzeń wykorzystałem funkcję addEvent() autorstwa Johna Resiga.

function addEvent( obj, type, fn )
{
	if (obj.addEventListener)
		obj.addEventListener( type, fn, false );
	else if (obj.attachEvent)
	{
		obj["e"+type+fn] = fn;
		obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
		obj.attachEvent( "on"+type, obj[type+fn] );
	}
}

function stopDefault(e){
	if (e.preventDefault) {
		e.preventDefault(); // The W3C DOM way
	} else {
		e.returnValue = false; // The IE way
	}
}

var uoSlideshow = {
	CLASS_NAME : 'slideshow',
	viewer : new PhotoViewer(),
	initialize : function(){
		for(var i=0; (a = document.getElementsByTagName('a')[i]);i++ ){
			if (uoSlideshow.isSlide(a)) {
				a.index = i;
				uoSlideshow.viewer.add(a.href);
				addEvent(a,'click',function(e){ stopDefault(e); uoSlideshow.viewer.show(this.index);  });
			}
		}
	},
	isSlide : function(obj)	{
		if (obj && obj.className){
			var cn = obj.className.split(" ");
			var i = cn.length-1;
			while (c = cn[i]) {
				if (c == uoSlideshow.CLASS_NAME){
					return true;
				}
				i--;
			}
		}
		return false;
	}
}

addEvent(window,'load',uoSlideshow.initialize);

Wersja w osobnym pliku | Przykład

Tutaj implementacja ogranicza się do wklejenia powyższego kodu w nagłówku:

<script type="text/javascript" src="js/slide.js"></script>
<script type="text/javascript" src="js/uoSlideshow-standalone.js"></script>

Autorzy zamienili rozrośnięte biblioteki Prototype i Script.aculo.us leciutką biblioteką moo.fx w połączeniu z prototype.lite (czyli specjalnie odchudzoną wersją Prototype, stworzoną specjalnie na potrzeby moo.fx). Dzięki temu udało się uzyskać rozmiar plików JavaScript poniżej 30kB, co według mnie jest już jak najbardziej dopuszczalne.

Szczerze polecam zapoznanie się z tym rozwiązaniem, gdyż teraz nie tylko dobrze wygląda, banalnie się integruje, ale również mało waży.

Mimo, że od czasu pierwotnego Lightboxa powstało kilka lub nawet kilkanaście jego odmian, ja od pewnego czasu korzystam właśnie z Thickboxa. Mam ku temu przynajmniej dwa powody:

1. Jest oparty na rewelacyjnym frameworku jQuery, który przydaje mi się praktycznie w każdym nowym projekcie, więc dodanie samego skryptu Thickboxa jest bezproblemowe
2. Całkowity rozmiar po skompresowaniu to około 12k (nie licząc jQuery – łącznie niecałe 30k). W porównaniu z innymi rozwiązaniami (np. ślicznym, jednakże ciężkawym Lightbox2.0 – ponad 130kB) w tej kwestii wypada znakomicie.

Lightbox i jego pochodne to wg mnie najbardziej przydatne rozwiązanie, na które udało mi się natknąć w tym roku – obejrzycie koniecznie, jeśli jeszcze nie znacie.