CODEWITHSUNDEEP
javascriptphpjquery
SISYN
SISYN

Reputation: 2259

Selecting photos with jQuery

I have a list of photos and I want check marks to appear when the photo is clicked. The page is also supposed to hide the check marks when it loads, but it doesn't do that either right now. The page is at http://lindseymotors.com/addvehicle.php

Here is the relevant JS code, but it gets inserted into the body of the HTML rather than the head tag where the rest of my JS goes. Is this what's causing my issues or is it a problem with the code itself? These bits of code are generated by PHP and inserted into the body HTML tag.

var allPhotos = new Array();
allPhotos[0] = '2000.mercedesbenz.clk430.0.jpg';    

var selectedPhotos = new Array();
    function selectVehicle(photoID) {
        if ( selectedPhotos.indexOf(photoID) > -1 ) {
            $('#check'+photoID).zIndex(-1);
            selectedPhotos.splice(photoID, 1);
        } else {
            selectedPhotos.push(photoID);
            $('#check'+photoID).zIndex(1);
        }

    }
    $(document).ready(function(){
        $('#photo0').click(selectVehicle(0));
        $('#check0').zIndex(-1);
    });

Of course there are 17 photos on the page itself, but the code is the same for each photo. By default the check marks will be hidden once I get the functionality working.

Upvotes: 0

Views: 86

Answers (3)

Felipe Bolsoni
Felipe Bolsoni

Reputation: 21

You have an error at your code... look to the console

Uncaught TypeError: $(...).zIndex is not a function ... addvehicle.php:17

It means that the result you got with $('#check'+photoID) don't have a function 'zIndex'

Edit: Well you solved the error. But you have a logical problem when you remove a selected record...

Like the other guy said, there are better ways to do it. but with you wanna solve it now try to use the index to splice, and not the photoId...

function selectVehicle(photoID) {
    var index = selectedPhotos.indexOf(photoID);
    if ( index > -1 ) {
        $('#check'+photoID).css('z-index', '-1');
        selectedPhotos.splice(index, 1);
    } else {
        selectedPhotos.push(photoID);
        $('#check'+photoID).css('z-index', '1');
    }
}

and try to use thumbnails please..

Upvotes: 1

Patrick Evans
Patrick Evans

Reputation: 42736

You do not need to keep an array of selected images, you can easily do this with a css class and jQuery's toggleClass, and then when you need to reference the selected ones just select them using the correct selector.

Wrap each car into a div 

<div class="car selected">
    <img src="http://placehold.it/128x128" />
</div>

Create a css class that will create the checkmark over the car image(using the :after pseudo class) when the div has the class

.selected:after {
    content:' ';
    width:128px;
    height:128px;
    display:block;
    background:url(http://lindseymotors.com/engine/img/check.png) no-repeat 50% 50%;
    background-size:contain;
    position:absolute;
    top:0px;
    left:0px;
}

Then just toggle the class on or off using jQuery's toggleClass

jQuery("carDivSelector").toggleClass("selected");

And when you need to get the selected cars

var selectedCars = jQuery(".car.selected");

Demo

jQuery(".car").click(function(){
   jQuery(this).toggleClass("selected");
});
.car {
  position:relative;
  display:inline-block;
}
.selected:after {
    content:' ';
    width:128px;
    height:128px;
    display:block;
    background:url(http://lindseymotors.com/engine/img/check.png) no-repeat 50% 50%;
    background-size:contain;
    position:absolute;
    top:0px;
    left:0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="car selected">
   <img src="http://placehold.it/128x128" />
</div>
<div class="car">
   <img src="http://placehold.it/128x128" />
</div>
<div class="car">
   <img src="http://placehold.it/128x128" />
</div>
<div class="car">
   <img src="http://placehold.it/128x128" />
</div>

Upvotes: 1

Yam Mesicka
Yam Mesicka

Reputation: 6581

You use the jQuery.click(function) method. You should pass a function, and not a statement.

Try using this instead:

$('#photo0').click(function() { selectVehicle(0); });

Upvotes: 2

Related Questions