Fatal编程技术网
  • jquery/
  • Jquery 当作为图像选择器的单个html实现时，代码不起作用

Jquery 当作为图像选择器的单个html实现时，代码不起作用

jquery html image

Jquery 当作为图像选择器的单个html实现时，代码不起作用,jquery,html,image,picker,Jquery,Html,Image,Picker,我正在尝试实现如所示的代码 我将所有代码组合成一个html，如下所示，但我得到的只是一个带有下拉框菜单的空白屏幕，如屏幕截图所示（很抱歉，我无法发布图像，因为我没有足够的声誉）。我做错了什么 <!DOCTYPE html> <html> <head> <style> .image_picker_image { max-width: 140px; max-height: 100px; background-color: #FF

我正在尝试实现如所示的代码

我将所有代码组合成一个html，如下所示，但我得到的只是一个带有下拉框菜单的空白屏幕，如屏幕截图所示（很抱歉，我无法发布图像，因为我没有足够的声誉）。我做错了什么

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


.image\u picker\u image{
最大宽度：140像素；
最大高度：100px；
背景色：#FF0000；
}
$（文档）.ready（函数（）{
$（“#选择图像”）.imagepicker({
隐藏\u选择：true
});
var$container=$（'.image_picker_selector'）；
//初始化
$container.imagesLoaded（函数（）{
$container.com({
列宽：30，
itemSelector:“.缩略图”
});
});
});
4.jpg
google.jpg
5.jpg
没有加载jQuery库，因为在加载本地html页面时，无法使用CDN库的无协议URL（如文件：//）

只需在src属性中添加http:或https:即可

i、 e。

只有通过web服务器为文件提供服务器时，才可以省略URL中的协议。

查看您发布的JSFIDLE中的外部资源选项卡

该示例正在加载jQuery之外的四个其他外部文件：

image-picker.min.js

imagesloaded.pkgd.min.js

mash.pkgd.min.js

image-picker.css

您还需要在html中包含这些资源：

<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" />
为什么在砖石或图像选取器示例中没有提到地狱图像（即使用砖石的图像选取器）？在ImagePicker的示例中，甚至没有提到需要在imageLoaded处理程序中调用Massiness。它只显示分配给select元素的带有“砖石”类的html。可怕的