Jump to content

  • Log in with Facebook Log in with Twitter Log in with Windows Live Log In with Google      Sign In   
  • Create Account
  • facebook
  • googleplus
  • twitter

Photo
- - - - -

jQuery Lightbox - Hiệu ứng phóng to ảnh trên web.


  • Please log in to reply
10 replies to this topic

#1 ToanNguyen

ToanNguyen

    Chém Gió

  • History
  • 771 posts

Posted 11 June 2008 - 08:42 AM

Đây là một plugin của jQuery, tạo hiệu ứng xem ảnh phóng to khi click vào thumnail của ảnh trên web.
Hiệu ứng đẹp, giúp cho trang web của bạn trở nên thú vị hơn.

Posted Image


Cách sử dụng rất đơn giản:
1. Nhúng jQuery và Lightbox script vào trang web của bạn:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="lightbox.js"></script>
Vì lightbox là một plugin của jQuery, nên bạn phải có jQuery mới dùng được lightbox.

2. Nhúng css của lightbox vào trang web (bạn có thể custom lại css này theo ý mình cho đẹp hơn)
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

3. Kiểm tra đường dẫn các hình ảnh trong file css xem có chính xác chưa: prevlabel.gif, loading.gif, closelabel.gif...

4. Thêm thuộc tính class="lightbox" vào bất kì thẻ link nào đề kích hoạt lightbox.
<a href="images/image-1.jpg" class="lightbox" title="my caption">image #1</a>

5. Nếu bạn có một tập những hình ảnh có liên quan với nhau, và bạn muốn chúng thành một group, thì bạn cũng làm như bước 4, rồi thêm thẻ rel với giá trị là tên của group, group không giới hạn số lượng ảnh, ví dụ:
<a href="images/image-1.jpg" class="lightbox" rel="roadtrip">image #1</a>
<a href="images/image-2.jpg" class="lightbox" rel="roadtrip">image #2</a>
<a href="images/image-3.jpg" class="lightbox" rel="roadtrip">image #3</a>


Download:
jQuery 1.2.6: Attached File  jquery_1.2.6.pack.js   30.31K   234 downloads
jQuery Lightbox 0.5: Attached File  jquery_lightbox_0.5.zip   326.68K   893 downloads

#2 nqthang

nqthang

    Junior Member

  • Member
  • Pip
  • 5 posts

Posted 04 January 2009 - 07:55 AM

cho em hỏi cái ảnh lúc chưa click vào có viền màu xanh, có cách nào đổi màu viền đó ko anh?
nếu được anh hồi âm sớm lại giúp e nhé:)
Thank alot!

#3 ToanNguyen

ToanNguyen

    Chém Gió

  • History
  • 771 posts

Posted 04 January 2009 - 04:08 PM

Cái đó là do CSS thôi, bạn sửa class có tê lightbox trong file CSS lại.
Chỉnh border = none là được.

#4 nqthang

nqthang

    Junior Member

  • Member
  • Pip
  • 5 posts

Posted 04 January 2009 - 10:42 PM

hix e có để rồi nhưng ko được, hix hix:(

#5 ToanNguyen

ToanNguyen

    Chém Gió

  • History
  • 771 posts

Posted 05 January 2009 - 08:28 AM

Àh, cái đó là cái border của cái hình, chứ không phải của thẻ a,
Em thêm đoạn sau vào file CSS:
.lightbox img {
	border: none;
}


#6 nqthang

nqthang

    Junior Member

  • Member
  • Pip
  • 5 posts

Posted 10 January 2009 - 05:42 AM

Àh, cái đó là cái border của cái hình, chứ không phải của thẻ a,
Em thêm đoạn sau vào file CSS:

.lightbox img {
	border: none;
}

Ok thank anh nhiu:)

#7 †Rek_Knight†

†Rek_Knight†

    Advanced Member

  • History
  • 209 posts

Posted 10 January 2009 - 10:12 AM

