CSS3

Speech

สวัสดีวันที่ 18 กุมภาพันธ์ 2555
จากคำถามของคุณ : The dark side

มันก็มีหลากหลายครับมี lightbox imagezoom เยอะแยะมากมายเลยขอยกมาสัก 3 อย่างนะครับแบบ css ธรรมดาและแบบ jQuery เอาแบบง่ายๆก่อนเลยละกันครับ


Css Hover image :เอาเมาว์ไปวางที่ข้อความหรือลิงค์ภาพก็จะขยายออกตามที่เรากำหนด ในตัวอย่างนี้ผมจะกำหนด hover โดยใช้ css3 tranform scale (อาจกำหนด กว้าง สูง ก็ได้นะครับ) <style> .gall{ width:600px; list-style:none; color:#fff; z-index:2; position:relative; } .gall>ul>li{ list-style:none; position:relative; display:inline-block; margin:5px 3px 5px 10px; top:0; -moz-transition:top .3s; -webkit-transition:top .3s; } .gall li>img{ padding:1px 1px 1px 1px!important; width:80px !important; height:60px !important; border:2px solid #fff; border-radius:3px; box-shadow:0 0 5px #333; -moz-transition:-moz-transform .2s,border .2s, box-shadow .2s; position:relative; } .gall li>img:hover{ -moz-transform: scale(5); border-radius:2px; background:none; z-index:2; border:0px solid #fff; box-shadow:0 0 2px #999; } </style> <!--Html ด้านล่าง--> <div class="gall"> <ul> <li><img src="#"></li> <li><img src="#" ></li> <li><img src="#"></li> <li><img src="#"></li> <li><img src="#"></li> </ul> </div> ปล. ตรง padding รู้สึกมันเหลื่มๆ ด้านขวานะครับ


Target pseudo-class :ตัวนี้ยังคงเป็น css อยู่นะครับซึ่งจะใช้คล้ายๆแบบเดียวกับ entry
[CSS]ทำเบ็ลคกราวแกลลอรี่นะครับ หลักการก็คลิ๊กที่ภาพเล็กให้ภาพใหญ่ขยายออกครับ


.imagecall{ display:inline; } .imagecall img { width:90px !important; height:80px !important;; padding:5px; background:#ccc; border:solid 1px #fff; box-shadow:0 0 5px #333; margin:0 0 0 10px; } /*clear*/ a.imagecall { list-style:none; padding:0 !important; background:none !imporatnt; width:0 !important; height:0 !important; } .image { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 9; display:none; background: rgba(0,0,0,0.5); opacity:0; -moz-transition:opacity 1s; -webkit-transition:opacity 1s; } .image a { display: table-cell; vertical-align: middle; text-align: center; } .image img { padding:5px; background:#ccc; border:solid 1px #fff; box-shadow:0 0 15px #333; } .image:target { opacity:1; display:table; width:100%; height:100% } </style> <!--Html ด้านล้าง--> <a class="imagecall" href="#img1"><img src="ภาพ thumbnail" /></a> <a class="imagecall" href="#img2"><img src="ภาพ thumbnail" /></a> <a class="imagecall" href="#img3"><img src="ภาพ thumbnail" /></a> <a class="imagecall" href="#img4"><img src="ภาพ thumbnail" /></a> <a class="imagecall" href="#img5"><img src="ภาพ thumbnail" /></a> <div class="image" id="img1"> <a href="#close"><img src="ภาพใหญ่" alt="" /></a> </div> <div class="image" id="img2"> <a href="#close"><img src="ภาพใหญ่" alt="" /></a> </div> <div class="image" id="img3"> <a href="#close"><img src="ภาพใหญ่" alt="" /></a> </div> <div class="image" id="img4"> <a href="#close"><img src="ภาพใหญ่" alt="" /></a> </div> <div class="image" id="img5"> <a href="#close"><img src="ภาพใหญ่" alt="" /></a> </div> </div> ปล. ไม่เหมาะกับใช้ภาพครับเพราะมันจะเด้งไปกำหนดค่าเดิมที่ตั้งไว้คือ อยู่ค่า top ที่เราตั้งไว้ เหมาะกับเป็น nav. page มากว่าครับ


JQUERY LIGHTBOX : ตัวนี้เป็น JQUERY ครับตัวนี้ค่อนข้างจะแน่นอนแถมลูกเล่นเหลือหลายมีมากครับวันนี้ผมขอแนะนำ ENVATO (codecanyon) JQUERY LIGHTBOX EVOLUTIONเป็น plugin light box ที่สามารถปรับแต่งได้หลากหลายอีกตัวหนึ่งครับ ขอหอบเอาของเค้ามาเลยนะครับยกตัวอย่างภาพแบบเดี่ยวและเป็นชุดครับ
ภาพแบบเดี่ยว ต้องใส่ class="lightbox"

ภาพแบบชุด จะมี เลื่อนดูก่อนหน้าย้อยหลัง เพียงแค่ใส่ rel="group1" rel="group2" จะเอาให้อยู่ชุดไหนก็ใส่เลขเอาครับง่าย
<!--ใส่ไว้บนหัว--> <script type="text/javascript" src="http://1.s3.envato.com/files/9685813/js/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="http://1.s3.envato.com/files/9685813/js/lightbox/themes/default/jquery.lightbox.css" /> <script type="text/javascript" src="http://1.s3.envato.com/files/9685813/js/lightbox/jquery.lightbox.min.js"></script> <script type="text/javascript"> jQuery(document).ready(function($){ $('.lightbox').lightbox(); }); <!--HTML ด้านล้าง--> single <a href="ภาพใหญ่" class="lightbox"><img src="ภาพ thumbnail" /></a> <a href="ภาพใหญ่" class="lightbox"><img src="ภาพ thumbnail" /></a> <a href="ภาพใหญ่" class="lightbox"><img src="ภาพ thumbnail" /></a> group <a href="ภาพใหญ่" class="lightbox" rel="group1"><img src="ภาพ thumbnail" alt=""/></a> <a href="ภาพใหญ่" class="lightbox" rel="group1"><img src="ภาพ thumbnail" alt=""/></a> <a href="ภาพใหญ่" class="lightbox" rel="group1"><img src="ภาพ thumbnail" alt=""/></a> ปล. ตัวนี้สามารถเข้าไปอ่านการกำหนด funtion เพิ่มเติมได้ที่ codecanyon .


ท้ายนี้ : ท่านสามารถเลือกใช้ lightbox มากมายได้ที่ The Lightbox Clones Matrix ..
css3 lightbox ยังไม่หวือหวาเท่าที่ควรสังเกตุได้จาก tagget มันมักจะเลื่อนให้อยู่ตรงตามตำแห่งที่เรากำหนดไว้เริ่มแรก tympanus.net/codrops เป็นเว็บที่ทำ demo css3 lighbox สวยมาก ยังไงลองเข้าไปติดตามดูนะครับ....(มาเร็วไปเร็ว แคว๊ปปปป)