ဒီနေ့တော့ ကျွန်တော်တို့ CSS3 ကိုပဲ အသုံးပြုပြီး Lightbox effect တစ်ခုလောက် ရေးကြည့်ရအောင်။ js ကို အသုံးပြုပြီး အလွယ်တကူ Lightbox တစ်ခုလုပ်လို့ရပေမယ့် CSS3 ကတော့ jQuery ထက်ပိုလွယ်ပါတယ်။ အဓိက အရေးကြီးတာက စဉ်းစားပုံ စဉ်းစားနည်းပါပဲ။ အရင်ဆုံး Thumbnails ပုံလေးတစ်ခုရှိမယ်။ Click နှိပ်လိုက်ရင် သူနဲ့သက်ဆိုင်တဲ့ ပုံအကြီးကို ပြမယ်၊ ဒါပါပဲ။ CSS transition နဲ့ animation တွေကို အသုံးပြုပြီး ကျွန်တော်တို့ရဲ့ image ပုံအကြီးကို ဘယ်လိုပေါ်အောင် လုပ်ကြမလဲ!?

ကျွန်တော် demo မှာပါတဲ့ ပုံတွေကို jPopAsia က ကျွန်တော်သူ့ငယ်ချင်းတွေက ကူညီပေးထားပါတယ်။

ရေးနေကြအတိုင်း Basic HTML structure တစ်ခုကို အရင်ရေးပါမယ်။ Thumbnails တွေပါမယ်၊ ပုံအကြီးတွေပါမယ်။ ဒါပေမယ့် Thumbs တွေကို click နှိပ်မှ image အကြီးတွေက ပေါ်လာမယ်။ အဲ့ဒါတွေအတွက် div တွေ သတ်မှတ်ပေးရပါမယ်။

<ul class="album">
 <li>
 <a href="#img1">
 <img src="images/thumbs.jpg" />
 <span>ImageOne</span>
 </a>
 <div class="overlay" id="img1">
 <img src="images/full.jpg" alt="" />
 <div>
 <h3>Image Header One</h3>
 <p>Nothing, but just to add some text.</p>
 </div>
 <a href="#" class="close">x Close</a>
 </div> <!-- end of .overlay -->
 </li>
</ul>

လောလောဆည်တော့ ကျွန်တော် li တစ်ခုထဲအတွက် ရေးထားပေးပါတယ်။ အကယ်၍ ပုံများများနဲ့ ပြချင်တယ်ဆိုရင်တော့ ထပ်ပြီး li တွေထပ်တင်လိုက်ပါ။ အပေါ်က structure ကို လေ့လာကြည့်မယ်ဆိုရင် ကျွန်တော်တို့ thumbs.jpg ဆိုတဲ့ ပုံလေးကို နှိပ်လိုက်ရင် overlay နဲ့ full.jpg ကိုပြမှာပေါ့။ ရေးနေကြ ပုံစံအတိုင်း HTML ကတော့ ဒီလောက်ပါပဲ။ ကျန်တာကိုတော့ CSS နဲ့ ကွန့်ကြတာပေါ့။

အရင်ဆုံး thumbnail အတွက် CSS ရေးပါမယ်။

.album {
 width: 980px;
 margin: 0 auto;
}

.album li {
 position: relative;
 float: left;
 margin: 5px;
}

.album li > a, .album li > a img {
 display: block;
}

.album li > a {
 width: 200px;
 height: 200px;
 position: relative;
 padding: 10px;
 background: #e3e3e3;
 border-radius: 4px;
}

ပြီးတော့ အဲ့ဒီ thumbnails ရဲ့ title ကို ဖျောက်ထားပြီး အဲ့ဒီ ပုံပေါ် hover တင်လိုက်မှ transition effect နဲ့ ဖော်ပြပါမယ်။

.album li > a span {
 width: 200px;
 height: 200px;
 position: absolute;
 top: 10px;
 left: 10px;
 text-align: center;
 line-height: 1.8em;
 color: #333333;
 font-size: 24px;
 opacity: 0;
 background: #a5a5a5;
 transition: opacity 0.3s linear;
}

.album li > a:hover span {
 opacity: 1;
}

ဆက်ပြီးတော့ click နှိပ်လိုက်ရင်ပေါ်လာမယ့် overlay အတွက် css ရေးပါမယ်။

