您现在的位置:首页 >> 前端 >> 内容

fancybox插件的简单实现

时间:2016/12/22 9:15:35 点击:

  核心提示:!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN https://www.w3.org/TR/xhtml1/DTD/xhtml1-...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html>  
  
    <head>  
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
        <meta name="keywords" content="客户上传的图片" />  
        <meta name="description" content="" />  
        <title>客户上传的图片</title>  
        <link rel="stylesheet" type="text/css" href="js/fancybox/fancybox.css" />  
        <script type="text/javascript" src="js/fancybox/jquery-1.7.2.min.js"></script>  
        <script type="text/javascript" src="js/fancybox/jquery.fancybox-1.3.1.pack.js"></script>  
        <script type="text/javascript">  
            $(function() {  
                $("a[rel=group]").fancybox({  
                    'titlePosition': 'over',  
                    'cyclic': true,  
                    'titleFormat': function(title, currentArray, currentIndex, currentOpts) {  
                        return '<span id="fancybox-title-over">' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? '   ' + title : '') + '';  
                    }  
                });  
            });  
        </script>  
    </head>  
  
    <body>  
  
        <a rel="group" href="js/fancybox/images/example/0038.jpg" title = "1200-1800-120142" ><img src = "js/fancybox/images/example/0038.jpg" alt = "0031.jpg" width = "90" /></a>  
        <a rel="group" href="js/fancybox/images/example/0038.jpg" title = "1200-1800-120142" ><img src = "js/fancybox/images/example/0038.jpg" alt = "0031.jpg" width = "90"/></a>  
        <a rel="group" href="js/fancybox/images/example/0038.jpg" title = "1200-1800-120142" ><img src = "js/fancybox/images/example/0038.jpg" alt = "0031.jpg" width = "90"/></a>  
        <a rel="group" href="js/fancybox/images/example/0038.jpg" title = "1200-1800-120142" ><img src = "js/fancybox/images/example/0038.jpg" alt = "0031.jpg" width = "90"/></a>  
        <a rel="group" href="js/fancybox/images/example/0038.jpg" title = "1200-1800-120142" ><img src = "js/fancybox/images/example/0038.jpg" alt = "0031.jpg" width = "90"/></a>  
        <a rel="group" href="js/fancybox/images/example/0038.jpg" title = "1200-1800-120142" ><img src = "js/fancybox/images/example/0038.jpg" alt = "0031.jpg" width = "90"/></a>  
    </body>  
  
</html>

效果图

fancybox插件的简单实现

Tags:FA AN NC CY 
作者:网络 来源:我本名叫一休的博客