CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Moschte
Moschte

Reputation: 102

Image Picker Html

I tried to create a website to show 6 images and a user can mark every image he likes. Just like when you register on Netflix or the Captcha from Google.

I am very new to Web development and so I don't know what is the best way to do this. I created the website using Bootstrap but now I have trouble to implement the code to make the images checkable.

I found a very interesting plugin but it didn't work. But I am not sure if I implemented the plugin right. Link: http://jcuenod.github.io/imgCheckbox/

If I copy the code the images show up on the page but I cannot click them.

The code below is not my full website it's only a small page to test this.

<head>
  <script type="text/javascript" src='imgCheckbox/jquery.imgcheckbox.js'> 


<body>
<!-- Main -->
<main role="main" class="container-fluid">

  <div class="container-fluid" style="margin-top:50px;">
    <section id="basicusage" class="wrapper special">
      <header class="major">
        <h2>Basic Usage</h2>
      </header>
      <form class="exampleone">
        <p>
          <img src="images/1.jpg" class="img-fluid" alt="">
          <span class="spacer"></span>
          <img src="images/2.jpg" class="img-fluid" alt="">
          <span class="spacer"></span>
          <img src="images/3.jpg" class="img-fluid" alt="">
        </p>
        <input type="submit" />
      </form>
    </section>
  </div>

</main>

<!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
    integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
    integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
    crossorigin="anonymous"></script>
</body>

Upvotes: 0

Views: 6428

Answers (1)

obscure
obscure

Reputation: 12891

Since jquery.imgcheckbox is a jquery plugin, you need to include jquery. This is done by linking to https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js for example. After jquery and the plugin have loaded successfully, you can add the checkbox to any image using $("img").imgCheckbox();

Here's a working example:

$(document).ready(function() {
  $("img").imgCheckbox();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://jcuenod.github.io/imgCheckbox/assets/js/jquery.imgcheckbox.js"></script>
<div class="container-fluid" style="margin-top:50px;">
  <section id="basicusage" class="wrapper special">
    <header class="major">
      <h2>Basic Usage</h2>
    </header>
    <form class="exampleone">
      <p>
        <img src="https://picsum.photos/200/300" class="img-fluid" alt="">
        <span class="spacer"></span>
        <img src="https://picsum.photos/200/300" class="img-fluid" alt="">
        <span class="spacer"></span>
        <img src="https://picsum.photos/200/300" class="img-fluid" alt="">
      </p>
      <input type="submit" />
    </form>
  </section>
</div>

Please note, the above will just work here. Copy & paste won't work. If you want something that can be saved as a .html file, take this:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://jcuenod.github.io/imgCheckbox/assets/js/jquery.imgcheckbox.js"></script>
<script type="text/javascript"> 
$( document ).ready(function()
{
   $("img").imgCheckbox();
});
</script>
</head> 
  <div class="container-fluid" style="margin-top:50px;">
    <section id="basicusage" class="wrapper special">
      <header class="major">
        <h2>Basic Usage</h2>
      </header>
      <form class="exampleone">
        <p>
          <img src="https://picsum.photos/200/300" class="img-fluid" alt="">
          <span class="spacer"></span>
          <img src="https://picsum.photos/200/300" class="img-fluid" alt="">
          <span class="spacer"></span>
          <img src="https://picsum.photos/200/300" class="img-fluid" alt="">
        </p>
        <input type="submit" />
      </form>
    </section>
  </div>
</html>

Upvotes: 3

Related Questions