W jednym z ostatnich projektów klient zażyczył sobie galerii zbliżonej w działaniu do Lightboxa, ale dodatkowo wzbogaconej o funkcję pokazu slajdów. Zgodnie z podstawową zasadą leniwego programisty zacząłem od przeszukania zasobów Internetu w celu znalezienia gotowego rozwiązania. W krótkim czasie trafiłem tutaj: Revamped Slideshow, na blogu TripTracker.

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>