Code not working when implemented as single html for image picker

StackOverflow https://stackoverflow.com/questions/23319369

  •  10-07-2023
  •  | 
  •  

Question

I am trying to implement the code as shown on this jsfiddle.

I combined all of the code into one html as follows, but all I get is a blank screen with a drop down box menu as shown in the screen shot image (sorry I cannot post image because I don't have enough reputation). What am I doing wrong?

<!DOCTYPE html>
<html>
<head>
<style>
.image_picker_image {
    max-width: 140px;
    max-height: 100px;
    background-color: #FF0000;
}
</style>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function () {
    $("#selectImage").imagepicker({
        hide_select: true
    });

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


</head>
<body>

<select id="selectImage" class="image-picker">
    <option value=""></option>
    <option data-img-src='http://png.findicons.com/files/icons/2689/kitchen/128/4.png' value='4.jpg'>4.jpg</option>
    <option data-img-src='http://png.findicons.com/files/icons/2142/webset/48/google.png' value='google.jpg'>google.jpg</option>
    <option data-img-src='http://im1.book.com.tw/image/getImage?i=http://www.books.com.tw/img/001/058/06/0010580607.jpg&w=348&h=348' value='5.jpg'>5.jpg</option>

</select>

</body>
</html>
Was it helpful?

Solution

Take a look at the External Resources tab in the JSFiddle you posted.

That example is loading four other external files besides jQuery:

image-picker.min.js

imagesloaded.pkgd.min.js

masonry.pkgd.min.js

image-picker.css

You will need to include those resources in your html as well:

<script src="http://rvera.github.io/image-picker/image-picker/image-picker.min.js"></script>
<script src="http://desandro.github.io/imagesloaded/imagesloaded.pkgd.min.js"></script>
<script src="http://masonry.desandro.com/masonry.pkgd.min.js"></script>
<link rel="stylesheet" href="http://rvera.github.io/image-picker/image-picker/image-picker.css" />

OTHER TIPS

The jQuery lib is not loading because you can't use a protocol-less URL to the CDN lib when loading a local html page (as in file://)

Just add http: or https: to the src attribute and you should be ok.

i.e.

Only when you server your file through a web server, you can omit the protocol in the URL.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top