.overlay {
 width: 0px;
 height: 0px;
 position: fixed;
 text-align: center;
 overflow: hidden;
 left: 0px;
 top: 0px;
 padding: 0px;
 z-index: 99;
 background: #3e3e3e;
}

ပြီးရင်တော့ overlay နဲ့အတူတူပေါ်မယ့် စာတွေအတွက် CSS ပါ။

.overlay > div {
 color: #333333;
 width: 550px;
 height: 100px;
 margin: 40px; auto 0px auto;
 position: relative;
}

.overlay div h3 {
 width: 200px;
 height: 60px;
 padding: 0 20px;
 font-size: 34px;
 text-align: right;
}

.overlay div p {
 font-size: 14px;
 text-align: left;
 float: left;
 width: 260px;
}

ပြီးရင် Overlay ကိုပြန်ပိတ်ဖို့အတွက် Close စာလုံးလေးအတွက် CSS ပါရေးပေးပါမယ်။

.overlay a.close {
 background: #333;
 color: #fff;
 position: absolute;
 top: 43px;
 left: 50%;
 font-size: 14px;
 line-height: 1.5em;
 text-align: center;
 width: 50px;
 height: 23px;
 overflow: hidden;
 margin-left: -25px;
 opacity: 0;
}

နောက်ကျန်တာကတော့ overlay အပေါ်မှ ပေါ်လာမယ့် ကျွန်တော်တို့ thumbnails လေးရဲ့ full image ပါ။ အဲ့ဒီအတွက် CSS ရေးရပါမယ်။

.overlay img {
 max-height: 100%;
 position: absolute;
 opacity: 0;
 transition: opacity 0.5s linear;
}

အဓိက ကျွန်တော်တို့ overlay ဟာ :target လုပ်ခံရရင် ပေါ်လာပြီး သူ့အတွက် သတ်မှတ်ပေးထားတဲ့ width နဲ့ height အတွင်းမှာ သူ့ div ထဲမှာ ရှိတဲ့ title တွေ image တွေဖော်ပြပေးမှာပါ။

.overlay:target {
 width: auto;
 height: auto;
 bottom: 0px;
 right: 0px;
 padding: 80px 100px 120px 100px;
}

အဲ့ဒီလို target လုပ်ခံရတော့မှ ကျွန်တော်တို့ရဲ့ image နဲ့ close စတာတွေကို ပြန်လည်ဖော်ပြပေးပါမယ်။

.overlay:target img, .overlay:target a.close {
 opacity: 1;
}

အဲ့ဒါကတော့ style တွေအားလုံးပါပဲ။ ဒါပေမယ့် လိုနေတာ တစ်ခု animate ပြလုပ်ဖို့ပဲ ကျန်ပါတော့တယ်။ Tutorials လေးကို လက်စသတ်လိုက်ရအောင်!!

.overlay:target img {
 animation: fadeInScale 1.5s ease-in-out;
}
@keyframes fadeInScale {
 0% { transform scale(0.6); opacity: 0; }
 100% { transform: scale(1); opacity: 1; }
}

Animation ကို နောက်တစ်မျိုးလုပ်နိုင်ပါသေးတယ်။ မိမိနှစ်သက်ရာ တစ်နည်းနည်းကို အသုံးပြုနိုင်ပါတယ်။

.overlay:target img {
 animation: scaleDown 1.5s ease-in-out;
}
@-webkit-keyframes scaleDown {
 0% { transform scale(10,10); opacity: 0; }
 100% { transform: scale(1,1); opacity: 1; }
}

ပြီးရင်တော့ ကိုယ် ရေးထားတဲ့ html file ကို Browser ပေါ်မှ ဖွင့်ပြီး စမ်းကြည့်လို့ရပါပြီ။ အကြံပေးချင်တာက css တွေကို ရေးတဲ့အခါ ပြောင်းလဲသွားတာတွေကို ရေးပြီးတိုင်း browser မှာ reload လုပ်ပြီး ပြန်ကြည့်တာက ပိုပြီး မြင်စေပါတယ်။

ကျွန်တော် ရေးထားတဲ့ Demo file ကိုလိုချင်ရင်တော့ အောက်မှာ Download လုပ်ပြီး လေ့လာနိုင်ပါတယ်။

Download the Source File or View Demo

Credit: Mary Lou 

Leave a comment

Name (required) Email (required) Website Comment (required)

CAPTCHA Code *