Sudip Podder February 2016

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/#

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. Can you suggest what am I doing wrong here?

Answers


Vykintas Vaškys February 2016

This is jQuery plugin. I see it's missing in your html head.

Post Status

Asked in February 2016
Viewed 3,792 times
Voted 10
Answered 1 times

Search




Leave an answer