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

如果您更喜欢使用咖啡文件夹，则需要先安装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的图像。授予完全权限。

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

℃。在浏览器中运行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 $50 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？

2 个答案: