Tworzenie galerii z wykorzystaniem MooTools

Wraz z pojawieniem się nowej wersji framework’a MooTools, wykorzystanie efektów JavaScript’owych stało się jeszcze prostsze. Nieco zmienione API jest łatwiejsze w opanowaniu niż w poprzedniej wersji 1.11. Dla tych co jeszcze nie znają możliwości tego narzędzia, zaprezentują mały przykład.

Gotowe skrypty można pobrać stąd: http://www.reboo.pl/files/download/galleries.zip

Do załadowania plików użyłem prostego loader’a. Czyta on wszystkie pliki z katalogu files i zwraca tablicę plików z dodatkowymi informacjami takimi jak rozszerzenie oraz wymiary, które później mogą być potrzebne.

Na potrzeby galerii zostają również utworzone pliki z przedrostkiem thumb reprezentujące miniaturki oraz shadow, które są odbiciami obrazów (efekt znany np. iPhone’ów). Odbicie to jest tworzone za pomocą biblioteki Asido opisywanej już wcześniej. Tym razem nie jest to jednak komponent do Cake’a tylko zwykły obiekt mający te same funkcje. Odbicie tworzone jest metodą flip, następnie crop do obcięcia i copy do nałożenia maski.

Przykład 1.

Efekt, który chcemy uzyskać można zobaczyć tutaj: http://www.reboo.pl/files/demos/galleries/p1.php

Skrypt p1.php na podstawie tablicy uzyskanej z loader’a tworzy linki z kotwicą ustawioną na kolejne elementy galerii oraz w tablicy ustawia kolejno wszystkie obrazki przypisując im id. Pod obrazkami znajdują się również wygenerowane odbicia.

Bez użycia MooTools kliknięcie w każdy link powoduje natychmiastowe przejście do danego obrazka.

Wystarczy jednak krótki skrypt:

window.addEvent('domready', function(){
	var mySmoothScroll = new SmoothScroll({
    	links: '#menu a'
	});
});

A po kliknięciu efekt przejścia będzie płynny i efektowny.

Trochę lepsze przykłady zastosowań tego przejścia można znaleźć np. na:
http://lukelarsen.com/
http://deanoakley.com/
http://www.webleeddesign.com/

Przykład 2.

Drugi przykład będzie nieco trudniejszy. Skoro mamy już odbicia jak w iPhone’ie to może zrobimy galerię, po której można się poruszać jak w iPhone’ie? Gotowy efekt można zobaczyć tutaj: http://www.reboo.pl/files/demos/galleries/p2.php Dla tych co nie mieli tego telefonu w ręce wyjaśnię, że zdjęcie można złapać myszką (w telefonie palcem) i przesunąć w prawo lub lewo. Jeśli zrobimy to energicznie to galeria przeskoczy o kilka zdjęć.

Skrypt p2.php działa podobnie jak poprzedni, inny jest natomiast JavaScript którego listing znajduje się poniżej.

var elWidth=600;
var elCount=0;
var drag;
var distance=0;
var time=0;

window.addEvent('domready', function(){
	drag=new Drag.Move($('fotos'), {
		modifiers: {y: false},
		onStart: dragStart,
		onComplete: dragStop
	});

	elCount=$('gallery').getElements('.foto').length;
	$$('.foto').setStyle('width', elWidth);
	$('fotos').setStyle('width', elWidth*elCount);
});

Drag.Move.implement({
	attach: function(){
		$$('.foto img.thumb').addEvent('mousedown', this.bound.start);
		$$('.foto img.thumb').addEvent('mouseout', this.bound.stop);
		return this;
	}
});

function dragStart(el)
{
	distance=el.getStyle('left').toInt();
	time=$time();
}

function dragStop(el)
{
	time=$time()-time;
	left=el.getStyle('left').toInt();
	width=el.getStyle('width').toInt();
	width-=elWidth;

	if(left>0)
		el.set('tween', {transition: 'elastic:out'}).tween('left', 0);
	else if (-left>width)
		el.set('tween', {transition: 'elastic:out'}).tween('left', (-width));
	else
	{
		distance=Math.abs(left)-Math.abs(distance);

		if (time>0)
		{
			if (Math.abs(distance)>=(elWidth/4))
			{
				time=1/time*500;
				distance=(time*distance).toInt();
			}
			to=left-distance;

			if(to>0)
			{
				$('fotos').set('tween', {transition: 'elastic:out'}).tween('left', 0);
			}
			else if (-to>width)
			{
				$('fotos').set('tween', {transition: 'elastic:out'}).tween('left', (-width));
			}
			else
			{
				to=Math.abs(to);
				x=(to/elWidth);
				if (distance<0)
					x=Math.ceil(x)*(elWidth); //left
				else
					x=Math.floor(x)*(elWidth); //right
				$('fotos').set('tween', {transition: 'quad:out'}).tween('left', (-x));
			}
		}
	}
}

