Question

I have five images that when click load an include. Once the user has went through the include page they are then prompted back to the five images. All of this is using the .load() function. Once the user clicks all five images and i wish for a continue button to pop up to then proceed to the next page. How do i record a click and when five specific image is clicked a continue button pops up?

Images are set up normally in html like below.

<img class="img1" src="img/img1.png" />
<img class="img2" src="img/img2.png" /> 
<img class="img3" src="img/img3.png" />
<img class="img4" src="img/img4.png" />

Thanks,

Answer 1

You can try something along the lines of the following:

HTML:

<img class="img1 notclicked" src="img/img1.png" />
<img class="img2 notclicked" src="img/img2.png" /> 
<img class="img3 notclicked" src="img/img3.png" />
<img class="img4 notclicked" src="img/img4.png" />

Javascript:

$('.notclicked').click(function() {
    $(this).removeClass('notclicked');

    if($('.notclicked').length == 0)
        // Show your button
});