jQuery的照片墙画廊插件

我不明白我怎么可以，如果我想表明这是在我的电脑 https://github.com/creotiv/jquery-photowall/blob/master/README.rst jQuery的照片墙画廊插件

<!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>

图像使用这个插件，但我看不到任何东西我该如何解决那个问题？

来源

2014-09-30 Elle

您是否检查过浏览器控制台的错误？ – j08691 2014-09-30 15:23:21

没有错误报道 – Elle 2014-09-30 15:28:06

你需要绝对路径到你的图像源：“图像文件夹/ my_img1.jpg” – 2014-09-30 15:28:47

创建文件夹，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>

来源

2014-09-30 15:45:39

你试试这个代码？因为即使我把所有的图片文件夹中，并添加路径它diesn't工作 – Elle 2014-09-30 15:58:12

http://creotiv.github.io/jquery-photowall/example.html – 2014-09-30 16:05:26

http://creotiv.github.io/jquery -photowall/example.html – 2014-09-30 16:05:46

jQuery的照片墙画廊插件

回答

相关问题