امین بهشتی

Design Tutorials

طراحی وِب و گرافیک

گالری عکس CSS3 با اِفِکت Lightbox

در این آموزش ما تنها با کُدهای CSS3 یک گالری عکس ساده با اِفِکت Lightbox خواهیم ساخت. ایدۀ ما این است که یک سری تصاویر بندانگشتی در گالری داشته باشیم که قابل کلیک کردن باشند و زمانی که روی آنها کلیک می‌کنیم، عکس مربوطه در اندازۀ بزرگ‌تری در استایل Lightbox نمایش یابد. این نمایش به‌صورت یک پنجرۀ pop-in با یک لایۀ semi-transparent می‌باشد که بقیه صفحه را می‌پوشاند و با کلیک کردن بر روی لایه، از وضعیت نمایش تصویر درمی‌آید و به صفحۀ قبلی (گالری) بازمی‌گردد.

روش‌های زیادی برای Lightbox با استفاده از جاوا اسکریپت وجود دارند، اما ما در این آموزش قصد داریم این Lightbox را بدون هیچ‌گونه کُد جاوا اسکریپتی بسازیم. با این حال این نکته را در نظر داشته باشید که Lightboxهایی که بر پایۀ جاوا اسکریپت ساخته می‌شوند کارآیی بیشتری دارند و با مرورگرهای بیشتری سازگار هستند. هدف ما از این آموزش آشنایی با برخی ویژگی‌های CSS3 می‌باشد، و ببینیم چه نتایجی را می‌توانیم از آنها بدست آوریم.

رمز عبور برای باز کردن فایل : www.dtuts.net

گام 1 : ساختار گالری

نخست یک ساختار پایه برای تصاویر بندانگشتی گالری با یک container در مرکز صفحه می‌سازیم. تصاویر بندانگشتی و عنوان‌هایشان را داخل لینک قرار می‌دهیم تا کل قسمت‌های تصاویر بندانگشتی و عنوان قابل کلیک کردن باشند.

<div id="gallery">
<ul>
    <!-- Thumb 1 -->
    <li>
        <a href="#img1" class="thumb1">
            <img src="images/thumb1.jpg"  />
            <span>کاخ موزه شهرداری تبریز، یادگار معماری آلمان‌ها</span>
        </a>
    </li>
 
    <!-- Thumb 2 -->
    <li>
        <a href="#img2" class="thumb2">
            <img src="images/thumb2.jpg" />
            <span>مسجد کبود و بوستان خاقانی در مرکزشهر تبریز</span>
        </a>
    </li>
 
    <!-- more thumbs -->
<ul>
</div>

گام 2 : CSS برای گالری

در ابتدای کُدهای CSS برخی استایل‌های عمومی را اضافه می‌کنیم، مانند font، width، list style و … :

استایل‌های عمومی صفحه :

body {
    line-height: 1;
    background-color: #F8F8F8;
    color: #444444;
    font-family: 'Bree Serif', serif;
    font-size: 13px;
}
 
ol, ul {
    list-style: none;
}
 
#content{
    margin:0 auto;
    width:900px;
}

همان‌طور که در کُدهای بالا مشاهده می‌کنید، در اینجا از فونت Bree Serif که از فونت‌های وِبِ گوگل می‌باشد استفاده شده است. شما می‌توانید از هر فونتی که دوست دارید استفاده کنید اما اگر می‌خواهید از همین فونت استفاده کنید، یادتان باشد که لینک فونت را نیز وارد نمایید.

استایل گالری عکس :

کمی margin و padding برای گالری و unordered listها اضافه می‌کنیم:

#gallery {
    margin:20px 0;
}
 
#gallery  ul{
    overflow:visible;
    padding:20px;
}
 
#gallery  ul li{
    display:inline-block;
}

از آنجایی که ما تصاویر و عنوان‌هایشان را داخل یک hyperlink قرار داده‌ایم، پس بگذارید برای این لینک‌ها نیز استایلی بدهیم :

