http://visuallightbox.com/tr/index.html
burda herşey yazıyor visual lightbox gallery
ben gene de yazayım
VisualLightBox galerisini sayfanıza yerleştirebilmek için:
1. Galerinizi VisualLightBox ile oluşturun ve yerel sürücüde herhangi bir test dosyasına kayıt edin.
2. Kayıt ettiğiniz index.html sayfasını bulunduğu dosyadan herhangi bir metin editörü ile açınız.
3. Asağıdaki kodu HEAD bölümü için kopyalayın ve kendi web sayfanızın HEAD bölümünün içine yapıştırın, örneğin:
<head>
...
<!-- Start VisualLightBox.com HEAD section -->
<link rel="stylesheet" href="engine/css/vlightbox.css" type="text/css" />
<style>#vlightbox a#vlb{display:none}</style>
<link rel="stylesheet" href="engine/css/visuallightbox.css" type="text/css" media="screen" />
<script src="engine/js/jquery.tools.min.js" type="text/javascript"></script>
<script src="engine/js/visuallightbox.js" type="text/javascript"></script>
<!-- End VisualLightBox.com HEAD section -->
...
</head>
4. Asağıdaki kodu BODY bölümü için kopyalayın ve kendi web sayfanızın BODY bölümünün içinde galeriyi kurmak istediğiniz yere yapıştırın, örneğin:
<body>
...
<!-- Start VisualLightBox.com BODY section -->
<div id="vlightbox">
<a class="vlightbox" href="data/images/dscn6831.jpg" title="DSCN6831"><img src="data/thumbnails/dscn6831.png"><span></span></a>
<a class="vlightbox" href="data/images/dscn6823.jpg" title="DSCN6823"><img src="data/thumbnails/dscn6823.png"><span></span></a>
<a class="vlightbox" href="data/images/dscn6819.jpg" title="DSCN6819"><img src="data/thumbnails/dscn6819.png"><span></span></a>
<a id="vlb" href="http://visuallightbox.com">Photo Gallery For Web by VisualLightBox.com v2.1</a>
</div>
<!-- End VisualLightBox.com BODY section -->
...
</body>
5.Resimlerin ve minyatür resimlerin (thumbnail) bulunduğu 'data' dosyası ile .css ve .js scriptinin bulunduğu 'engine' dosyasını kendi web sayfanızın da içinde bulunduğu dosyanın içine kopyalayınız.
Bunun örneğini web sitemizde bulabilirsiniz.
http://www.visuallightbox.com/#example