Sitegrind

This is about using the load function from jQuery. How to use it across domains to load content from other sites and show it on your own. Yes, it can. But, not alone (at least, not for me). I managed to get it working with php. And no, you don’t have to understand php read on and amaze yourself.

• Must know:
  • How to put a html website online.
  • Copy and paste. That sounds cheap and it is. Nevertheless this code can be of great value to you
• Must not know:
  • For this tutorial you don’t have to know javaScript (I don’t)
  • php
  • jQuery. Nevertheless, people using jQuery will have a special interest in this article!

Like quick and dirty? Leave this tutorial with all its explanations. Have a look at the cool demo first, wow, loading all images from a complete other website! Than copy the complete, small html and php scripts. Thunderbirds are go!

Php reads html file

Php can do what you came here for in the fist place: load content, e.g. images from other web pages and show it on your own website. The file_get_contents function reads html code. The  php code you are going to use looks like this:

extract($_POST);
$str = file_get_contents($site2Read);
echo $str;

You don’t have to understand that. This is what you do. Copy this code literally, do not replace anything.  As I said before, copy in a .txt file and save as loader.php , in the same directory as your html file.

PS: for some domains this piece of php will not work. These are protective restrictions. Webmasters try to prevent your script to read their content like this.  Try this alternate code instead. Works more often. It still is copy paste, just as much work as the code above. Copy in tekstfile (notepad) and save as loader.php  :

extract($_POST);
$page= get_url_contents($site2Read);
echo $page;
function get_url_contents($url){
$crl = curl_init();
$timeout = 5;
curl_setopt ($crl, CURLOPT_URL,$url);
curl_setopt ($crl, CURLOPT_RETURNTRANSFER, 1);
curl_setopt ($crl, CURLOPT_CONNECTTIMEOUT, $timeout);
$ret = curl_exec($crl);
curl_close($crl);
return $ret;
}


Many thanks to the How-To Geek for this.

Load function from jQuery for images only

So far for the php part. The reason I want to do this with jQuery in the first place is because of its sweet filtering functions. You can start filtering content in the jQuery load function already! This means you can pick, for instance, all images / pictures from a site. And show them directly on your site, next to your other content. Or all links from an an other site, or all headers (h1, h2). Or all divisions containing the word ‘hello’. Or all unsorted lists (<ul>) having an id-attribute with text ‘favorites’ in it. And so on, get the idea? You know some jQuery, right? Here, as an example, we are going to get all header 2 elements  from a website, the <h2> part. My original tutorial loaded all images from a html site. But images are often well protected. To make things working fast we are going to use h2. This is the proper load function:

$("#allh2").load("http://www.yourdomain.com/loader.php h2",{want2Read:"http://www.want2Read.com/"});

• Replace http://www.yourdomain.com/loader.php with -duh-…
• Replace http://www.want2Read.com/ with the website you want to read.
• Make sure there is a division with id=”allh2″ on your html-page. Thus:<div id="allh2"></div>

Use jQuery after the content loaded

This is some additional info. If you want to perform more jQuery actions on the loaded content, you can use the callback from the load function. What does this means? It means that you write you jQuery like this:

$("#allh2").load("http://www.yourdomain.com/loader.php h2",{want2Read:"http://www.want2Read.com/"},function(){
//Write your additional jQuery script here, for instance:
$("h2").css("background-color","#ff0");
});

As you see, you can now access the h2 elements with jQuery. If you would have written it after the load function, instead of using it in the callback, it would have had no effect on the loaded images. All words. Just copy paste and let the fun begin! Copy extra easy from the article with complete html and php script listings.