What is the best way to incorporate this into my index.html file?

I am looking to incorporate the functionality of into my online store for buying items. The idea is that users can select items from images and those selections will be saved as a variable which will then dictate how much they want to pay. However, I am struggling with the implementation process. Although I have linked the necessary js and css files, I noticed folders in the source code named 'coffee' and 'sassy'. Any suggestions on how to proceed? I do not have much experience with JavaScript or jQuery, but I really want to implement this feature :).

This is the content of my index.html file:

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

Answer №1

After downloading the necessary files and adding them to your project, insert the following code into your HTML page:

Note: This should do the trick for you.

<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

To utilize the plugin with a preference for the coffee folder, you must first install CoffeeScript.

If you are on an ubuntu machine, you can use the following command:

sudo npm install -g coffee-script

After installing CoffeeScript, in the script downloaded from , follow these steps:

a. Create a folder named "img" and add images named: 01.jpg, 02.jpg, 03.jpg, 04.jpg. Ensure they have full permissions.

b. Create a file called imagepicker.html. Place this file outside of the directory "image-picker", and copy the following code into it.

c. Open the HTML file in a browser.

<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
}); 

//Calculate total amount when options in the drop down are clicked. 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);
 });

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

JS DataTables | Data fetch error: Unexpected warning encountered

When attempting to implement datatables with server-side functionality, I encountered an error while fetching data. Interestingly, dismissing the error and reloading the data resolved the issue. DataTables warning: table id=clientTable - https://i.sstati ...

jqueryajaxdatatableserver-side

What steps can be taken to resolve an ESLing error in this situation?

Check out this code snippet: <template v-if="isTag(field, '')"> {{ getItemValue(item, field) ? getItemValue(item, field) : '&#8211'; }} </template> An issue has been identified with the above code: Er ...

javascriptvue.jseslint

Ways to exclude one optional route parameter in Node.js Express

I am trying to create a simplistic route that looks like this: app.get("/posts/:country?/:city?", function (req, res) { res.redirect("/"); }); Is there a way to exclude the country parameter and only include the city parameter as nec ...

javascriptnode.jsexpressroutes

Can you explain the distinction between the terms "vite" and "vite preview"?

I recently created a project template with the help of vite. While looking through my package.json file, I noticed the following section; "scripts": { "dev": "vite", "build": "vue-tsc --noEmit &&a ...

javascriptvue.jsvite

JQuery is blocking the submission of an HTML form

During my exploration of an AJAX/JQuery tutorial for a registration script that interacts with PHP/MySQL and is submitted via JQuery, I encountered a recurring issue. The problem lies in the form submitting directly to the action page instead of its intend ...

javascriptphpjqueryhtmlajax

Discover the `.next/server` feature on Vercel - a platform where it seamlessly operates unlike on Netlify

Having trouble accessing .next/server on Vercel when running the build:rss script: { "export": "next export", "build": "next build && npm run export && npm run build:rss", "build:rss": &q ...

javascriptnode.jsnext.js

Is there a way to display a success message once the button has been activated?

<template> <div> <div class="form-group"> <label for="name">Name</label> <input type="text" class="form-control" v-model="firstName" placeholder="Enter ...

javascriptnode.jsvue.js

Creating a Typescript enum that implements interfaces can be achieved by first defining the enum

Creating a Typescript enum that implements interfaces I currently have these two enums All keys in enum ENNAME should only include keys from enum POSTAG export enum POSTAG { BAD = 0x80000000, D_A = 0x40000000, D_B = 0x20000000, D_C = 0x1 ...

javascriptnode.jstypescripttypesenums

Passing a global variable as an argument to a jQuery function is not allowed

I am attempting to display local weather information using an API. The API URL is generated based on the user's current position. var lat, lon = null; var key = "mykey"; var api = ""; function setApi(position){ lat = Math.round(position.coords.lati ...

javascriptjquery

IE having issues with selecting all options button in jQuery, but it is functioning correctly in Firefox

In one part of my cgi code, I create the following: my $PARAMETER_HTML .= "<select name='parameters' id='parameters' size='10' multiple='multiple'>"; foreach my $values (sort @PARA_VALUES) { $PARAMETER_HTM ...

jqueryhtmlperlcgi

Obtain directive content in AngularJS prior to compilation

Is there a way to extract the HTML content of a directive prior to compilation? For instance, consider the following: <my-directive> <ul> <li ng-repeat="item in items">{{item.label}}</li> </ul> </my-directive> ...

javascriptangularjsangularjs-directiveangularjs-ng-transclude

Quick way to access dropdown menu in Visual Code while selecting JavaScript/React code

While working on React code in Visual Studio Code, I accidentally triggered a dropdown menu when trying to copy and paste a section of my code. One of the items that caught my eye was labeled "Destructure JavaScript," which seemed intriguing. Unfortunately ...

javascriptreactjsvisual-studio-code

Having Issues with Loading More Button Functionality in Selenium Automation

Here is a snippet of my code. from selenium import webdriver from selenium.webdriver.common.keys import Keys from selenium.webdriver.common.by import By from selenium.webdriver.support.ui import WebDriverWait from selenium.webdriver.support import expected ...

javascriptpythonajaxseleniumselenium-chromedriver

A guide on utilizing a dropdown menu in PHP to showcase various MySQL tables

I am looking for a solution to display different tables (table 1 to 5) from my MySQL database when selected from a drop-down list. However, when I attempted to execute the code below, I did not receive any response and no data was loaded from the SQL datab ...

phphtmlmysqlpdo

Employing Ajax.Updater to retrieve a javascript file (prototype.js)

My ajax request is set up as follows: new Ajax.Updater({ success: 'footer' }, '/dyn/actions/checkSystemMessage', { insertion: 'after', evalScripts: true }); The content found at /dyn/actions/checkSystemMessag ...

javascriptajaxprototypejs

Use Node.js with Selenium and WebdriverIO to simulate the ENTER keypress action on

I have put in a lot of effort trying to find the solution before resorting to asking this question, but unfortunately I have not been successful. All I need to know is how to send special characters (such as the enter key and backspace) with Node.js using ...

javascriptnode.jsseleniumwebdriver-io

Troubleshooting: GSAP Scrolltrigger malfunctions when using multiple triggers

Having multiple triggers with different functionalities: Show or remove a canvas Change the background color of a section Play or pause video when in view Play or pause CSS animation The first two triggers work fine individually, but I am encountering an ...

javascriptgsap

Switching from a right arrow to a down arrow using jQuery for a collapsible accordion feature

I have developed a unique type of toggle feature similar to an accordion design. When I click on the right-arrow next to an item, such as Area A, it expands to reveal the list of items within Area A. The arrow also changes orientation to point downwards (L ...

javascriptjqueryangularjs

How can I update the input field status once the form submission validation has been completed?

Is there a way to manually change the validity status of an input field using JavaScript? I have an input field used for searching, and after receiving a response from the server, I need to mark if the input value is correct or incorrect. Currently, I can ...

javascripthtmljqueryvalidationbootstrap-4

The parseJSON function is not compatible with AJAX requests

I am attempting to use ajax and retrieve JSON data in WordPress. Here is my Ajax code: $.ajax({ type: "POST", dataType : 'html', url: "/wp-content/themes/myproject/ajax/otros_alojamientos.php", da ...

javascriptjqueryajaxjsonwordpress