imgBox

Web sayfalarının geç açılmalarını engelleyen en önemli etkenlerden bir tanesi de bildiğiniz gibi sayfaya yüklenmiş olan resimlerdir. Özellikle fotoğraf paylaşımı yapan sitelerin yüklenme süresi çok geç olur ve çoğu zaman da hosting planları yetersiz kalır. Bu gibi sorunları çözmek amacıyla geliştirilmiş olan lazyload ve lightbox tarzı bir sürü uygulama var. Bazıları bütün resimlerin aynı anda yüklenmesini engellerken bazıları da küçük veriyonunun yüklenmesini ve tıklandığında ajax ile yükleyerek büyük olanının açılmasını sağlarlar.

imgBox uygulaması da hem site açılış hızını arttırmak hem de tıklandığında aynı sayfa içinde ajax ile yüklenen resimleri eklemek için hazırlanmış bir çalışma. Nasıl olsa ziyaretçiler bütün site içeriklerini teker teker incelemiyor. Sadece ilgisini çeken içerikleri incelerler genelde. Boşu boşuna hosting planını tüketmemek amacıyla imgBox uygulamasını kullanabilirsiniz. Fotoğrafları yüklerken ana ekranda görünmesi için küçük olanlarını eklemeniz gerek. Ziyaretçiler tıkladığında ajax ile daha büyük olan versiyonunun açılması içinde ayrıca büyük olanını eklemeniz gerekiyor.

Kullanım

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

Js ve stil dosyaları :

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" src="imgbox/jquery.imgbox.pack.js"></script>
<link rel="stylesheet" href="imgbox/imgbox.css" />

Stil :

	<style type="text/css">
		#images a {
			margin-right: 14px;
		}

		#images a img {
			border: 1px solid #888;	
			padding: 3px;
			vertical-align: top;
		}

		#credit {
			clear: both;	
			margin-top: 50px;
			padding-top: 20px;
			font-size: 10px;
			border-top: 1px solid #BBB;
			font-family: Verdana;
		}
	</style>

JavaScript :

	<script type="text/javascript">
		$(document).ready(function() {
			$("#example1-1").imgbox();

			$("#example1-2").imgbox({
			    'zoomOpacity'	: true,
				'alignment'		: 'center'
			});

			$("#example1-3").imgbox({
				'speedIn'		: 0,
				'speedOut'		: 0
			});

			$("#example2-1, #example2-2").imgbox({
				'speedIn'		: 0,
				'speedOut'		: 0,
				'alignment'		: 'center',
				'overlayShow'	: true,
				'allowMultiple'	: false
			});
		});
	</script>

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

Html :

		<div id="images">

			<a id="example1-1" title="" href="https://farm4.static.flickr.com/3498/4006876523_289a8296ee.jpg"><img alt="" src="https://farm4.static.flickr.com/3498/4006876523_289a8296ee_m.jpg" /></a>
			<a id="example1-2" title="Lorem ipsum dolor sit amet" href="https://farm4.static.flickr.com/3068/3096463741_67b9979fd4.jpg"><img alt="" src="https://farm4.static.flickr.com/3068/3096463741_67b9979fd4_m.jpg" /></a>
			<a id="example1-3" title="Maecenas eros massa, pulvinar et sagittis adipiscing, &lt;br /&gt; molestie et arcu" href="https://farm3.static.flickr.com/2642/4003912116_389c3891cf.jpg"><img alt="" src="https://farm3.static.flickr.com/2642/4003912116_389c3891cf_m.jpg" /></a>

			<a id="example2-1" title="" href="https://farm4.static.flickr.com/3460/3793633187_44790d1f0a_o.jpg"><img alt="" src="https://farm4.static.flickr.com/3460/3793633187_f56bb1bf99_m.jpg" /></a>
			<a id="example2-2" title="Maecenas eros massa, pulvinar et sagittis adipiscing, molestie et arcu" href="https://farm4.static.flickr.com/3456/3793633099_3e1e53e4ac_o.jpg"><img alt="" src="https://farm4.static.flickr.com/3456/3793633099_4f9c3e08b3_m.jpg" /></a>

		</div>

Download

Demo