Question

I’m working on a CMS at the moment and have been looking for a suitable Jquery/Php image manager but can’t find anything that really suits my needs. So I’ve decided to have a go at building the image manager myself. The bad news is I’m not particularly up to speed with my Jquery…actually I know very little. But I’m working my way through it.

The end result will display an unordered list of images.

<ul>
<li><a href="#" id="imgid"><img src="imgsrc" /></a></li>
<ul>

When the user clicks on an image the ID of that image is sent to a Jquery function and stored in an array. The image is highlighted with a border added by addclass(). If the user clicks on a subsequent image that image ID is also sent to the Jquery array and the second image is also highlighted.

This continues until the user doesnt click on any further images. Naturally if the user clicks on an image that is already contained in the Jquery array then it is removed and the highlighted effect is also removed.

Following this the user will select a catalogue item from a select menu that sits below the image list. The ID of that item is also passed to Jquery.

When the user clicks submit the Jquery array and select ID are sent to a PHP script that updates a MySQL table, linking the image ID to the catalogue item ID.

Where I’m up to currently is…I have a lovely unordered list of images.

My questions are

1. How do I send the image id to the jquery array, and subsequently remove that id if the same image is clicked again
2. How do I send the Jquery array to the PHP script to be executed

I have got some of this working in code snippets at the moment, but as Jquery is far from my forte Im just rinsing and repeating until I get the code right. Any help would be great.

Mark

So Ive been trying this code snippet, but I think i could be written better.

$(document).ready(function() {
    $("img").click(function(event) {
        var test = (event.target.id);
        if($('img[id=' + test + ']').is('.error'))
            $('img[id=' + test + ']').removeClass("error");
        else
            $('img[id=' + test + ']').addClass("error");
    });
});
</script>

Surely there’s another way to target the img id without having to use ‘img[id=’ + test + ‘]’

Mark

Edited again

$(document).ready(function() {
    $("img").click(function(event) {
        var img_id = (event.target.id);
        var imgArray = new Array();
        if($('img[id=' + img_id + ']').is('.selected')) {
            $('img[id=' + img_id + ']').removeClass("selected");
            $('span[id=check_' + img_id + ']').removeClass("check-ok");
            removeArray();
            }
        else {
            $('img[id=' + img_id + ']').addClass("selected");
            $('span[id=check_' + img_id + ']').addClass("check-ok");
            addArray();
            }
        function removeArray() { 
            alert('Removing from the array');
            }
        function addArray() {
            alert('Adding into the array');
            }
        });
    });

Trying to figure out how to insert the images into the array, and then remove them from the array.

Answer 1

I’m not really sure what all the bits of your code are doing, but something like this should at least make it a bit more DRY:

function showMessage(selected) {
    if( true === selected )
      {
      alert('Removing from the array');
      }
    else
      {
      alert('Adding to the array');
      }
}

$(document).ready(function() {
    $('img').click(function(event, ui)
      {
      $(this).toggleClass('selected');
      var id = $(this).attr('id');
      $('#check_' + id).toggleClass('check-ok');
      showMessage( $(this).hasClass('selected') );
      });
});

And in jsfiddle (although I replaced img with div for speed).