#gallery a{
	display: inline-block;
	color: #444444;
	padding: 10px;
	width:240px;
	background-color: white;	
	margin-right:-80px;
	z-index:1;	
	border: 5px solid rgba(0,0,0,0.1);
		
	-webkit-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);  /* Saf3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
     -moz-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);    /* FF3.5 - 3.6 */
          box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);    /* Opera 10.5, IE9, FF4+, Chrome 6+, iOS 5 */
				  
	-webkit-transition: all 0.3s ease-out;  /* Saf3.2+, Chrome */
     -moz-transition: all 0.3s ease-out;    /* FF4+ */
      -ms-transition: all 0.3s ease-out;    /* IE10? */
       -o-transition: all 0.3s ease-out;    /* Opera 10.5+ */
          transition: all 0.3s ease-out;
}

/* On hover, change the border color and make it fully visible */
#gallery a:hover{
	border: 5px solid rgba(39,25,0,1); 
	border: 5px solid rgba(0,0,0,0.5);
	z-index: 3;
}

/* Set the margin for the caption text. */
#gallery  span{
	display:inline-block; 
	margin-top:5px;
	font-size: 12px;
	font-family: Tahoma, Arial;
	text-align: right;
	direction: rtl;
}

توجه داشته باشید که مقدار z-index را برای تصاویر بندانگشتی گالری به 1 تنظیم کرده‌ایم و برای وضعیت hover شدن مقدار بیشتری برای z-index تنظیم کرده‌ایم، که به این معنی است که هنگام hover شدن تصویر بندانگشتی مربوطه بر روی تصاویر دیگر نمایان شود.

ما می‌توانیم به‌صورت تصادفی برخی تصاویر را چرخانده و مقدار z-index آنها را تغییر دهیم تا تصاویر رو یا زیر یکدیگر قرار گیرند. به‌عنوان مثال :

#gallery .thumb1{
-webkit-transform: rotate(-5deg);    /* Saf3.1+, Chrome */
     -moz-transform: rotate(-5deg);  /* FF3.5+ */
      -ms-transform: rotate(-5deg);  /* IE9 */
       -o-transform: rotate(-5deg);  /* Opera 10.5 */
          transform: rotate(-5deg);
}
 
#gallery  .thumb2{
    -webkit-transform: rotate(9deg);
     -moz-transform: rotate(9deg);
      -ms-transform: rotate(9deg);
       -o-transform: rotate(9deg);
          transform: rotate(9deg);
}
 
#gallery .thumb3{
    -webkit-transform: rotate(-12deg);
     -moz-transform: rotate(-12deg);
      -ms-transform: rotate(-12deg);
       -o-transform: rotate(-12deg);
          transform: rotate(-12deg);
    z-index:0;
}

گام 3 : ساختار تصاویر Lightbox

زمانی که بر روی یک تصویر بندانگشتی کلیک می‌کنیم، باید به اندارۀ بزرگ‌تر تصویر مربوطه اشاره کند. پس باید یک ساختار HTML برای تصاویر بزرگ‌تر اضافه کنیم. می‌توانیم این کُدها را بیرون از div گالری در فایل HTMLمان قرار دهیم. هر div بایستی همان id که برای تصویر بندانگشتی مربوطه تنظیم شده است را داشته باشد.

<!-- Lightbox images -->
<!-- image 1 -->
<div class="lightbox" id="img1">
    <div class="lightbox-content">
        <img src="images/img1.jpg" />
        <span>کاخ موزه شهرداری تبریز، یادگار معماری آلمان‌ها</span>
    </div>
    <a href="#close" class="close" title="Close"></a>
</div>
 
<!-- image 2 -->
<div class="lightbox" id="img2">
    <div class="lightbox-content">
        <img src="images/img2.jpg" />
        <span>مسجد کبود و بوستان خاقانی در مرکزشهر تبریز.</span>
    </div>
    <a href="#close" class="close" title="Close"></a>
