Question

I am new to AJAX,

I want to have a javascript that will make all the link(include webpage,internal link, external link) load in a lightbox when clicked. Just like Facebook, when you click the photo, it will give you a frame , without redirect you to the photo page.

Overall, I want my user to click on ANY link of my website do not redirect to a new page which need to refresh the whole page.
I want the link to be load in a frame on demand, also know as AJAX right?

Actually I just want to know this technique is called as what?? Any google search term ?? searching queries??

Any recommend article or tutorial to do this?

Answer 1

AJAX: Asynchronous JavaScript and XML. Your example isn’t AJAX, but rather it’s using JavaScript to do event binding that causes actions to take place in response to events made by the user in the browser.

You could use jQuery to bind an event to all the links of a certain type on a page. The exact implementation will depend on your HTML markup.

If, for example, you have several images wrapped in link tags:

<a href="image1.jpg" class="image_link"><img src="image1.jpg" /></a>
<a href="image2.jpg" class="image_link"><img src="image2.jpg" /></a>

You could have jQuery similar to the following (be sure to load jQuery prior to this in the page):

<script>
$('.image_link').click(function(event) {
    event.preventDefault(); // stops it from doing normal link action

    // and then down here you'd need JS for your lightbox library
});
</script>

Smashing Magazine has an article that might help you: Modal Windows in Modern Web Design.