Question

我是初学者，想要使用以下图片选择器：https://rvera.github.io/image-picker/ 但不知道我怎么能在我的代码中安装它...任何帮助请？谢谢

<html>
 <head>
  <title>picker</title>
  <script src="image-picker.js"></script>
  <script src="image-picker.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <link rel="stylesheet" type="text/css" href="image-picker.css">
 </head>
 <body>
  <script>
     $("select").imagepicker()
     $("select").imagepicker()
 </script>
<select class="image-picker">
  <option data-img-src="test.png" data-img-class="first" data-img-alt="Page 1" value="1">  Page 1  </option>
  <option data-img-src="test.png" data-img-alt="Page 2" value="2">  Page 2  </option>
  <option data-img-src="test.png" data-img-alt="Page 3" value="3">  Page 3  </option>

  <option data-img-src="tst.png" data-img-alt="Page 4" data-img-class="last" value="4"> Page 4 </option>
</select>
 </body>
</html>

Answer 1

你的主要问题是你在制作之前正在初始化它，你也不包括选择器CSS：试试这个：

<html>
  <head>
    <title>picker</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="image-picker.min.js"></script>
    <link rel="stylesheet" type="text/css" href="image-picker.css">
  </head>
  <body>
    <select class="image-picker show-html">
      <option data-img-src="test.png" data-img-class="first" data-img-alt="Page 1" value="1">  Page 1  </option>
      <option data-img-src="test.png" data-img-alt="Page 2" value="2">  Page 2  </option>
      <option data-img-src="test.png" data-img-alt="Page 3" value="3">  Page 3  </option>
      <option data-img-src="tst.png" data-img-alt="Page 4" data-img-class="last" value="4"> Page 4 </option>
    </select>
    <script>
       $("select").imagepicker()
    </script>
  </body>
</html>

如何使用图像选择器？

1 个答案: