뽀라닷컴
Loading...




웹디자인,포토샵,그누보드,제로보드,동영상제작 관련 메모 >>


전체(434)인터넷,컴퓨터 (93) | 웹디자인tip (180) | CG,그래픽tip (70) | BBS_Tip (74) | 영상tip (17) |
Lightbox & lytebox 2008-06-10 16:46:51
홈페이지홈페이지

lightbox Overview

Lightbox is a simple, unobtrusive script used to overlay images on the current page. It's a snap to setup and works on all modern browsers.

What's New in Version 2

  • Image Sets: group related images and navigate through them with ease
  • Visual Effects: fancy pants transitions
  • Backwards Compatibility: yes!
end .section
How to Use

Part 1 - Setup

  1. Lightbox 2 uses the Prototype Framework and Scriptaculous Effects Library. You will need to include these three Javascript files in your header (in this order).
    <script type="text/javascript" src="js/prototype.js"></script><script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script><script type="text/javascript" src="js/lightbox.js"></script>
  2. Include the Lightbox CSS file (or append your active stylesheet with the Lightbox styles).
    <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
  3. Check the CSS and make sure the referenced prev.gif and next.gif files are in the right location. Also, make sure the loading.gif and close.gif files as referenced near the top of the lightbox.js file are in the right location.

Part 2 - Activate

  1. Add a rel="lightbox" attribute to any link tag to activate the lightbox. For example:
    <a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
    Optional: Use the title attribute if you want to show a caption.
  2. If you have a set of related images that you would like to group, follow step one but additionally include a group name between square brackets in the rel attribute. For example:
    <a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a><a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a><a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>
    No limits to the number of image sets per page or how many images are allowed in each set. Go nuts!
end .section

Download

Changelog

  • v2.04 - 3/9/08
    • NEW - Upgraded Prototype from v1.4 to v1.6.0.2
    • NEW - Moved label text into configuration for easier localization
    • UPDATED - Code cleaned up. Respect for the global namespace and native javascript objects.
    • FIXED - Caption displays as "null" when viewing an uncaptioned image after viewing a captioned image.
    • FIXED - Clicking 'close' button shifts layout as link focus' dotted line appears.
  • v2.03.3 - 5/21/07 - Support for horizontally scrolling pages. Added updateImageList method for ajax'y pages.
  • v2.03.2 - 4/30/07 - Fixed animated gif support in IE/Opera.
  • v2.03.1 - 4/18/07 - Fixed embed hiding. Overlay opacity var added to config. Image sets w/Imagemaps fix. Clearfix removed.
  • v2.03 - 4/10/07 - Improved keyboard navigation. Animation off toggle. Hides Flash movies under overlay. Imagemap support. Valid CSS.
  • v2.02 - Fixed layout issues caused by multiline captions. Added keyboard navigation.
  • v2.01 - Centering in IE6 (any DOCTYPE) fixed. Smoothed out resize transition.
end .section

Support

It doesn't work at all. The image opens up in a new page. What's wrong?
This is commonly caused by a conflict between scripts. Check your body tag and look for an onload attribute. Example:
<body onload="MM_preloadImages(‘/images/menu_on.gif’)…;">
A quick fix to this problem is to append the initLightbox() to the onload attribute as so:
<body onload="MM_preloadImages(‘/images/menu_on.gif’)…;initLightbox()">
It doesn't work if I click an image link before the page has finished loading.
The script is activated only after the page has finished loading.
The shadow overlay doesn't stretch to cover full browser window.
Remove the default margin and padding from the body tag. Add body{ margin: 0; padding: 0; } to your stylesheet.
Can I insert links in the caption?
Yes, but you need to convert quotes and greater and less than symbols into their html entity equivalents. For example:
<a href="images/image-4.jpg" rel="lightbox" title="&lt;a href=&quot;link.html&quot;&gt;my link&lt;/a&gt;">Image</a>
Can I display flash, video, or other content using the script?
Sorry, photos only. For other content, google for Lightbox modifications or try an alternative script such as Cody Lindley's ThickBox.
Can the script be called from an iframe?
If you're using iframes, try the Lytebox modification which has better support.
Can I use the script in a commercial project?
Yes. It is licensed under the Creative Commons Attribution 2.5 License. A donation would be nice, hint hint.

Contact

For troubleshooting, feature requests, and general help, post a message in the Lightbox Forum. Make sure to include details on your browser, operating system, Lightbox version, and a link (or relevant code). I do not have time to personally respond to support emails, please use the forum.

To send me a non-support related note, email me. Thanks.

end .section

Donate

If you're feeling generous, consider a donation. Any and all PayPal donations are sincerely appreciated. Thanks.



lytebox Overview