</div>
 
<!-- image 3 -->
<div class="lightbox" id="img3">
    <div class="lightbox-content">
        <img src="images/img3.jpg" />
        <span>مقبرهالشعرای تبریز؛ آرامگاه بیش از ۴۰۰ شاعر، عارف و نام‌آور ایرانی.</span>
    </div>
    <a href="#close" class="close" title="Close"></a>
</div>
 
<!-- rest of the images -->

CSS برای Lightbox :

Lightbox به روشی ساده با استفاده از کلاس CSS pseudo :target کار می‌کند. target: با یک اِلمِنتی مطابقت پیدا می‌کند که نشانۀ یک identifier (#) در مستند URI می‌باشد و امکان بکار بردن استایل‌های خاصی را به آن می‌دهد.

بنابراین هنگام کلیک بر روی هر یک از تصاویر بندانگشتی، که به‌عنوان مثال anchor لینکی برای img1 # دارد، target: به دنبال هر اِلمِنتی خواهد گشت که آی‌دی img1 # را دارد و استایل مربوطه را، که تغییر دادن موقعیت آن در جهت نمایان شدنش است، به آن خواهد داد.

پس بگذارید CSS مربوط به lightbox container را اضافه کنیم :

.lightbox {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0px;
    left: -100%;
}

ما موقعیت absolute را تنظیم کرده‌ایم که با top 0 شروع می‌شود. با موقعیت left -100% مطمئن می‌شویم قبل از کلیک کردن برو روی هر یک از تصاویر بندانگشتی، نمایان نمی‌شود.

حال زمانی که بر روی یک تصویر بندانگشتی کلیک می‌کنیم، می‌خواهیم موقعیت آن را در چپ از %100- به 0 تغییر دهیم، تا نمایان شود.

.lightbox:target {
    left: 0px;
    z-index: 8;
}

مقدار بالای z-index برای target، Lightbox را بر روی محتویات دیگر صفحه قرار خواهد داد.

اکنون باید موقعیت محتویات Lightbox را در مرکز صفحه تنظیم کنیم.

.lightbox:target div {
    background: #ffffff;
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 9;
}
 
.lightbox-content {
    height: 427px;
    width: 640px;
    margin-top: -214px;
    margin-left: -320px;
    padding:10px 10px 30px 10px ;
}

لطفاً توجه داشته باشید که در این آموزش محتویات div یک سایز ثابتی دارند. اگر محتویات divهای شما اندازه‌های متفاوتی دارند، بایستی برای هر کدام سایزهای خاص آنها را تنظیم کنید. margin برای چپ و بالا باید نصف اندازۀ پهنا و ارتفاع تصویر مربوطه را داشته باشد.

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

برای این کار ارتفاع و پهنای آن را به %100 تنظیم می‌کنیم :

.close{
    position: absolute;
    height: 100%;
    width: 100%;
    background: #000000;
    opacity: 0.8;
}

تمام!

این گالری با آخرین نسخه‌های مرورگرهای Firefox, Chrome, Safari, Opera و Internet Explorer 9 سازگاری دارد.

منبع: gazpo.com

درباره امین بهشتی

یک ایرانی ترک زبان که علاقه زیادی به طرّاحی وِب و گرافیک دارد!
در این سایت سعی می‌کنم مطالب جالب، مفید و کاربردی را در جهت آموزش به اشتراک بگذارم!
امیدوارم لحظات خوشی را در سایت سپری نمایید و مطالب سایت مورد استفاده شما قرار بگیرد.
سپاس

درصورت تمایل برای ارسال دیدگاه‌تان از فرم زیر می‌توانید استفاده کنید ↓

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

(الزامی*)

می‌توانید از نشان و برچسب‌های HTML زیر در متن دیدگاه‌تان استفاده کنید:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>
(الزامی*)
(اختیاری)

لطفاً جای‌خالی در معادله زیر را پر کنید: * Time limit is exhausted. Please reload the CAPTCHA.