phpcms V9 图片内容页采用FancyboxJQuery来浏览的效果

{template "content","header"}

<link rel="stylesheet" type="text/css" href="{JS_PATH}fancybox/jquery.fancybox-1.2.6.css" media="screen" />

<script type="text/javascript" src="{JS_PATH}fancybox/jquery.fancybox-1.2.6.pack.js"></script>

<script type="text/javascript">

                $(document).ready(function() {

                        $("a.zoom").fancybox();

                 });

</script>

      <div class="big-pic" style="height:650px;">

        <div id="big-pic"></div>

        <div class="photo_prev"><a id="photoPrev" title="&lt;上一页" class="btn_pphoto" target="_self" hidefocus="true" href="javascript:;" onclick="showpic('pre');"></a></div>

        <div class="photo_next"><a id="photoNext" title="下一页&gt;"class="btn_nphoto" target="_self" hidefocus="true" href="javascript:;" onclick="showpic('next')"></a></div>

        <a href="javascript:;" class="max" onclick="showpic('big');">查看原图</a>

        <div id="endSelect" style="display: none;">

          <div id="endSelClose" onclick="$('#endSelect').hide();"></div>

          <div class="bg"></div>

          <div class="E_Cont">

            <p>您已经浏览完所有图片</p>

            <p><a id="rePlayBut" href="javascript:void(0)" onclick="showpic('next', 1);"></a><a id="nextPicsBut" href="{$next_page[url]}"></a></p>

          </div>

        </div>

      </div>

      <div class="list-pic">

        <div class="pre picbig">

          <div class="img-wrap"><a href="{$previous_page[url]}"><img src="{thumb($previous_page[thumb], 100, 137, 0)}" title="{$previous_page[title]}"></a></div>

          </div>

        <a href="javascript:;" onclick="showpic('pre')" class="pre-bnt"><span></span></a>

        <div class="cont" style="position:relative">

          <ul class="cont picbig" id="pictureurls"  style="position:absolute">

            {loop $pictureurls $pic_k $r}

            <li>

              <div class="img-wrap"><a href="javascript:;" hidefocus="true"><img   src="{thumb($r[url], 100, 137, 0)}" alt="{$r[alt]}" rel="{$r[url]}"/></a></div>

            </li>

            {/loop}

          </ul>

        </div>

        <a href="javascript:;" onclick="showpic('next')" class="next-bnt"><span></span></a>

        <div class="next picbig">

          <div class="img-wrap"><a href="{$next_page[url]}" title="{$next_page[title]}"><img src="{thumb($next_page[thumb], 100, 137, 0)}"></a></div>

         </div>

      </div>

            <!--begin 图片浏览-->

              <ul class="pic_list">

                     {loop $pictureurls $i $v}

                                        <li class="imgwrap caption" {if $n%3==0}style="margin-right:0px"{/if}>

                     <a href="{$v[url]}" class="zoom" rel="group"><img src="{$v[url]}" alt="{$v[alt]}" id="img_{$v[id]}"/></a>

                    <div class="cover boxcaption">

                                                <h3><a href="{$v[url]}" title="{$v[alt]}" target="_blank">{$v[alt]}</a></h3>

                                        </div>                

                                        </li>               

                               {/loop} 

               </ul>

            <!--end 图片浏览-->