برای ساخت این گالری عکس نیاز به دانلود و یا استفاده از 3 فایل زیر دارید :
فایل جاوای پلاگین jquery.lightbox-0.5
بعد از اضافه کردن این 3 فایل کدهای CSS و جاوای زیر رو هم به صفحه اضافه کنید :
<script type="text/javascript">
$(function() {
$('#gallery a').lightBox();
});
</script>
<style type="text/css">
/* jQuery lightBox plugin - Gallery style */
#gallery {
background-color: #444;
padding: 10px;
width: 520px;
}
#gallery ul { list-style: none; }
#gallery ul li { display: inline; }
#gallery ul img {
border: 5px solid #3e3e3e;
border-width: 5px 5px 20px;
}
#gallery ul a:hover img {
border: 5px solid #fff;
border-width: 5px 5px 20px;
color: #fff;
}
#gallery ul a:hover { color: #fff; }
</style>
این گالری از لیست های مرتب استفاده می کنه. پس برای تعریف عکس ها یه لیست مزتب با استفاده از تگ <ul></ul> ایجاد کنید.
به تعداد عکس هاتون تگ های li رو ایجاد کنید. توی هر کدوم از li ها یک تگ <a></a> ایجاد کنید. پارامترهای این تگ را به صورت زیر تعیین کنید :
پارامتر href جای عکس اصلیتون رو نشون میده.
پارامتر title توضیح عکستون رو پایین عکس نشون میده.
بین تگ <a></a> یک تگ img ایجاد کنید. این تگ برای عکس کوچیکی که می خوایم نشون داده شه هست و پارامتر src اون رو برابر آدرس عکس کوچیکمون می کنیم. برای تمام اعضای لیستتون این کار رو انجام بدید. فایل jquery.lightbox-0.5.js رو باز کنید و به جای عکس های قبل و بعد و لود و ... آدرس عکس های خودتون رو که آپلود کردید بدید. در آخر تمام تگ های <a></a> داخل یک تگ div با آیدی gallery بذارید.
خب گالری عکس آماده هست.
برای دیدن نمونه و دانلود پروژه کامل به ادامه مطلب برید.