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

By

Photo Surface js

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>


Leave a Comment

Your email address will not be published.

You may also like

Trend