简体   繁体   English

jQuery的图像选择器无法正常工作

[英]JQuery Image Picker is not working

I am trying to develop an Image Picker following these tutorials http://jsfiddle.net/huanlin/mgvrc/ and http://rvera.github.io/image-picker/# 我正在尝试按照以下教程http://jsfiddle.net/huanlin/mgvrc/http://rvera.github.io/image-picker/#开发图像选择器

Here is the code I have tried so far 这是我到目前为止尝试过的代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Try Image Picker</title>
  <link rel="stylesheet" type="text/css" href="image-picker.css" />
  <link rel="stylesheet" type="text/css" href="style.css" />
  <script type="text/javascript" src="image-picker.js"/> </script>
  <script type="text/javascript" src="image-picker.min.js"/> </script>
  <script>
    $(document).ready(function () {
      $("#selectImage").imagepicker({
        hide_select: true
      });

      var $container = $('.image_picker_selector');
      // initialize
        $container.imagesLoaded(function () {
          $container.masonry({
            columnWidth: 30,
            itemSelector: '.thumbnail'
          });
        });
    });

  function myFunction() {
      document.getElementById("demo").innerHTML = "Paragraph changed.";
  }
  </script>
</head>

<body>
    <select id="selectImage" class="image-picker">
        <option value=""></option>
        <option data-img-src="o.png" value="1">  Image 1  </option>
        <option data-img-src="aa.png" value="2">  Image 2  </option>
        <option data-img-src="ee.png" value="3">  Image 3  </option>
    </select>
<br>
<p id="demo">A Paragraph</p>

<button type="button" onclick="myFunction()">Try it</button>

</body>
</html>

But no image is showing in the browser. 但是浏览器中没有图像。 All CSS, JS scripts and images have been linked properly. 所有CSS,JS脚本和图像均已正确链接。 Can you suggest what am I doing wrong here? 你能告诉我我在做什么错吗?

This is jQuery plugin. 这是jQuery插件。 I see it's missing in your html head. 我看到它在您的html头中丢失了。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM