บ้านนายลิงแว่น
มันก็มีหลากหลายครับมี 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 สวยมาก ยังไงลองเข้าไปติดตามดูนะครับ....(มาเร็วไปเร็ว แคว๊ปปปป)
Tags: css3, image, jquery, lightbox9 Comments