picbox hiệu ứng xem ảnh thông minh

reset and begin

6/30/2011

Chức năng nổi bật của picbox là ngoài chức năng chính như lightbox ,picbox còn có tính năng tự động thay đổi kích thước và phóng to các hình ảnh lớn, hay được xem ở kích thước đầy đủ.

Hình ảnh sẽ tự động thay đổi kích thước để phù hợp với màn hình khi mở ra. Sau đó, ảnh có thể được thu nhỏ vào / ra bằng cách sử dụng bánh xe di chuyển( nút chuột thứ 3) và di chuyển xung quanh trên màn hình bằng cách sử dụng chuột.

picbox có 2 phiên bản cho mootools và jquery

picbox gồm 2 phần chính

add api jquey

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'></script>

1 file .js

<script src='http://webvn20.googlecode.com/files/picbox.js ' type='text/javascript'></script>

1 file css , google code không chứa file css nên copy tạm vào style vậy

#pbOverlay, #pbImage, #pbBottom, #pbCloseBtn {
 position: fixed;
 z-index: 9999;
}

#pbOverlay {
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
    background: #000;
 cursor: pointer;
}

#pbCloseBtn {
 top: 0;
 right: 0;
 display: block;
 width: 50px;
 height: 50px;
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizBF51E1tPuSuyKNBB_jfa_TG70vghQJHhseQhJCHIHpzFWs1L4Qge2rFW0WOM3DErD72usJ9kkSINR9jW4J0osbI9wIrfyRRevo98uNH5vATyv8OzfzTDoe0WUpfc3JQNFFe62Lydvecz/s1600/closebutton.png) no-repeat top left;
}

.pbLoading {
 background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqrxIv-a4hreRlDAkcB9orAFvWe5eimbANTAEGMOU5zhjXvQFRVrspujwHPMuNYW2wVQh2p_G-r-ZSQL9XpuddnXtGNjyo2YMUxuUB0uyUF4duGsnNPSo4tkvZbQ9WCnXQiGQ94bztDejb/s1600/loading.gif) no-repeat center !important;
}

#pbImage {
 border: none;
 background: #000 no-repeat;
 -moz-box-shadow: 0 0 40px #000;
 -webkit-box-shadow: 0 0 40px #000;
 box-shadow: 0 0 40px #000;
 cursor: move;
}

#pbBottom {
 font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
 font-size: 10px;
 text-align: center;
 color: #EEE;
 line-height: 1.4em;
 left: 50%;
 bottom: 10px;
 width: 400px;
 margin-left: -200px; /* half the width */ 
}

#pbCaption {
 font-weight: bold;
 padding: 4px;
 display: inline-block;
 *display: inline; /* IE 7 */
 background-color: rgba(0,0,0,0.7);
 filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#B0000000, EndColorStr=#B0000000);
 zoom: 1;
}

#pbNav {
 display: block;
 width: 200px;
 height: 65px;
 margin: auto;
 margin-top: 5px;
}

#pbPrevBtn, #pbNextBtn, #pbZoomBtn  {
 display: inline-block;
 width: 70px;
 height: 65px;
 outline: none;
 text-indent: -9000px;
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpSAAiGMai3-fopDvbtvPVAau8WVqLnqPb6i_0J995GuJQkAcHZ3Wlzq2WKvkqsXNDU7Rv-Up9Es4nspr6VLICuLWS6PXQ1NGUYRJD6WLf2n46m8W1bcIH1MiqMesJQoZFyUXr21wxXdqA/s1600/navbtns.png) no-repeat;
}

#pbPrevBtn {
 background-position: -70px 0;
 float: left;
}

#pbPrevBtn.pbgreyed {
 background-position: 0 0;
}

#pbNextBtn {
 background-position: -320px 0;
 float: right;
}

#pbNextBtn.pbgreyed {
 background-position: -390px;
}

#pbZoomBtn {
 width: 60px;
 background-position: -140px 0;
 float: left;
}

#pbZoomBtn.pbgreyed { 
 background-position: -200px 0;
}

#pbZoomBtn.pbzoomed {
 background-position: -260px 0;
}

trang chủ
http://bunnyfire.co.uk/projects/picbox/

áp dụng