Na początku skryptu znajduje się kilka zmiennych globalnych używanych przez niektóre funkcje. Ważniejszymi są jedynie distance – odległość jaką pokonał przenoszony element oraz time – czas ile zajęło przenoszenie tego elementu.

Po załadowaniu struktury DOM dodajemy możliwość przenoszenia kontenera fotos, ale tylko w poziomie (modifiers: {y: false}) oraz dodajemy funkcje przy rozpoczęciu (dragStart) i zakończeniu przenoszenia elementu (dragStop).

Kolejnym krokiem jest mała modyfikacja mechanizmu Drag. Funkcją implement można zmieniać metody danego elementu. Wykorzystujemy ją do przeniesienia mechanizmu Drag z całego kontenera fotos na jego elementy. Można by to tak zostawić, ale wtedy można by przechodzić po galerii trzymając za tło za obrazami.

Funkcja dragStart zapisuje tylko czas kiedy rozpoczęto przenoszenie i położenie kontenera.

Funkcja dragStop odczytuje czas zakończenia przenoszenia oraz nowe położenie kontenera. Jeśli przeniesiono galerię poza pierwszy lub ostatni element, wraca ona z efektem Elastic do tego obrazka. W przeciwnym wypadku na podstawie czasu i pokonanego dystansu następuje przeskoczenie o kilka elementów lub tylko do następnego.

Przykład 3.

Ostatni pprzykład tu już nie galeria, a raczej element jaki możemy wykorzystać gdzieś na stronie. Polega on na powiększeniu obraka po najechaniu na niego myszką, a można go zobaczyc tutaj: http://www.reboo.pl/files/demos/galleries/p3.php

Listing JavaScript’u odpowiedzialnego za ten efekt znajduje się poniżej.

window.addEvent('domready', function(){

	$$('img.thumb').each(function(thumb){
		thumb=$(thumb);
		p=thumb.getPosition();
		var bigimg=new Element('img', {
			width: (thumb.get('width')),
			height: (thumb.get('height')),
			src: (thumb.get('src')),
			id: (thumb.get('id')+'big')
		});
		bigimg.setStyles({
					position: 'absolute',
					left: p.x,
					top: p.y,
					opacity: 0,
					zIndex: 1000,
					width: (thumb.get('width')),
					height: (thumb.get('height'))
			});
		bigimg.set('class', 'big');
		bigimg.store('width', thumb.get('width'));
		bigimg.store('height', thumb.get('height'));
		bigimg.store('left', p.x);
		bigimg.store('top', p.y);
		bigimg.injectAfter(thumb);

		thumb.addEvent('mouseover', function(event){
			var thumb =$(this);
			p=thumb.getPosition();
			bigimg=$(thumb.get('id')+'big');
			bigimg.setStyle('opacity', 1);
			bigimg.morph({
				width: [(thumb.get('width')), (thumb.get('width')*3)],
				height: [(thumb.get('height')), (thumb.get('height')*3)],
				left: (p.x-thumb.get('width')),
				top: (p.y-thumb.get('height'))
			});
		});

		bigimg.addEvent('mouseout', function(event){
			var bigimg =$(this);
			var m = new Fx.Morph(bigimg);
			m.start({
				width: bigimg.retrieve('width'),
				height: bigimg.retrieve('height'),
				left: bigimg.retrieve('left'),
				top: bigimg.retrieve('top')
			}).chain(function(){
				$(this.element).setStyle('opacity', 0);
			});
		});
	});
});

Dala każdego obrazka z klasą thumb wykonywana jest funkcja, która odczytuje pozycje tego elementu oraz tworzy pod nim niewidoczny element z tym samym obrazkiem o 3 razy większych wymiarach (ważne żeby miniaturka była właśnie 3 razy mniejsza, stąd width danego elementu to „<?php echo ceil($file['width']/3); ?>”.

Następnie dodawany jest event mouseover. Ustawia on widoczność drugiego obrazka i dodaje efekt Morph, który powiększy ten element do 3 razy większych wymiarów oraz przeniesie go w lewo do góry o jedną-trzecią tych wymiarów. Da to efekt powiększania się tego obrazka.

Do tego nowego elementu dodawany jest event mouseout, który da efekt pomniejszenia obrazka.

Mam nadzieje, że efekty się spodobały i zachęcą niektórych z was do eksperymentowania z MooTools.