Question

如果我想在我的计算机上显示图像，我不明白如何使用此插件 https://github.com/creotiv/jquery-photowall/blob/master/README.rst

<!DOCTYPE html>

<html>

<head>
    <script type="text/javascript" src="jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="jquery-photowall.js"></script>
    <link rel="stylesheet" type="text/css" href="jquery-photowall.css">
</head>

<body>

    <script type="text/javascript">
    $(document).ready(function(){
        PhotoWall.init({
            el:             '#gallery'               // Gallery element
            ,zoom:          true                     // Use zoom
            ,zoomAction:    'mouseenter'             // Zoom on action
            ,zoomTimeout:   500                      // Timeout before zoom
            ,zoomDuration:  100                      // Zoom duration time
            ,showBox:       true                     // Enavle fullscreen mode
            ,showBoxSocial: true                     // Show social buttons
            ,padding:       10                       // padding between images in gallery
            ,lineMaxHeight: 150                      // Max set height of pictures line
                                                     // (may be little bigger due to resize to fit line)
        });

        /*

            Photo object consist of:

            {   // big image src,width,height and also image id
                id:
                ,img:       //src
                ,width:
                ,height:
                ,th:{
                    src:      //normal thumbnail src
                    zoom_src: //zoomed normal thumbnail src
                    zoom_factor: // factor of image zoom
                    ,width:   //width of normal thumbnail
                    ,height:  //height of normal thumbnail
                }
            };

        */

        var PhotosArray = new Array(
            {id:id,img:'my_img1.jpg',width:500,height:400,
             th:{src:'my_img1.jpg',width:50,height:40,
                 zoom_src:'my_img1.jpg',zoom_factor:4
                }
            },
            {id:id,img:'my_img2.jpg',width:500,height:400,
             th:{src:'my_img2.jpg',width:50,height:40,
                 zoom_src:'my_img2.jpg',zoom_factor:4
                }
            },
            {id:id,img:'my_img3.jpg',width:500,height:400,
             th:{src:'my_img3.jpg',width:50,height:40,
                 zoom_src:'my_img3.jpg',zoom_factor:4
                }
            },
            {id:id,img:'my_img4.jpg',width:500,height:400,
             th:{src:'my_img4.jpg',width:50,height:40,
                 zoom_src:'my_img4.jpg',zoom_factor:4
                }
            }
        );

        PhotoWall.load(PhotosArray);
        });

    </script>

    <div id="gallery">
        <div class="body"></div>
    </div>

</body>

</html>

但我看不到任何东西我该如何解决这个问题？

Answer 1

创建文件夹img并将所有img移动到该文件夹，并按以下代码添加路径。确保图像名称正确

<!DOCTYPE html>

<html>

<head>
    <script type="text/javascript" src="jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="jquery-photowall.js"></script>
    <link rel="stylesheet" type="text/css" href="jquery-photowall.css">
</head>

<body>

    <script type="text/javascript">
    $(document).ready(function(){
        PhotoWall.init({
            el:             '#gallery'               // Gallery element
            ,zoom:          true                     // Use zoom
            ,zoomAction:    'mouseenter'             // Zoom on action
            ,zoomTimeout:   500                      // Timeout before zoom
            ,zoomDuration:  100                      // Zoom duration time
            ,showBox:       true                     // Enavle fullscreen mode
            ,showBoxSocial: true                     // Show social buttons
            ,padding:       10                       // padding between images in gallery
            ,lineMaxHeight: 150                      // Max set height of pictures line
                                                     // (may be little bigger due to resize to fit line)
        });

        /*

            Photo object consist of:

            {   // big image src,width,height and also image id
                id:
                ,img:       //src
                ,width:
                ,height:
                ,th:{
                    src:      //normal thumbnail src
                    zoom_src: //zoomed normal thumbnail src
                    zoom_factor: // factor of image zoom
                    ,width:   //width of normal thumbnail
                    ,height:  //height of normal thumbnail
                }
            };

        */

        var PhotosArray = new Array(
            {id:id,img:'img/my_img1.jpg',width:500,height:400,
             th:{src:'img/my_img1.jpg',width:50,height:40,
                 zoom_src:'img/my_img1.jpg',zoom_factor:4
                }
            },
            {id:id,img:'img/my_img2.jpg',width:500,height:400,
             th:{src:'img/my_img2.jpg',width:50,height:40,
                 zoom_src:'img/my_img2.jpg',zoom_factor:4
                }
            },
            {id:id,img:'img/my_img3.jpg',width:500,height:400,
             th:{src:'img/my_img3.jpg',width:50,height:40,
                 zoom_src:'img/my_img3.jpg',zoom_factor:4
                }
            },
            {id:id,img:'my_img4.jpg',width:500,height:400,
             th:{src:'my_img4.jpg',width:50,height:40,
                 zoom_src:'my_img4.jpg',zoom_factor:4
                }
            }
        );

        PhotoWall.load(PhotosArray);
        });

    </script>

    <div id="gallery">
        <div class="body"></div>
    </div>

</body>

</html>

jQuery照片墙画廊插件

1 个答案: