Код не работает, когда реализован как один HTML для выбора изображений

Question

Код не работает, когда реализован как один HTML для выбора изображений

0

Я пытаюсь реализовать код, как показано на этом jsfiddle.

Я объединил весь код в один 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>

user3539767 27 апр. 2014, в 07:20

Источник

Теги:

jquery

html

image

picker

2 ответа

0

Библиотека jQuery не загружается, потому что вы не можете использовать URL-адрес без протокола для CDN-библиотеки при загрузке локальной страницы html (как в файле://)

Просто добавьте http: или https: в атрибут src, и вы должны быть в порядке.

т.е.

Только когда вы загружаете свой файл через веб-сервер, вы можете опустить протокол в URL.

eltuza 27 апр. 2014, в 02:56

Ещё вопросы

jshanley · Accepted Answer · 2014-04-27T03-40-00.000Z

Взгляните на вкладку " Внешние ресурсы " в опубликованном вами JSFiddle.

Этот пример загружает четыре других внешних файла, кроме jQuery:

имидж-picker.min.js

imagesloaded.pkgd.min.js

masonry.pkgd.min.js

изображения 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" />

Вы правы, я пропустил это. Спасибо
Почему, черт возьми, imagesLoaded нигде не упоминается ни в примерах ни кладки, ни сборщика изображений для этого точного сценария (то есть, сборщик изображений с использованием кладки)? В примере средства выбора изображений даже не упоминается, что кладка должна вызываться в обработчике imageLoaded. Он просто показывает HTML с классом «кладки», назначенным элементу select. Грозный.