.Net Project/Jquery 1.3.2

81장 JQueryPlugIn 사진 상세 보기 (RedPlusPhotoView.htm)

Magic_kit 2009. 11. 25. 11:29
반응형
 RedPlusPhotoView.htm
 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>사진 상세 보기 프로그인 제작 </title>

    <link href="jquery.redplus.photoview.css" rel="stylesheet" type="text/css" />

    <script src="../js/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>

    <script src="jquery.redplus.photoview.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            // 썸 내일 이미지 개체 리스트에 상세 이미지 출력

            $('#products img').photoview({

                photoElement: '#photo',           // 사진 보여줄 개체

                previousControl: '#prev',         // 이전 버튼 개체

                nextControl: '#next',             // 다음 버튼 개체

                firstControl: '#first',           // 처음 버튼 개체

                lastControl: '#last'              // 마지막 버튼 개체

            });   

        });

    </script>

</head>

<body>

    <h1>상품 상세 보기</h1>

    <div id="products">

        <img src="../ProductImages/thumbs/BOOK-01.jpg" />

        <img src="../ProductImages/thumbs/COM-01.jpg" />

        <img src="../ProductImages/thumbs/HARDWARE-01.jpg" />

        <img src="../ProductImages/thumbs/Online-01.jpg" />

        <img src="../ProductImages/thumbs/SOFTWARE-01.jpg" />

    </div>

    <div id="big">

      <img id="photo" src="" alt="상세 이미지 " />

    </div>

    <div id="navi">

      <button type="button" id="first">처음¨ö</button>

      <button type="button" id="prev">이전</button>

      <button type="button" id="next">다음</button>

      <button type="button" id="last">마지막 </button>

    </div>   

</body>

</html> 




반응형