我爱模板网 > 特效插件 > 滚动轮播 >  电影网站支持弹出大图预览的jQuery相册代码正文

电影网站支持弹出大图预览的jQuery相册代码

特效介绍
jQuery相册代码

    电影网站支持弹出大图预览的jQuery相册代码,左边20个缩略图,点击任意一个缩略图,右边会放大显示该缩略图。点击右边的大图,或者点击大图下面的放大镜按钮,会弹出层,显示该图的放大版,点击关闭按钮,会关闭放大版的图片层。非常实用。可以作为电影网站或者图片网站甚至企业网站等的诸如电影图片、产品图片的展示。
使用方法
1.将下面的css文件和js文件放到您的html的head内部:
<link rel="stylesheet" type="text/css" href="js/jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/5imoban.net.css" />
<script type="text/javascript" src="http://www.5imoban.net/download/jquery/jquery-1.6.min.js"></script>
<script type="text/javascript" src="js/jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="js/farinspace/jquery.imgpreload.min.js"></script>
<script type="text/javascript" src="js/gallery.js"></script>
本相册代码引入的js比较多,可以合并成一个js文件再引入,可以加快加载速度,减少请求次数。

2.在body引入下面的html代码
<div class="gallery_container">
    <div class="gallery_top"></div>
    <div class="gallery_content">
        <div class="gallery_thumbnails">
            <a href="images/gallery/11.jpg" title="电影《YIYI》的海报"><img src="images/gallery/11_min.jpg"/></a>
            <a href="images/gallery/back_to_future.jpg" title="电影《重返未来》的海报"><img src="images/gallery/back_to_future_min.jpg"/></a>
            <a href="images/gallery/brave_heart.jpg" title="电影《勇敢的心》的海报"><img src="images/gallery/brave_heart_min.jpg"/></a>
            <a href="images/gallery/bwbj.jpg" title="电影《霸王别姬》的海报"><img src="images/gallery/bwbj_min.jpg"/></a>
            <a href="images/gallery/district9.jpg" title="电影《第九区》的海报"><img src="images/gallery/district9_min.jpg"/></a>
            <a href="images/gallery/effect.jpg" title="电影《蝴蝶效应》的海报"><img src="images/gallery/effect_min.jpg"/></a>
            <a href="images/gallery/fightClub.jpg" title="电影《搏击会》的海报"><img src="images/gallery/fightClub_min.jpg"/></a>
            <a href="images/gallery/forrest.jpg" title="电影《阿甘正传》的海报"><img src="images/gallery/forrest_min.jpg"/></a>
            <a href="images/gallery/inception.jpg" title="电影《盗梦空间》的海报"><img src="images/gallery/inception_min.jpg"/></a>
            <a href="images/gallery/jarhead.jpg" title="电影《锅盖头》的海报"><img src="images/gallery/jarhead_min.jpg"/></a>
            <a href="images/gallery/lc.jpg" title="电影《浪潮》的海报"><img src="images/gallery/lc_min.jpg"/></a>
            <a href="images/gallery/lord_of_war.jpg" title="电影《战争之王》的海报"><img src="images/gallery/lord_of_war_min.jpg"/></a>
            <a href="images/gallery/metal.jpg" title="电影《全金属外壳》的海报"><img src="images/gallery/metal_min.jpg"/></a>
            <a href="images/gallery/oceans.jpg" title="电影《海洋》的海报"><img src="images/gallery/oceans_min.jpg"/></a>
            <a href="images/gallery/prestige.jpg" title="电影《致命魔术》的海报"><img src="images/gallery/prestige_min.jpg"/></a>
            <a href="images/gallery/rls.jpg" title="电影《入殓师》的海报"><img src="images/gallery/rls_min.jpg"/></a>
            <a href="images/gallery/sixth_sense.jpg" title="电影《第六感》的海报"><img src="images/gallery/sixth_sense_min.jpg"/></a>
            <a href="images/gallery/the_boy_in.jpg" title="电影《穿条纹上衣的男孩》的海报"><img src="images/gallery/the_boy_in_min.jpg"/></a>
            <a href="images/gallery/truman.jpg" title="电影《楚门的世界》的海报"><img src="images/gallery/truman_min.jpg"/></a>
            <a href="images/gallery/rzdf.jpg" title="电影《让子弹飞》的海报"><img src="images/gallery/rzdf_min.jpg"/></a>
            <div class="clear_both"></div>
        </div>
        <div class="gallery_preview">
            <a href="images/gallery/11.jpg"></a>
        </div>
        <div class="clear_both"></div>
        <div class="gallery_contact"><p><a class="contactLink" href="http://www.5imoban.net/" title="免费网站模板">模板网</a></p></div>
        <div class="gallery_caption"></div>
        <div class="clear_both"></div>
        <div class="gallery_preload_area"></div>
    </div>
    <div class="gallery_bottom"></div>
</div>
其中,a链接的图片地址是大图地址,a链接的title是图片标题,显示在右侧大图的下面,a链接里面的图片是缩略图地址。


部分素材资源来源网站,本站提供免费下载,如有侵权请联系站长马上删除!
上一篇:仿韩国魔兽世界官网图片轮播效果 下一篇:flash+xml 3D效果幻灯图片插件
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
选择头像:
最新评论

猜你喜欢