آلبوم عکس ساده و جالب

امروز قصد دارم ساخت یک البوم عکس ساده و در غین حال کار آمد رو آموزش بدم
شما به وسیله این آلبوم می تونید بجای عکس های بزرگ عکس هایی با اندازه کوچک و کم حجم را نمایش بدید و با قرار گرفتن موس روی عکس ها تصویر اصلی ظاهر  شود

به تصاویر زیر دقت کنید

اینجا می تونید توضیحات دلخواه برای عکس داشته باشید

اینجا می تونید توضیحات دلخواه برای عکس دوم داشته باشید

اینجا می تونید توضیحات دلخواه برای عکس سوم داشته باشید

اینجا می تونید توضیحات دلخواه برای عکس چهارم داشته باشید

آموزش در ادامه مطلب

برای این کار ابتدا عکس های سایز کوچک و بزرگ را در یک هاست سرویس ذخیره می کنید

بعد در صفحه دلخواه برای هر عکس یک لایه (div) ایجاد می کنید با کلاس (ienlarger) و عکس های کوچک و بیزرگ را مانند نمونه زیر در محل قرار می دید:

<div class="ienlarger"><a href="آدرس لینک مورد نظرتون">
        <img src="آدرس عکس کوچک" alt="thumb" class="resize_thumb" /><span>
        <img src="آدرس عکس بزرگ" alt="large" /><br />
            توضیحات دلخواه  </span></a></div>


حالا کدهای زیر رو در بخش کدهای CSS یا داخل تگ Style مانند نمونه زیر قرار می دید:

<style type="text/css">
.ienlarger { float: left;clear: none; padding-bottom: 5px;padding-right: 5px;}
.ienlarger a { display:block; text-decoration: none;}
.ienlarger a:hover{ position:relative;}
.ienlarger span img {border: 1px solid silver; margin-bottom: 8px; }
.ienlarger a span { direction:rtl;position: absolute; display:none;color: #FFCC00; text-decoration: none;font-family: Arial, Helvetica, sans-serif;font-size: 13px;background-color: #000000;font-weight: bold;padding-top: 10px;padding-right: 10px;padding-bottom: 13px;padding-left: 10px;}
.ienlarger img {border-width: 0;}
.ienlarger a:hover span {display:block;top: 50px; left: 90px;z-index: 100;}
.resize_thumb {width: 100px;height : 112px;}
</style>