SIMPLE jQuery SELECT

Question

1) How to get an alert when I select 1_1.jpg, 1_2.jpg, 1_3.jpg or 2_1.jpg, 2_2.jpg, 2_3.jpg and the other ones arn't selected? (something like this *_1.jpg, *_2.jpg, *_3.jpg)

2) How to randomly position the order of the images (ex: first one: 2_1.jpg, second: 1_5, third:1_9 etc. so only the end of src (_.jpg) should differe)?

http://jsfiddle.net/alecstheone/br4bS/

HTML:

<img class="image" src="../img/Album1/1_1.jpg">
<img class="image" src="../img/Album1/1_2.jpg">
<img class="image" src="../img/Album1/1_3.jpg">
<img class="image" src="../img/Album1/1_4.jpg">
<img class="image" src="../img/Album1/1_5.jpg">
<img class="image" src="../img/Album1/1_6.jpg">
<img class="image" src="../img/Album1/1_7.jpg">
<img class="image" src="../img/Album1/1_8.jpg">
<img class="image" src="../img/Album1/1_9.jpg">
<img class="image" src="../img/Album1/1_10.jpg">
<img class="image" src="../img/Album1/2_1.jpg">
<img class="image" src="../img/Album1/2_2.jpg">
<img class="image" src="../img/Album1/2_3.jpg">

CSS:

.img {
    height:30px;
    width:30px;
    background:blue;
    margin-left:10px;
}

.selected {
    -moz-box-shadow: 0 0 7px 4px blue; 
    -webkit-box-shadow: 0 0 7px 4px blue; 
    box-shadow: 0 0 7px 4px blue;
}

JQUERY:

$( ".image" ).click(function() {
  if($(this).hasClass("selected"))
      $(this).removeClass("selected");
  else
      $(this).addClass("selected");  
});

score 1 · Answer 1 · answered Apr 06 '14 at 23:29

1

1) How to get an alert when I select 1_1.jpg, 1_2.jpg, 1_3.jpg or 2_1.jpg, 2_2.jpg, 2_3.jpg and the other ones arn't selected? (something like this *_1.jpg, *_2.jpg, *_3.jpg)

Get your img elements in an array $("img"), and then condition on both the src and class attributes in this array.

2) How to randomly position the order of the images (ex: first one: 2_1.jpg, second: 1_5, third:1_9 etc. so only the end of src (_.jpg) should differe)?

Get your img elements in an array $("img"), shuffle that array, and then append the elements to a container. See here for an example.

answered Apr 06 '14 at 23:29

user3504561

63
5

I'm very new to jquery may you please modify my jsfiddle a little bit? in 1) I want it to be automate for any *_1, *_2 or *_3 images – Alex Stanese Apr 07 '14 at 09:36
How to condition the src and class in the array? – Alex Stanese Apr 07 '14 at 10:09

score 0 · Answer 2 · edited May 23 '17 at 10:26

0

1) For the selecting, it works like below. It'll give an alert on selecting image 1_1. I think you'll find it not too hard to work with the rest.

//If you select any image you get an alert.
$(document).ready(function() {
  var selectedImgsArr = [];
   $("img").click(function() {
       //alert image name.
       var src = $(this).attr('src');
       if(src="../img/Album1/1_1.jpg") {
           alert("1_1 selected");
       }
   });
});

2) You can basically have a function that randomises an array with the image names in them and shuffle it, to print it with JQuery then. Look here how to.

Good luck with it!

edited May 23 '17 at 10:26

Community

1
1

answered Apr 06 '14 at 23:27

Friso van Dijk

669
3
15

But how can I automate this thing to select all *_1, *_2 and *_3 elemnts.. (ex. 1_1, 1_2, 1_3, 2_1, 2_2, 2_3, 3_1, 3_2, 3_3 etc...) Because it doesn;y work with asterix? – Alex Stanese Apr 07 '14 at 09:05
I'd say use a substring. I don't have time to work it all into a total answer though.. `var index = string.indexOf(".jpg");` `var substring = string.substr(index-2, index);` That should get the 2 characters before the .jpg extention. – Friso van Dijk Apr 08 '14 at 14:20

SIMPLE jQuery SELECT

2 Answers2