Lytebox was written from the Lightbox class that Lokesh Dhakar (http://www.huddletogether.com) originally wrote. The purpose was to write a self-contained object that eliminated the dependency of prototype.js, effects.js, and scriptaculous.js. Since the original version of Lytebox (which released with iFrame support), major modifications have been made to improve performance as well as "Slideshow" support, "Themes" support, HTML content support (as opposed to just images) and many more configurable options that allow you to customize the look and feel of Lytebox. These modifications were added as a result of user input, so if you feel you have a good idea for a new feature, then visit the Lytebox Message Boards and let it be known!

For examples of the new and improved Lytebox in action, select an image from one of the following display types:

How To Use


Step 1: Download Lytebox v3.22

Step 2:  Add the following lines to the <head> of your document:

<script type="text/javascript" language="javascript" src="lytebox.js"></script><link rel="stylesheet" href="lytebox.css" type="text/css" media="screen" />

Step 3:  Add the appropriate rel attribute for the type of display you want. See the examples below.

    Single Image Example:

<a href="images/image-1.jpg" rel="lytebox" title="Image Description">Image #1</a>

    Grouped Images Example:

<a href="images/image-1.jpg" rel="lytebox[vacation]" title="Mom and Dad">Mom and Dad</a><a href="images/image-2.jpg" rel="lytebox[vacation]" title="My Sister">My Sister</a>

    Slideshow Example (note the use of lyteshow instead of lytebox):

<a href="images/image-1.jpg" rel="lyteshow[vacation]" title="Mom and Dad">Mom and Dad</a><a href="images/image-2.jpg" rel="lyteshow[vacation]" title="My Sister">My Sister</a>

    HTML Content Example (note the use of lyteframe instead of lytebox):

<a href="http://www.google.com" rel="lyteframe" title="Search Google"    rev="width: 400px; height: 300px; scrolling: no;">Google Search</a><a href="catalog1.htm" rel="lyteframe[catalog]" title="Summer Catalog">Summer Catalog</a><a href="catalog1.htm" rel="lyteframe[catalog]" title="Winter Catalog">Winter Catalog</a>

Note: When using the "Lyteframe" feature, the REV attribute is used to control the width, height, and scrolling of the window. If the REV attribute is omitted, then by default width/height is set to 400px and scrolling is set to auto.

  • Configuration: For a complete list of configurable Lytebox options, click HERE.
  • iFrames: If you plan to use Lytebox in an iFrame environment, then you need to include lytebox.css in the parent document, while including lytebox.js in the iFrame document.
  • Source Code: The JavaScript file (lytebox.js) that is included in the download has been stripped down (comments removed) for optimization purposes. The commented source code is available HERE.
  • Support: Having problems with Lytebox? Visit the Lytebox Message Boards and find your answer. Be sure to read the FAQ before posting, as it's likely that someone has already been there and done that.


Browser Compatibility


While browser compatibility was in mind from the start, not all browsers were available for testing. These browsers include Safari, Netscape, and Linux-only browsers such as Konquerer. The major browsers that were tested cover approximately 98% of browsers in use, so it's fairly safe to say that no major problems will arise.

There is a "special" issue that is related to IE only. Sometimes the right side of the page will have a small area that is not overlayed. This is due to the way IE measures it's margins. Adding the following style to the page will fix this issue (but it will also affect the appearance of the entire page): body { margin: 0 auto; }

The following browsers have been tested with this script:

  • IE 5.01 SP2 - The fade effect does not work, but the background is darkened (completely).
  • IE 5.5 SP2 - No known issues.
  • IE 6.0 SP2 - Themes don't work properly without modifying lytebox.css. Read HERE for more information.
  • IE 7.0 - No known issues.
  • Opera 9.23 - No known issues.
  • Firefox 1.5+ - No known issues, of course.




    



목록보기 삭제하기

번호 제목 일자
184  [CG,그래픽tip] 일러스트 한글폰트명 안뜰때  2008-12-25
183  [CG,그래픽tip] 포토샵 브러쉬  2008-12-25
182  [웹디자인tip] 자바소스  2008-12-25
181  [BBS_Tip] 게시물역순정렬  2007-12-06
180  [웹디자인tip] 일러스트 작업중 알수 없는 오류로 저장 불가능.  2008-12-23
179  [CG,그래픽tip] 일러스트 표그려보기  2008-12-17
178  [웹디자인tip] php 따옴표  2008-10-07
177  [웹디자인tip] form 태그의 이해. 입력폼 만들기  2008-10-02
176  [CG,그래픽tip] pdf 파일의 암호 깨는 프로그램  2008-10-01
175  [웹디자인tip] 인클루드 하는 플래시의 서브 페이지 인식  2008-09-25
174  [인터넷,컴퓨터] sata 하드 장착  2008-09-06
173  [웹디자인tip] ssh 명령어  2008-08-28
 [웹디자인tip] Lightbox & lytebox  2008-06-10
171  [웹디자인tip] 새창 원하는 위치에 띄우기.  2008-06-09
170  [BBS_Tip] 이미지태그 이미지삽입시 리사이즈 & 새창보기  2008-06-07
169  [인터넷,컴퓨터] 한글이 안 써질때,  2008-06-07
168  [인터넷,컴퓨터] 프리 아이콘 사이트.  2008-06-07
167  [BBS_Tip] 관리자아이디 변경팁  2008-06-06
166  [BBS_Tip] 사용권한 메세지 수정 방법.  2008-06-06
165  [웹디자인tip] 이미지 border (테두리라인)  2008-06-06
164  [인터넷,컴퓨터] 트래픽이란?  2008-06-03
163  [웹디자인tip] 웹페이지 경로의 이해.  2008-06-03
162  [인터넷,컴퓨터] 15개국 문장 번역  2008-06-03
161  [인터넷,컴퓨터] "WS_FTP.LOG" 로그파일 없애기  2008-06-02
160  [인터넷,컴퓨터] 맞춤법 검사기  2008-05-31
목록보기
1112131415161718