asp.net+jquery+lightbox打造產品展示

 首先：我們先來看看最終效果：http://www.orfeo-casa/index.aspx 

  

 下面我簡單介紹使用的方法，具體大家可以展示頁面的代碼

第一步：我們要引入

    <script type="text/javascript" src="http://www.orfeo-casa.com/js/jquery.js"></script>
    <script type="text/javascript" src="http://www.orfeo-casa.com/js/jquery.lightbox-0.5.js"></script>

    <link rel="stylesheet" type="text/css" href="http://www.orfeo-casa.com/css/jquery.lightbox-0.5.css"media="screen" />

     <script type="text/javascript">
    $(function() {
        $('#Right a').lightBox();
    });
   
    </script>

  第二步：

<div id="Right">
        <ul>
        <li><a  href="product/index/index1.jpg" title="aa"><img src="product/index/index1.jpg" onmousemove="this.className='GrayCss'" onmouseout="this.className='indexImg'" class="indexImg" alt="fd" /></a> </li>
        <li><a  href="product/index/index2.jpg" title="aa"><img src="product/index/index2.jpg" onmousemove="this.className='GrayCss'" onmouseout="this.className='indexImg'" class="indexImg" alt="fd" /></a></li>
        <li><a  href="product/index/index3.jpg" title="aa"><img src="product/index/index3.jpg" onmousemove="this.className='GrayCss'" onmouseout="this.className='indexImg'" class="indexImg" alt="fd" /></a></li>
        <li><a  href="product/index/index4.jpg" title="aa"><img src="product/index/index4.jpg" onmousemove="this.className='GrayCss'" onmouseout="this.className='indexImg'" class="indexImg" alt="fd" /></a></li>
        <li><a  href="product/index/index5.jpg" title="aa"><img src="product/index/index5.jpg" onmousemove="this.className='GrayCss'" onmouseout="this.className='indexImg'" class="indexImg" alt="fd" /></a></li>
        <li><a  href="product/index/index6.jpg" title="aa"><img src="product/index/index6.jpg" onmousemove="this.className='GrayCss'" onmouseout="this.className='indexImg'" class="indexImg" alt="fd" /></a></li>
        </ul>
      </div>