نظرسنجی
علاقه مند به کار در کدام شرکت هستید؟








 
خروجی RSS

یک گالری عکس بسازید


28 شهریور 1388

گالری عکس یکی از قسمت هایی است که معمولا در سایت های مخصوص wallpaper و تصاویر استفادۀ زیادی دارد. صرف نظر زیبایی تصاویر، نوع و استایل گالری هم می تواند بر روی کاربر تاثیرات متفاوتی بگذارد. علاوه بر جاوا اسکریپت و یا فریم ورک های آن مثل jQuery و ... که امروزه استفادۀ زیادی برای ایجاد جلوه های جذاب دارند، CSS نیز به عنوان یک عنصر پایه نقش به سزایی ایفا می کند. در این مقاله هم قصد ساخت یک گالری عکس به کمک HTML و CSS را دارم. در انتهای مقاله 2 خصوصیت جدید CSS 3.0 نیز برای ایجاد زیبایی بیشتر معرفی خواهد شد.

 

gallery06

 

همانند دو آموزش قبل (منو های Drop down و ساخت تب ) در ساخت این طرح نیز از دو عنصر ul و li به عنوان عناصر پایه و شکل دهندۀ چهارچوب کار خود استفاده می کنیم، سپس به کمک CSS آن ها را استایل دهی خواهیم کرد. برای ساخت گالری از 15 تصویر مختلف در ابعاد 188*250 استفاده کرده ام، البته اندازه ای که در حالت عادی دیده می شود 75*100 پیکسل است و تنها زمانی که موس بر روی تصاویر قرار گیرد، در ابعاد اصلی نمایش میابند.

برای شروع کار کد html زیر را در نظر بگیرید:

<div id="container">
    <ul class="gallery">
        <div><li><img src="images/01.jpg" alt="" /></li></div>
        <div><li><img src="images/02.jpg" alt="" /></li></div>
        <div><li><img src="images/03.jpg" alt="" /></li></div>
        <div><li><img src="images/04.jpg" alt="" /></li></div>
        <div><li><img src="images/05.jpg" alt="" /></li></div>
        <div><li><img src="images/06.jpg" alt="" /></li></div>
        <div><li><img src="images/07.jpg" alt="" /></li></div>
        <div><li><img src="images/08.jpg" alt="" /></li></div>
        <div><li><img src="images/09.jpg" alt="" /></li></div>
        <div><li><img src="images/10.jpg" alt="" /></li></div>
        <div><li><img src="images/11.jpg" alt="" /></li></div>
        <div><li><img src="images/12.jpg" alt="" /></li></div>
        <div><li><img src="images/13.jpg" alt="" /></li></div>
        <div><li><img src="images/14.jpg" alt="" /></li></div>
        <div><li><img src="images/15.jpg" alt="" /></li></div>
    </ul>
</div>

همانطور که مشاده می کنید تگ های img در بین li ها و li ها ما بین یک div قرار دارند. این تمام کد html ئی است که برای ساخت گالری استفاده می کنیم. حال به تگ های مذکور سبک های زیر را نسبت می دهیم:

