Create a Contact Sheet of an iStockphoto Lightbox

This video will show you how to download a lightbox of images from inside iStockhphoto to quickly create a contact sheet.

Recently I created a lightbox in iStockphoto and I was looking for a way to quickly download the images.

I was trying to put together a contact sheet PDF so that I could discuss image options with a client.

Surprisingly this feature does not exist and so I had to open and save each image individually. The more images you have the more time you lose.

So I then searched the iStockphoto forums for possible solutions and found a script written by Sean Locke that eliminates the repetitive steps.

Before You Start You Will Need

A lightbox saved inside iStockphoto
Firefox browser installed
Firebug plugin installed
Contact Sheet Script Script written by Sean Locke (also provided at the end of this post)

When Ready Follow These Steps

Open Firefox
Open Contact Sheet Script by Sean Locke
Login to iStockphoto and navigate to the lightbox you would like to download
Open Firebug and make sure the console tab is selected
Select the entire Sean Locke script and copy to your clipboard
Return to the lightbox page and paste the script in the console tab in Firebug
Click run
You should then see a gray button above your lightbox that says "Create tab of only images", Click it
Save the page that opens as a complete web page to your computer
You now have a folder of all the images inside your lightbox

JavaScript

// ==UserScript==
// @name           IS_search_imageOnlyPage
// @namespace      sjlocke
// @include        http://www.istockphoto.com/search*
// ==/UserScript==
// upon visiting a lightbox search page, a button will show.
// clicking it will open a new tab with all the images from that page

function showImagesOnly() {

	var html = "<head></head><body><table>n";

	// Show royalties for your files on this page
	var nodeList = document.getElementsByTagName("div");
	// Find divs like srItem_15084285
	patternMatch = /srItem/gi;
	var numInRow = 0;
	for (i=0;i<nodeList.length;i++) {
		// find images on page
		if (nodeList[i].id.match(patternMatch)){
			if (!numInRow) html += "<tr>n";
			// Trying to get:
			///file_thumbview_approve/8828681/1/8828681-old-movie-projector.jpg
			
			// skip over flames and icons
			var preThumbImages = nodeList[i].childNodes[0].childNodes.length;
			preThumbImages -= 1;
			// /stock-photo-8828681-old-movie-projector.php
			var imageLink = nodeList[i].childNodes[0].childNodes[preThumbImages].href;
			if (!imageLink) alert (preThumbImages);
			imageLink = imageLink.replace("http://www.istockphoto.com/stock-photo-","");
			imageLink = imageLink.replace("http://www.istockphoto.com/stock-illustration-","");
			imageLink = imageLink.replace("http://www.istockphoto.com/stock-video-","");
			imageLink = imageLink.replace("php","jpg");
			var imageString = "/file_thumbview_approve/";
			var imageNumber = nodeList[i].id.slice( nodeList[i].id.indexOf('_')+1 );
			imageString += imageNumber + "/2/" + imageLink;
			html += "<td>n<img src="http://www.istockphoto.com"+imageString+"" />n";
			html += ("<br />ncontent id: "+imageNumber +"n");
			// find the meta data area div under the content
			var textDataDiv = nodeList[i].childNodes[1];
			if (textDataDiv) {
				for (j=0;j<textDataDiv.childNodes.length;j++) {
					if ((textDataDiv.childNodes[j].className == "srTitle trnct")  && (textDataDiv.childNodes[j].style.display != "none"))
						html += ("<br />content title: " + textDataDiv.childNodes[j].innerHTML + "n");
					if ((textDataDiv.childNodes[j].className == "srContributor trnct") && (textDataDiv.childNodes[j].style.display != "none"))
						html += ("<br />content author: " + textDataDiv.childNodes[j].childNodes[0].innerHTML + "n");
					if ((textDataDiv.childNodes[j].className == "srDownload") && (textDataDiv.childNodes[j].style.display != "none"))
						html += ("<br />content downloads: " + textDataDiv.childNodes[j].innerHTML + "n");
				}	
			}
			html += "</td>n";
			numInRow++;
			if (numInRow == 2) {
				numInRow = 0;
				html += "</tr>n";
			}
			//i = nodeList.length
		}
	}
	if (numInRow == 1) {
		html += "</tr>n";
	}
	html += "</table>";
	var newTab = window.open('','_newtab');
	newTab.document.write();
	newTab.document.close();
	element = newTab.document.createElement("div");
	newTab.document.body.appendChild(element);
	element.innerHTML = html;

	// doesn't work in chrome
	//newTab.document.write(html);
	//newTab.document.close();
}

// Create the button and place it
// Find the div at the top

searchTitle = document.getElementById("searchTitle");

var div;
tmp = document.getElementById("searchReturnInterface_div");
if(!tmp){

	element = document.createElement("div");
	element.setAttribute("id", "searchReturnInterface_div");
	element.style.padding = "6px";
	element.style.backgroundColor = "#DDDDFF";
	searchTitle.appendChild(element);
	div = element;
} else
	div = tmp;

element = document.createElement("input");
element.setAttribute("type", "button");
element.setAttribute("value", "Create Tab of only images");
element.setAttribute("name", "showImagesOnly_btn");
element.style.width="300px";
element.style.margin="2px";
element.addEventListener("click",showImagesOnly,true);
// get the parent of the div and add the button
div.appendChild(element);

Share and Enjoy:

Works Cited

Lightbox Contact Sheet and Comp .zip

About the author

I started my career as a print designer and wanted nothing to do with "code". Then slowly I began to learn by reading tutorials online. My learning process has been challenging, yet very rewarding. My goal is to document the lessons I have learned and to encourage other beginners in the field of web design / front-end programming. - Jacob Lett