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.
<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>