Question

179

Select multiple images from a grid of thumbnail images

rated 0 times [ 182] [ 3] / answers: 1 / hits: 15244 / 13 Years ago, wed, april 20, 2011, 12:00:00

I have grid of thumbnail images on a form, and I would like for the user to be able to select multiple images, and have their selection submitted with the form.

My requirements are:

Single click to select the image, and selection is fed back to user, e.g by changing the border.

Degrade gracefully to just html, and still work.

Cross browser/device support (needs to work on ipad for example)

Can all my requirements be satisfied?

thanks.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

yulissamirandah

Add To Favorites

Follow

Total Points: 493

Total Questions: 115

Total Answers: 94

Location: Lebanon

Member since Sun, Aug 2, 2020

4 Years ago

answered 13 Years ago stacied · Accepted Answer

You could do it like this: thumbnail and on top or right next to it you put your checkbox. Then via jquery you hide the checkboxes and attach your click events to the thumbnails that check and uncheck the checkboxes. thus you have support for browsers supporting jquery and not supporting any javascript at all. if the browser doesn't support the js then the checkboxes won't be hidden and the checkboxes are usable as usual. if the browser does then they will be hidden and the fancy js actions will be used instead.

for example:

<div id=container1 class=container>

    <img>

    <input class=cbox type=checkbox name=foo[] value=foo1/>

</div>

<div id=container2 class=container>

    <img>

    <input class=cbox type=checkbox name=foo[] value=foo1/>

</div>



$(document).lad(function(){

    $(.container .cbox).hide();

    $(.container img).click(function(){

        //do the stuff you need to do like

       var $checkbox = $(this).parent().find(.cbox);

       $checkbox.attr('checked', !$checkbox.attr('checked'));

    });

});

try it out. this may work but i give no guaranty.