Share Coding

Tutorials, Problems, Stuffs …

Script of getting all the pictures’ URL of Photobucket’s album in jQuery

Since the PHP script needs a PHP server for compiling, a jQuery version has been made for reference.
Javascript do not support cross-domain fetching source, but some libraries did helped on those issues.

Click here for Demo

jQuery Plugin: cross-domain-ajax
https://github.com/padolsey/jQuery-Plugins/ And it is depends on jQuery: http://jquery.com/

 
1. We need to include two libraries: jQuery and cross-domain-ajax(jQuery Plugin)

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="https://raw.github.com/padolsey/jQuery-Plugins/master/cross-domain-ajax/jquery.xdomainajax.js"></script>

 
2. Here is the main code.
We still use http://s283.photobucket.com/albums/kk285/konnarak_1608/romantic/ for an example:

$(document).ready(function() { // Start jQuery

	var pbURL = 'http://s283.photobucket.com/albums/kk285/konnarak_1608/romantic/'; // Album Link

	$("body").append('<div id="pbContainer"></div>'); // Create an empty div for store the album
	$('#pbContainer').hide().load(pbURL); // Make the div invisible and start to load the album

	// Create a timer to check if the album has loaded
	var loading = setInterval(function() {
		if($("#pbContainer").html().length != 0) {

			clearInterval(loading); // Stop this timer tf the album has loaded

			// Find all the images of the album
			$('#pbContainer #thumbContainer img').each(function(){

				var imgURL = $(this).attr("src") + ""; // Get all the images' URL
				if(imgURL.indexOf("th_") != -1) { // Sieve all the thumbnail images

					// Convert all the thumbnail images to original images
					$("body").append(imgURL.replace("th_", "") + "<br />");
				}
			});
			$("#pbContainer").html(""); //Clean the container
		}
	}, 2000); // Timer every 2 seconds

}); // End jQuery

 
3. After all, the result is exactly like the PHP script before.
Result

Advertisements

2 responses to “Script of getting all the pictures’ URL of Photobucket’s album in jQuery

  1. Pingback: How to Build a Photobucket Album Viewer Extension of Chrome « Share Coding

  2. pron search engine 2013/02/20 at 4:50 pm

    I am really loving the theme/design of your site.
    Do you ever run into any browser compatibility problems?
    A couple of my blog readers have complained about my blog not operating correctly
    in Explorer but looks great in Chrome. Do you have any ideas to help fix this problem?

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: