고집불통 때쟁이's Thoth » jQuery prettyPhoto

jQuery prettyPhoto 개발이야기

2010.07.06 22:56 고집불통 때쟁이 Edit

http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

이미지 리스트업 시 썸네일 이미지를 바로 확대 시켜서 보여줄 때 유용한 jQuery용 라이브러리입니다.
다양한 image viewer(slideshow gallery) plugin 들이 존재하는데 prettyPhoto 사용하기 쉽고 해서 좋습니다.

Javascript coding 예제

<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" />
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
    $(".gallery a[rel^='prettyPhoto']").prettyPhoto({theme:'facebook'});
});
</script>

Php내에서 html code로 image 표시

                             if($rs){
                                while(!$rs->EOF){
                                    $img_src = "";
                                    $img_content = "";
                                    if($rs->fields["attach_file_subpath"] == null){
                                        $img_content = "";
                                    } else {
                                        $img_src = "http://127.0.0.1/mmsmo/".$rs->fields["attach_file_subpath"].$rs->fields["attach_file_name"];
                                        $img_content = "<ul class=\"gallery clearfix\"><li><a href=\".$img_src."\" rel=\"prettyPhoto\" title=\"&lt;a href=&#x27;http://www.google.ca&#x27; target=&#x27;_blank&#x27; &gt;&lt;/a&gt;\"><img src=\".$img_src."\" width=56 height=56></a></li></ul>";
                                        
                                    }
                                ?>
                                
                                    <tr height=56>
                                        <td align="center"><?=$img_content?></td>
                                    </tr>
                                    <? 
                                    $rs->MoveNext();
                                }
                            }?>