Question

I am currently making a “welcome/walkthrough” for new users who join my website.

Initially they will be greeted by recent/top uploads that they can like which will help my website find images they would like for them. But my question is what is the best way of letting users select what they like or not? Currently i have this.

http://jsfiddle.net/BKjJV/

I hope you can get a grasp on what i am trying to achieve here, but if not, to sum it up,

User clicks (n) amount of images to like -> clicks continue -> page grabs all images that have been liked and sends them to a file which adds to my database.

Answer 1

the easiest way given your code would be something like “on next page button” see what images were chosen by the user and send their name via ajax to a php page that will check it on a database to add them:

$(document).ready(function(){
    var images = new Array(); //images clicked will be stored here 
    $('#next_page_button').click(function(e){ //button that will send users to the next page
        e.preventDefault(); 
        $('.item').each(function(){ //for each image
            if($(this).find('.clicked').is(":visible")){ //see if the user has clicked on it
               images.push($(this).find('img').attr('src')); //and if so add it to the array
            }
        });
        $.ajax({   //time to send it to the php page
            url: '', //url of it
            type: 'POST',
            data: {images: encodeURIComponent(images.join())}, //lets merge the array and create a query string of the image separated by a comma and encode them to be sent via POST
            success: function(data){
                    //if the database actions went well, user will be send to the next page
            }                               
        });
    });
});

on the PHP page you will retrieve the $_POST['images'], split the variables via explode(‘,’ $_POST[‘images’]) and then cicle through the array to check/add it to the database via foreach

little suggestion: you should use id to create “unique” images and show it on the page, to make it easier to “check/add” them on the database. Using unique numeric index instead of text compare is faster and gives more reliability.