如何将此应用到我的 index.html？

Question

我想实现这个功能 http://rvera.github.io/image-picker/ 并将其连接到我的网上商店购买东西，所以你选择项目（在图像上）并将选择保存到变量并且这个变量表示支持支付多少用户想付钱给我。问题是我不知道该怎么做。我从内部链接了 js，css，但在源代码中有包含 coffee 和 sassy 等文件夹的文件。有任何想法吗？ :) 我没有使用 Javascript 和 jQuery 的经验，我只想做这个功能 :)。

这是某个文件index.html

<html>

<head>
<link rel="stylesheet" href="css.css">
<script src="js.js"></script>



<!-- scripts for imagepicker -->
    <link rel="stylesheet" href="css/image-picker.css">
    <script type="text/javascript" src="js/image-picker.js"></script>
    <script type="text/javascript" src="ja/image-picker.min.js"></script>

<!--code for imagepicker-->
<select multiple="multiple" class="image-picker show-html">
  <option data-img-src="http://placekitten.com/220/200" value="1">Cute Kitten 1</option>
  <option data-img-src="http://placekitten.com/180/200" value="2">Cute Kitten 2</option>
  <option data-img-src="http://placekitten.com/130/200" value="3">Cute Kitten 3</option>
  <option data-img-src="http://placekitten.com/270/200" value="4">Cute Kitten 4</option>
</select>

</head>
<body><script>

$("select").imagepicker()

</script>

    <select class="image-picker show-html">
      <option value=""></option>
      <option data-img-src="image-path goes here" value="1">Image 1</option>
      <option data-img-src="image-path goes here" value="2">Image 2</option>

    </select></body>


</html>

Answer 1

一次，您下载了文件并添加到项目中。在您的 HTML 页面上添加以下内容：

编辑：我想这对你有用

<html>
<head>


        <!-- scripts for imagepicker -->
            <link rel="stylesheet" href="css/image-picker.css">
            <script type="text/javascript" src="js/image-picker.js"></script>
            <script type="text/javascript" src="js/image-picker.min.js"></script>


        <script type="text/javascript">

        $("select").imagepicker();

        </script>
</head>
    <body>
    <!--code for imagepicker-->
        <select multiple="multiple" class="image-picker show-html">
          <option data-img-src="http://placekitten.com/220/200" value="1">Cute Kitten 1</option>
          <option data-img-src="http://placekitten.com/180/200" value="2">Cute Kitten 2</option>
          <option data-img-src="http://placekitten.com/130/200" value="3">Cute Kitten 3</option>
          <option data-img-src="http://placekitten.com/270/200" value="4">Cute Kitten 4</option>
        </select>

            <select class="image-picker show-html">
              <option value=""></option>
              <option data-img-src="image-path goes here" value="1">Image 1</option>
              <option data-img-src="image-path goes here" value="2">Image 2</option>

            </select>

    </body>

</html>

Answer 2

如果您喜欢使用 coffee 文件夹，则需要先安装 CoffeeScript 才能使用此 http://rvera.github.io/image-picker/。

在 ubuntu 机器上，您可以使用以下命令

sudo npm install -g coffee-script

然后在您从此处下载的脚本中 - http://rvera.github.io/image-picker/ 执行以下操作：

一个。创建名为 "img" 的文件夹和一些名称为 - 01.jpg、02.jpg、03.jpg、04.jpg 的图像。授予完全权限。

b。创建一个文件 imagepicker.html。此文件应放在目录 "image-picker" 之外，并在该文件中复制以下代码。

c。运行 HTML 浏览器中的文件。

<link rel="stylesheet" type="text/css" href="image-picker/image-picker.css">
<script src="http://code.jquery.com/jquery-1.11.2.min.js" type="text/javascript"></script>
<script src="image-picker/image-picker.js" type="text/javascript"></script>    

<div class="picker"> 
<select multiple="multiple" class='image-picker show-html'>
<option data-img-src='img/01.jpg' value='1'>  Page 1  </option>
<option data-img-src='img/02.jpg' value='2'>  Page 2  </option>
<option data-img-src='img/03.jpg' value='3'>  Page 3  </option>
<option data-img-src='img/04.jpg' value='4'>  Page 4  </option>
</select>
</div>

<ul class="thumbnails image_picker_selector" style="display: none">
<li><div class="thumbnail"><img class="image_picker_image" src="img/01.jpg"></div></li>
<li><div class="thumbnail"><img class="image_picker_image" src="img/02.jpg"></div></li>
<li><div class="thumbnail"><img class="image_picker_image" src="img/03.jpg"></div></li>
<li><div class="thumbnail"><img class="image_picker_image" src="img/04.jpg"></div></li>
</ul>

<script type="text/javascript">

jQuery("select.image-picker").imagepicker({
  hide_select:  false,
});

jQuery("select.image-picker.show-labels").imagepicker({
  hide_select:  false,
  show_label:   true,
});

jQuery("select.image-picker.limit_callback").imagepicker({ 
  limit_reached:  function(){alert('We are full!')},
  hide_select:    false
}); 

//Return total amount on click of options in drop down. considering  for each item
$('.image-picker').click(function(){ 
   var amount = 0; 
   $('.image-picker option:selected').each(function()
   { 
     amount = amount + 50; 
  }); 
  alert("Final Amount - "+amount);
 });

如何将此应用到我的 index.html？

How to implement this to my index.html?

html

javascript

css

jquery

image