Question

I have a gallery of products that is dynamically created using php and mysql on the load of my htlml page. I am to take all of the images in the gallery, and turn them into links that will produce a modal window with content that is dynamically generated depending on which product is clicked.

My first thought is to use Jquery to select all of products, place an <a><a/> around each image and pass some kind of identifier to the my php that will generate the content in the modal window. is this thought process correct for trying to achieve this, or is there a better way to look at accomplishing this. Can any one provide some sample code that i can look at for direction.

Answer 1

Yes, what you’re describing will work.

However, I’d suggest you generate the wrapping <a href="javascript:void(0)"></a> in php and leave jQuery to handle only the click events, which would look something like:

$('a.product').click(function () {
    $.get('/some/url.php', data: {id: 1234}, function (data) {
        // Request is sent to /some/url.php?id=1234
        // PHP responds with some HTML
        // Output the HTML somewhere
        $('#output').html(data);
    });
});

If you’re using a library for the modal, some of them support AJAX loading of content already, so you don’t need the $.get, but instead just supply it a URL and the query params.