[-O< a tòn giúp em ;)) làm rồi sao nó ko work kà:D có khi nào nó có xung đột với mod show ảnh trong forum chăng anh?

#8 ToanNguyen

ToanNguyen

    Chém Gió

  • History
  • 771 posts

Posted 10 January 2009 - 12:49 PM

Có thể bị đụng lắm, mà mod show ảnh của em dùng là gì? Cho anh cái link xem mới biết được [-O<

#9 NgocLan1985

NgocLan1985

    Junior Member

  • Member
  • Pip
  • 2 posts

Posted 17 January 2009 - 03:06 PM

Giúp Lan với, hiệu ứng phóng to ảnh hoạt động tốt nhưng các hình Close, Loading... ko hiển thị. Lan đã vào Css để điều chỉnh link (như bước 3, anh đã hướng dẫn), nhưng tìm mỏi mắt vẫn hok thấy chỗ nào. Chỉ có link của các nút Prev, Next and Blank. Giúp Lan với [-O<

#lightbox{
position: absolute;
left: 0;
width: 100%;
z-index: 100;
text-align: center;
line-height: 0;
}

#lightbox a img{ border: none; }

#outerImageContainer{
position: relative;
background-color: #fff;
width: 250px;
height: 250px;
margin: 0 auto;
}

#imageContainer{
padding: 10px;
}

#loading{
position: absolute;
top: 40%;
left: 0%;
height: 25%;
width: 100%;
text-align: center;
line-height: 0;
}
#hoverNav{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
}
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{
width: 49%;
height: 100%;
background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */
display: block;
}
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prev.gif) left 50% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/next.gif) right 50% no-repeat; }

/*** START : next / previous text links ***/
#nextLinkText, #prevLinkText{
color: #FF9834;
font-weight:bold;
text-decoration: none;
}
#nextLinkText{
padding-left: 20px;
}
#prevLinkText{
padding-right: 20px;
}
/*** END : next / previous text links ***/
/*** START : added padding when navbar is on top ***/

.ontop #imageData {
padding-top: 5px;
}

/*** END : added padding when navbar is on top ***/

#imageDataContainer{
font: 10px Verdana, Helvetica, sans-serif;
background-color: #fff;
margin: 0 auto;
line-height: 1.4em;
}

#imageData{
padding:0 10px;
}
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; }
#imageData #helpDisplay {clear: left; float: left; display: block; }

#overlay{
position: absolute;
top: 0;
left: 0;
z-index: 90;
width: 100%;
height: 500px;
background-color: #000;
filter:alpha(opacity=60);
-moz-opacity: 0.6;
opacity: 0.6;
display: none;
}


.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

* html>body .clearfix {
display: inline-block;
width: 100%;
}

* html .clearfix {
/* Hides from IE-mac \*/
height: 1%;
/* End hide from IE-mac */
}

#10 phamhuy

phamhuy

    Junior Member

  • Member
  • Pip
  • 1 posts

Posted 24 February 2009 - 11:00 AM

chào Lan ! Nguyên nhân là do nó ko tìm thấy ảnh.Lan làm như sau:
Nhấp chuột phải vào button không hiển thị ảnh đó-> properties để nhìn thấy link. Linh nó đến thư mục nào thì đặt cái ảnh đó ở vị trí đấy để cho nó tìm thấy.

#11 ToanNguyen

ToanNguyen

    Chém Gió

  • History
  • 771 posts

Posted 24 February 2009 - 02:05 PM

...... các hình Close, Loading... ko hiển thị.........


Không biết bạn sửa được chưa?
Ví 2 hình này không có trong CSS, mà nó định nghĩa trong file jquery.lightbox.js đó.
Bạn mở file này ra, tìm đến dòng 414 (hoặc search từ "closelabel") rồi bạn chỉnh lại đường dẫn của bạn vào cho đúng là được.





Similar Topics Collapse

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users