Web/WEB기본

LightWindow 라이트박스의 업그레이드

saltdoll 2008. 6. 10. 08:46
반응형
LightWindow 라이트박스을 모태로 업그레이드 된 스크립트네요.
라이트박스 계열의 약점인 iframe에서 안되는 부분도 잘 보강된것 같네요.

라이트 윈도우
--> http://stickmanlabs.com/lightwindow/#why

[ HTML정의 내용 ]
주의: iframe안의 링크를 parent에 입히기 DOCTYPE를 XHTML로 주어야 합니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

자바스크립트 file ]
<script type="text/javascript" src="javascript/prototype.js"></script>
<script type="text/javascript" src="javascript/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="javascript/lightwindow.js"></script>
<link rel="stylesheet" href="css/lightwindow.css" type="text/css" media="
screen" />

[ iframe Call  ]
<a href="http://www.stickmanlabs.com" class="lightwindow_iframe_link" ><strong>Open a LightWindow from an iframe!</strong></a>
<script type="text/javascript">
    var links = $$('.lightwindow_iframe_link');
    links.each(function(link) {
        Event.observe(link, 'click', function() {parent.myLightWindow.activate(null, link);}, false);
        link.onclick = function() {return false;};
    });        
</script>


라이트박스관련 내용
--> http://source.tistory.com/tag/lightbox
반응형
도움이 되셨다면 하트모양의 "♡ 공감"을 눌러주시면 큰 격려가 됩니다.
(로그인하지 않으셔도 가능)