PhotoSurface.Js – MooTools fotoğraf albümü

Mootools için Martin Pengelly-Phillips tarafından hazırlanmış olan PhotoSurface Eklentisi kullanabileceğiniz çok kullanışlı animasyonlu resim galeri örneği. Sayfa ilk açıldığı zaman resimlerin her biri ayrı bir yerde dağınık halde duruyor ver her yenilemede resimlerin yeri değişiyor. Resimleri büyütmenin iki ayrı yolu var birincisi resmi tıklamak ikinciside büyütmek istediğiniz resmin üzerinde mouseyi basılı tutmak. Bir resmi basılı olarak tuttuğunuz zaman istediğiniz yere doğru sürükleyebiliyorsunuz.

Kullanımı

Head head etiketleri arasına eklenmesi gereken bölümler.

Js ve stil dosyaları :

<link media="all" type="text/css" rel="stylesheet" href="../Source/Assets/PhotoSurface.css" />
<link media="all" type="text/css" rel="stylesheet" href="./Assets/Demo.css" />
<script type="text/javascript" src="../Vendor/Mootools.js"></script>
<script type="text/javascript" src="../Source/PhotoSurface.js"></script

JavaScript :

Eklentiyi çalıştıran komutların içine bakarsanız jpeg uzantılı resimlerin url adresleri bulunuyor. Eklentinin orjinali sadece bir resim desteklemekteydi. Bir resim farklı yerde görünüyordu. Bana pek mantıklı gelmediği için biraz oynadım kodlarla surface.add vs satırını kopyala yapıştır yapıp sayfa içerisinde görülen reism adedini çoğaltabilirsiniz. Verdiğim download linki eklentinin orjinali olduğu için sadece bir resim ekleyebiliyorsunuz. Aşağıdaki kodları alıp orjnal kodlarla değiştirirseniz sorun ortadan kalkacaktır.

<script type="text/javascript">
var goBasic = function(surface) {

// clear existing photos
surface.empty();
// yeni resim ekleme
surface.add("./Assets/indonesia.jpg");
surface.add("./Assets/indonesia1.jpg");	
surface.add("./Assets/indonesia2.jpg");	
surface.add("./Assets/indonesia3.jpg");	
surface.add("./Assets/indonesia4.jpg");
surface.add("./Assets/indonesia5.jpg");	
surface.add("./Assets/indonesia6.jpg");	
surface.add("./Assets/indonesia7.jpg");	
surface.add("./Assets/indonesia8.jpg");	
surface.add("./Assets/indonesia9.jpg");	
surface.add("./Assets/indonesia10.jpg");
surface.add("./Assets/indonesia11.jpg");	
surface.add("./Assets/parambanan.jpg");
};

			var goAdvanced = function(surface) {

				// clear existing photos

				surface.empty();

				//  lets get some super low res photos in there...

				for (var i=0, l=1; i<l; i++)

				{

					new Photo("./Assets/SkylineSuperLow.jpg", { 

				       	onLoaded: function(photo) {

				       		photo.removeEvents('loaded'); 

				       		surface.add(photo); 

				       	},

				       	loadingIcon: "../Source/Assets/Hourglass.png"

			       	});

				}

		       	// now hook into the surface activation and deactivation events to manage the resolution swap

				surface.addEvent('activated', function(photo) {

		            // ensure surface will redraw when high res photo loaded

		            photo.addEvent('set', function(photo) {

		                photo.removeEvents();

		                surface.update({"layers":"active"});

		            });

		            // and change the photo

		            photo.set(photo.path.replace("SuperLow", "High"));

		        });

		        surface.addEvent('deactivated', function(photo) {

		            photo.removeEvents();

		            photo.set(photo.path.replace("High", "SuperLow"));

		        }.bind(this));

			};

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

				// create the surface and attach it to a containing element on the page

				var surface = new PhotoSurface().attach($('surface'));

				// and our switches for modes

				var options = $('options').getElements('li');

				options[0].addEvent('click', function(evt) {

					evt.stop();

					goBasic(surface);

					options[1].removeClass('selected');

					options[0].addClass('selected');

				});

				options[1].addEvent('click', function(evt) {

					evt.stop();

					goAdvanced(surface);

					options[0].removeClass('selected');

					options[1].addClass('selected');

				});

				// default option

				goBasic(surface);

				options[0].addClass('selected');

			});

		</script>

Body etiketleri arasına eklemeniz gereken bölüm.

Html :

<div id='demo'>
<div id='header'>
<h1>PhotoSurface Demo</h1>
</div>
<div id='options'>			
<ul>
<li>Basic</li>
<li>Advanced</li>
</ul>
</div>	
<div id='surface'>
</div>
</div>

Download

Demo