#container
{
    margin: 100px auto;
    width: 610px;
}
ul.gallery
{
    margin: 0;
    padding: 0;
}
ul.gallery li
{
    float: left;
    list-style: none;
    margin: 0 2px 2px 0;
    padding: 5px 5px 0 5px;
    border: 3px solid #acacac;
    background-color: #fff;
{

خاصیت float: left در استایل های مربوط به تگ li باعث می شود تگ های li به صورت افقی کنار هم قرار بگیرند، سایر خصوصیات هم فکر می کنم به اندازۀ کافی واضح باشند.

تگ  img مربوط که هر تصویر را نیز به صورت زیر سبک دهی می کنیم:

ul.gallery img
{
    width: 100px;
    height: 75px;
}

همانطور که در ابتدا عرض کرم، ابعاد اصلی تصاویر ما 188*250 پیکسل است و تنها زمانی که موس بر روی هر تصویر قرار می گیرد، آن تصویر با این ابعاد نمایش میابد. به همین منطور در خصوصیات مربوط به تگ img مقدار 100 و 75 پیکسل برای عرض  و ارتفاع تصاویر در نظر گرفته شده است.

با انجام این مراحل فرم کلی گالری ما شکل گرفته و به صورت زیر خواهد بود:

gallery01

در ادامه برای جذاب تر شدن گالری، جلوۀ Roll over را برای تصاویر ایجاد می کنیم، به گونه ای که وقتی موس بر روی تصویری قرار گرفت، آن تصویر در ابعاد بزرگتر نمایش میابد. به این منظور کلاس کاذب hover را برای تگ li که حول تصاویر ما قرار دارد استایل دهی کنیم:

ul.gallery li:hover
{
    position: relative;
    top: -56px;
    left: -75px;
    width: 250px;
    height: 188px;
    padding: 3px;
    border: 3px solid #000;
    z-index: 1;
}

هنگام بزرگ شدن ابعاد تصویر لازم است تصویر را قدری نسبت به مکان فعلی آن جابجا کنیم تا در جای مناسب تری قرار گیرد، به همین دلیل خصوصیت postion: relative را به کلاس hover اضافه کردیم. دو خصوصیت top و left را هم می توانید برای موقعیت دهی تصویر در مکان دلخواه مقدار دهی کنید. همچنین دو خاصیت width و height نیز برابر با اندازه اصلی عکس ها قرار گرفته اند.

توجه داشته باشید که خصوصیات بالا بر روی تگ li اعمال شده اند، یعنی زمانی که کلاس hover اتفاق میافتد، تغییر اندازه و جابجایی تنها بر روی حاشیه هر عکس که تگ li ما است، اعمال می شود و خود تصویر همچنان در اندازه اولیه باقی می ماند، بنابراین هنگامی که کلاس hover اتفاق میافتد، باید تگ img مربوط به آن هم برای افزایش ابعاد عکس تحت تاثیر قرار گیرد و ابعاد آن تغییر کند:

ul.gallery li:hover img
{
    width: 250px;
    height: 188px;
}

در حال حاضر اگر کار خود را در مروگر تست کنید، متوجه می شوید که بزرگ شدن ابعاد یک تصویر بر روی موقعیت سایر تصاویر نیز تاثیر گذاشته و باعث بهم خوردگی آن ها می شود(مطابق شکل زیر):

gallery02

علت این بهم خوردگی، متغیر بودن اندازۀ li ها است و برای حل این مشکل لازم است هر تگ li در چهارچوبی ثابت قرار گیرد تا تغییر ابعاد آن بر روی سایر تگ ها تاثیر نگذارد. به همین منظور در کد html بالا، هر تگ li ما بین یک div قرار داده شده است. با دادن طول و عرض ثابت به این div ها، می توان از بهم ریختگی تصاویر جلوگیری کرد:

#container div
{
    float: left;
    width: 118px;
    height: 93px;
}

اندازه عرض و ارتفاع div را به گونه ای تعیین کنید که کل تگ li را در بر گیرد.

حال زمانی که موس بر روی تگ li قرار می گیرد، به دلیل اینکه ابعاد div ثابت است، افزایش ابعاد آن تاثیری بر روی div و همچنین سایر عناصر ندارد. و در آخر مقدار z-index: 1 باعث می شود تا تگ li ی ما 1 لایه بالاتر از سایر تگ ها قرار گیرد. به همین دلیل است که هنگام اعمال کلاس hover، تصویر مورد نظر بر روی دیگر تصاویر قرار گرفته و به زیر نمی رود.

با اعمال این قسمت تقریبا گالری ما آماده شده و به شکل زیر خواهد بود:

gallery03

برای قسمت پایانی آموزش دو خاصیت جدید CSS 3 را برای آشنایی معرفی خواهم کرد. البته به دلیل اینکه در حال حاضر مرورگر ها به صورت کامل از CSS 3 پشتیبانی نمی کنند، این دو خاصیت تنها در برخی از آن ها پشتیبانی می شود.

این دو خصوصیت جدید که قصد معرفی آن را دارم box-shadow و transform هستند. خاصیت box-shadow همانطور که از اسمش مشخص است برای ایجاد سایه استفاده می شود. کاری که قبلا باید توسط تصاویر انجام میشد، الان به راحتی توسط این خاصیت امکان پذیر است. box-shadow، چهار پارامتر دریافت می کند که به صورت زیر است:

box-shadow: x-offset  y-offset  blur-radius  color

x-offset: این پارامتر میزان انحراف سایه را در راستای افقی بر اساس پیکسل مشخص می کند.

y-offset: این پارامتر میزان انحراف سایه را در راستای عمودی بر اساس پیکسل مشخص می کند.

blur-radius: این پارامتر میزان محو شدگی از لبه های سایه را تعیین می کند.

color: این گزینه هم برای تعیین رنگ سایه به کار می رود.

نمونه ای از ایجاد سایه توسط این خاصیت را در تصویر زیر مشاهده می کنید:

gallery04

قابل ذکر است خاصیت box-shadow در دو مرورگر +firefox 3.5 و +safari 3.1 به ترتیب با نام های  moz_box_shadow- و webkit-box-shadow- پشتیبانی می شود.

خصوصیت transform که دومین خاصیت مورد بحث ما است، برای ایجاد جابجایی، چرخش و تغییر فرم ظاهری المان بکار می رود. فرم کلی خاصیت transform به صورت زیر می باشد:

transform:  transform-function

این خاصیت بر اساس تابعی که به آن نسبت داده می شود، عملیات مورد نظر را انجام می دهد. چهار تابع rotate، translate، scale و skew وجود دارد که در این مقاله تنها از تابع rotate برای چرخاندن تصاویر استفاده می کنیم. در مورد عملکرد سایر توابع می توانید جستجو کنید.

با توجه به موارد گفته شده خصوصیات زیر را به استایل های تگ li اضافه کنید:

ul.gallery li
{
    ...
    box-shadow: 5px 5px 10px #333;
    -webkit-box-shadow: 5px 5px 10px #333;
    -moz-box-shadow: 5px 5px 10px #333;
}

در کد های بالا مقدار 5 پیکسل برای انحراف در راستای محور افقی و عمودی در نظر گرفته شده است، بنابراین انتظار می رود سایه در سمت راست و پایین تصاویر قرار گیرد، مقدار 10 پیکسل هم برای محو شدگی لبه های سایه اختصاص یافته است. پس از اعمال سایه تصاویر ما به شکل زیر خواهند شد:

gallery05

برای ایجاد چرخش در تصاویر، 4 کلاس جداگانه به صورت زیر تعریف کرده ام:

.r1
{
    transform: rotate(10deg);
    -webkit-transform: rotate(10deg);
    -moz-transform: rotate(10deg);
}
.r2
{
    transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
}
.r3
{
    transform: rotate(15deg);
    -webkit-transform: rotate(15deg);
    -moz-transform: rotate(15deg);
}
.r4
{
    transform: rotate(20deg);
    -webkit-transform: rotate(20deg);
    -moz-transform: rotate(20deg);
}

همانطور که مشاهده می کنید، تابع rotate در مقابل خاصیت transform قرار گرفته و مقدار چرخش بر اساس درجه (deg) به آن داده شده است. با اعمال این کلاس ها به تگ های li و به صورت رندوم می توانید تصاویر را در جهت های متفاوتی بچرخانید:

...
<div><li class="r1"><img src="images/05.jpg" alt="" /></li></div>
<div><li class="r2"><img src="images/06.jpg" alt="" /></li></div>
<div><li class="r4"><img src="images/07.jpg" alt="" /></li></div>
... 

در نهایت گالری شما همچین شکلی پیدا خواهد کرد:

gallery06

نکته:

مرورگر اینترنت اکسپلورر و Opera هیچ کدام از این دو خصوصیت را پشتیبانی نمی کنند، که البته مشکلی خاصی هم به وجود نمیاید و فقط تصاویر به صورت عادی کنار یکدیگر قرار می گیرند. اما در اینترنت اکسپلورر می توان از فی/لتر ها در مواقع ضروری استفاده کرد. به طور مثال برای اعمال سایه در ie از فی/لتر shadow استفاده می کنیم:

ul.gallery li
{
    ...
    filter:progid:DXImageTransform.Microsoft.Shadow(color=#333333,direction=135,strength=5);
}

پارامتر color کد رنگ سایه، direction جهت قرار گیری سایه و strength میزان گستردگی سایه را بر اساس پیکسل مشخص می کند. لازم به ذکر است که direction تنها مقادیر 0، 45، 90، 135، 180، 225، 270 و 315 را می توان دریافت کند.

متاسفانه فی/لتری معادل rotate که المان مورد نظر را مطابق زاویه دلخواه بچرخاند وجود ندارد. برای اطلاع بیشتر در مورد فی/لتر ها به اینجا مراجعه کنید.  

download دانلود: نمونه کد های گالری

تعداد آراء: 39 رای
یادداشت ها
MFiRE
1388/07/28 - 13:39:00
سلام لطفا لينكه وبلاگه من رو به ادرسه زير تغيير بديد فعلا در حال انتقال ارشيو به وبلاگه جديد هستم. http://mfire.wordpress.com ممنون
عماد:
سلام وبلاگ ها بر اساس رنکشون در گوگل درج میشن. آدرس جدید شما فعلا حتی رنک صفر رو هم نداره.
سيد زين الدين نجا
1388/08/05 - 15:42:00
دمتون گرم واقعا مفيد بود
زینب
1388/08/22 - 16:14:00
فوق العاده ,عالی ،بی نقص ....دست شما درد نکند خیلی کامل بود
atiye
1388/08/23 - 20:39:00
SALAM EMAD MAN BA VOJODE INKE IN FIL**TE**RI KE GOFTI RO ESTEFADE KARDAM AMA BAZ HAM TO IE MOSHKEL DARAM CHI KAR KONAM MERSI AGE KOMAKAM KONID BYE
عماد:
سلام همینی که من نوشتم رو اعمال کردید؟ با کدوم ورژن ie مشکل دارید؟ و مشکلتون چیه؟
bahman
1388/09/05 - 12:24:00
من سی اس اس تازه شروع کردم و من یه مشکلی دارم عکس بکگراند با اندازه پنجره تغییر نمی کنه و لینک هایی هم که ایجاد می کنم با عوض کردن اندازه پنجره جا به جا می شن چه کدی باید بدم یگ مشکل دیگه هم هست سایز دهی عکس ها توی ie یک جور نشون می ده fire fox یک جور دیگه چطور می شه درستش کرد ممنون
عماد:
سلام، در این آموزش که لینکی وجود نداره، سوالات در سایر زمینه ها رو توی انجمن های مربوطه بپرس تا بشه کد رو هم قرار بدی، به این شکل نمیشه درست جواب داد. در مورد سایز عکس ها هم خصوصیت width مربوط به تگ img رو برابر 100 پیکسل در نظر بگیر (همانند آموزش)
وحید
1388/09/28 - 15:45:00
ضمن عرض سلام و تشکر از زحمات شما میخواستم از شما خواهش کنم اگر امکان داره در مورد طراحی layout با div و کلا چگونگی طراحی layout بصورت fix&percent مقاله ای رو ارائه کنید با تشکر :25
عماد:
سلام، چشم، مدتی هست که قصد دارم مقاله ای رو در مورد ساخت قالب با فتوشاپ و تبدیل اون به html بنویسم، ایشاالله اگه وقت بشه این مورد شما رو هم لحاظ می کنم. موفق باشید :08
معين
1388/12/16 - 10:44:00
خيلي وب سايت جامع وكاملي داريد خسته نباشيد. :06
parisa
1389/01/10 - 17:53:00
سلام سال نو مبارك مطالب عالي بود ببخشيد خواستم ازتون اجازه بگيرم كه اگه اجازه دهيد ازمطالب تون براي وبلاگم استفاده كنم ميشه؟ :25
عماد:
سلام، سال نو شما هم مبارک مشکلی نیست اگه منبع اونو هم در انتهای مطلب ذکر کنید :08
mahboobe
1389/01/20 - 07:04:00
با سلام چرا fire fox بعضی از تگ های html رو ساپورت نمیکنه؟ اصلا چه تگ های توسط firefox پشتیبانی نمیشه ؟ ممنون میشم جواب بدین
عماد:

عماد:
سلام، کدوم تگ ها رو ساپورت نمی کنه؟
parastoo
1389/02/09 - 08:00:00
very gooooood برای من خیلی مفید بود. thanks
www.iranop.com
1389/06/04 - 14:35:00
آقا خیلی باحالید دمتون گرم خدای دمتون گرما من چند وقت دنبال این کدها بود واقعا زحمت کشیدن امیدوارم که این کدا کار کنن یا علی :33
داوود
1389/06/09 - 09:21:00
سلام عماد جان از گذاشتن آموزش به این قشنگی سپاسگزارم. فقط در مرورگر IE همانطور هم که خودت فرمودی عکسها کنار هم دیده میشن ولی با کلیک ماوس روی اونها تصاویر بزرگ نمیشن! چیکار باید کرد؟
عماد:
سلام با کلیک روی عکس ها قرار نیست بزرگ بشه اصلا. شما فقط وقتی موس روی یه عکس ببرید کمی سایزش بزرگ میشه، که توی ie هم این مورد مشکلی نداره. در ie تنها مشکل چرخشی هست که عکس ها دارن که نشون داده نمیشه.
امید
1389/06/12 - 11:34:00
با سلام من نمیتونم عکسها رو ردیف کنم ای کاش تمام کارها رو اخر یکی میکردی تا بدونم چی میشه اولی ها رو میزارم بعدیها رو کجای اونا قرار بدم
عماد:
سلام دوست عزیز نمونه سورس کد رو که گذاشتم، دانلود کن و مقایسه کن با کار خودت :08
امید
1389/06/12 - 11:37:00
این درسته خوب { margin: 100px auto; width: 610px; } ul.gallery { اینا رو کجاش بزارم ممنونم
عماد:
دقیقا متوجه منظورت نشدم، دو خصوصیت اول که نوشتی ما div بیریونی هست که کل عناصر رو در بر گرفته. gallery هم کلاسی هست که به تگ ul نسبت داده شده.
بهرام
1389/09/11 - 10:21:00
خیلی خوبه ولی چی همش دانلود میخاد گیگ ندار بابا :09 :15 :24 :21 :33
omid
1389/11/24 - 12:43:00
لطفا یکی کل کد بذار خیلی نیاز دارم :04 :04 :04 :04 :04 :04 :04 :04
omidalipour
1389/11/25 - 01:35:00
با سلام من نمیتونم جا گذاری کنم کاش تمام کارها رو اخر یکی میکردی تا بدونم چی میشه اولی ها رو میزارم بعدیها رو کجای اونا قرار بدم لطفا یکی سدسو بذار شدید نیاز دارم :16 :16 :16 :16 :16
عماد:
سلام عزیز دل آخرش که کل کد ها رو برای دانلود گذاشتم دیگه :06
omid
1389/11/25 - 11:17:00
ببخشید کسی نبود :09 :09 :09 :09 :09 :09 :09 :09 :09
omid
1389/11/25 - 14:38:00
سلام فایلو دانلود کردم ولی وقتی html باز می کنم یه صفحه باز می شه که گالری نشون میده ولی وقتی ctrl + u میزنم سورس پیجو کپی میکنم وارد وبلاگ میکنم به صورت چند تا : .. .. .. .. .. . . باز میکنه لطفا کد html را توی notepad در سایت قرار بده :06
عماد:
سلام، مشکل از چیزدیگه ای باید باشه، شما فایل hmtl رو با notepad باز کن، فرقی نداره که.
مجتبي
1390/03/24 - 03:05:00
:04 :09 :08 :07 :18 :22 :24
یادداشت خود را ثبت کنید



کد امنیتی:    =
loader
در حال ارسال - چند لحظه صبر کنید...