Choose or deselect images from a selection

Question

Choose or deselect images from a selection

I am currently working on a feature for an album creation tool where users can select photos from a pool of images and assign them to a specific folder. However, I'm facing difficulty in selecting individual photos and applying customized attributes to them, such as a CSS border style when they are clicked.

Below is the HTML/jQuery code:

HTML

<div class="demo-gallery">
  <ul id="lightgallery" class="list-unstyled grid">
    <?php foreach ( $media_items as $item ): ?>
      <li>
         <img class="img-responsive" id="lazy" data-src="<?php echo $item->image_path_sd; ?>">
      </li>
    <?php endforeach; ?>
  </ul>
</div>

Jquery

var picture = document.querySelectorAll('#lazy');
$(picture).each(function () {
    $(document).on('click', /*???*/, function () {
        if ($(/*???*/).data('clicked', true)) {
            $(/*???*/).css("border", "none");
            $(/*???*/).data('clicked', false);
        } else {
            $(/*???*/).css("border", "4px solid #00CE6F");
            $(/*???*/).data('clicked', true);
            console.log($(/*???*/).data());
        }
    });
});

I believe that I need to determine the correct placement for the ??? comments, however, I might be approaching this issue incorrectly.

When I use console.log(picture), it returns an array of all the photos. By console.logging(picture[2]), it displays the third image. This is the behavior I desire, but how do I implement these attributes for each photo individually?

In essence, I aim for users to click on photos they wish to select, highlighting them with a bordered outline to indicate their current selection status.

javascript html jquery css

Answer 1

Answer №1

Utilizing jQuery eliminates the necessity of document functions. Instead, you can retrieve a list of items by targeting elements that share a common attribute (e.g., class name).

The beauty of jQuery lies in the .each(function(){ }) method, which passes the element itself as an argument - accessible via this. Employing $(pictures).each() enables access to individual elements within the set.

Rather than attaching a click listener to the entire document, it's more efficient to apply it directly to each img element.

To display a border, define the style in the CSS file and utilize the

$().toggleClass(/* class name */)

function.

var pictures = $('.lazy');

$(pictures).each(function () {
    $(this).on('click', function () {
    
        if ($(this).data('clicked') == true) {
            $(this).data('clicked', false);
        } else {
            $(this).data('clicked', true);
        }

        $(this).toggleClass('selected');
        
        $(pictures).each(function(index){
          console.log('img #' + index + ': ' + $(this).data("clicked"))
        })
    });
});

.lazy {
padding: 10px;
display: inline;
background-color: red;
margin: 10px;
}

.selected {
  border: 2px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img class="lazy" src="#">
<img class="lazy" src="#">
<img class="lazy" src="#">
<img class="lazy" src="#">
<img class="lazy" src="#">

Simplified

A condensed version of the previous code block provided by other responses:

$('.lazy').on('click',function(){
  $(this).toggleClass('selected');
  })

.lazy {
  background-color: red;
  padding: 10px;
  box-sizing: border-box;
}

.selected {
  border: 2px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img class="lazy" src="#">
    <img class="lazy" src="#">
    <img class="lazy" src="#">
    <img class="lazy" src="#">
    <img class="lazy" src="#">

Upon submission, simply use $('.lazy.selected') to select all the items marked as selected.

Answer 2

Utilizing jQuery eliminates the necessity of document functions. Instead, you can retrieve a list of items by targeting elements that share a common attribute (e.g., class name).

The beauty of jQuery lies in the .each(function(){ }) method, which passes the element itself as an argument - accessible via this. Employing $(pictures).each() enables access to individual elements within the set.

Rather than attaching a click listener to the entire document, it's more efficient to apply it directly to each img element.

To display a border, define the style in the CSS file and utilize the

$().toggleClass(/* class name */)

function.

var pictures = $('.lazy');

$(pictures).each(function () {
    $(this).on('click', function () {
    
        if ($(this).data('clicked') == true) {
            $(this).data('clicked', false);
        } else {
            $(this).data('clicked', true);
        }

        $(this).toggleClass('selected');
        
        $(pictures).each(function(index){
          console.log('img #' + index + ': ' + $(this).data("clicked"))
        })
    });
});

.lazy {
padding: 10px;
display: inline;
background-color: red;
margin: 10px;
}

.selected {
  border: 2px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img class="lazy" src="#">
<img class="lazy" src="#">
<img class="lazy" src="#">
<img class="lazy" src="#">
<img class="lazy" src="#">

Simplified

A condensed version of the previous code block provided by other responses:

$('.lazy').on('click',function(){
  $(this).toggleClass('selected');
  })

.lazy {
  background-color: red;
  padding: 10px;
  box-sizing: border-box;
}

.selected {
  border: 2px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img class="lazy" src="#">
    <img class="lazy" src="#">
    <img class="lazy" src="#">
    <img class="lazy" src="#">
    <img class="lazy" src="#">

Upon submission, simply use $('.lazy.selected') to select all the items marked as selected.

Answer 3

Answer №2

It's important to avoid using the same id selector for multiple tags within an HTML document. Instead, opt for the ".lazy" class selector.

Here is an example:

CSS:

.selected-image{
    border:1px solid #000;
}

jQuery:

$(".lazy").click(function(){
    const img = $(this)
    if(img.hasClass("selected-image")){
        img.removeClass("selected-image")
    }
    else{
        $(this).addClass("selected-image")
    }
})

Answer 4

It's important to avoid using the same id selector for multiple tags within an HTML document. Instead, opt for the ".lazy" class selector.

Here is an example:

CSS:

.selected-image{
    border:1px solid #000;
}

jQuery:

$(".lazy").click(function(){
    const img = $(this)
    if(img.hasClass("selected-image")){
        img.removeClass("selected-image")
    }
    else{
        $(this).addClass("selected-image")
    }
})

Choose or deselect images from a selection

Answer №1

Answer №2

Similar questions

Protecting an API with passport-local authentication

Navigate post Ajax call

Is there a way to change a model attribute in JSP based on the AJAX response?

Is it necessary to insert a thread sleep in HtmlUnit before clicking a button?

Is it possible to turn a <span> element into a clickable hyperlink?

Guide to obtaining the current upload progress percentage using jQuery and Node.js

Embedding PHP code within HTML causing functionality issues

Convert a div into a clickable link using JavaScript without using too many classes or any ids

Tips for handling transparent areas during a hover event

Learning to extract data with multiple parameters in Node.js

Python's website scraping: How can I determine the correct reference points in the html structure?

Mathjax2 in React is not supported in React v17

Having trouble finding the sum of values in an array using the Reduce method?

Harnessing the power of lazysizes with WebP

Experimenting with JavaScript within an Immediately Invoked Function Expression

What measures does Redux take to ensure race conditions do not occur?

Cross-Origin Resource Sharing (CORS) verification for WebSocket connections

With NodeJs, Mongoose refrains from storing any data in the database

Adjust CardMedia Images to match their content in the new MUI 5 version

An issue occurred while the request was being transported or processed, resulting in Error code 10 at Path /wardeninit