Discussion on Craigslist image preview | Userscripts.org

Images all load before able to start another search, replied by Jeffrey Palm

Jeffrey Palm — Wed, 06 Jan 2010 15:03:52 +0000

Talk to Mozilla, this is a browser issue.

Images all load before able to start another search, replied by Cereal

Cereal — Sun, 03 Jan 2010 01:00:23 +0000

I love this script, but I've noticed an annoying behavior in it. When you either click on a category or attempt to begin another search, at which time images begin loading on the page, the browser/script wants to allow all of the images to load before you can start another search. In other words, if you search and images are still loading then you change your mind and want to immediately search again, you have to wait for the whole page and all preview images to load before it will begin the next search. I'd love to see a modification of this behavior so beginning a new search will interrupt the current process and begin the next, without waiting for the entire 100 posts with images to load.

Thanks for the awesome script!

bug fix and my personal modifications, replied by Jeffrey Palm

Jeffrey Palm — Sat, 02 Jan 2010 02:11:25 +0000

New version is uploaded here and on my site. Thanks for the feedback, hope it's helpful for you.

bug fix and my personal modifications, replied by slwf

slwf — Fri, 01 Jan 2010 19:23:32 +0000

You missed a place when adding the regex pattern. You need to also add it to line 89.
s = s.replace(/img [^>]*src=/g,"");

I also added the space between the img and the [^ on line 73.
if (m = details.responseText.match(/img [^>]*src=\"([^\"]+)\"/gi)) {

bug fix and my personal modifications, replied by Jeffrey Palm

Jeffrey Palm — Fri, 01 Jan 2010 14:36:35 +0000

Thanks a lot, I've uploaded the new version to userscripts and to my site: http://jeffpalm.com/craigslist/...thanks, again.

bug fix and my personal modifications, replied by dado

dado — Thu, 31 Dec 2009 23:44:41 +0000

This is my fix for when the image has extra attributes (i.e. border) between "img" and "src".
Just modify the pattern and add "[^>]*" before "src",
e.g. /img [^>]*src=\"([^\"]+)\"/gi
The reason I didn't use .* is that some posts have multiple images on the same line and I don't think javascript supports non greedy matches.

I've also added a few modifications to suit my needs.
I'm looking for rentals an San Francisco's North Bay. There are a few towns I'm sure I don't want to move to so I've added a list of ignoredTowns and the code yanks those out of the page.

Also, some realtors include logos and other crap. I'm filtering those images out too, but I need to add to that list every now and then (i.e. requires some maintenance)

The last thing I'm still working on is to filter out over posting by some realtors.
The only consistent commonality between the posts are the images, so I'm storing their md5 and removing subsequent matches.

All this is hardcoded. I might release my fixes if/when I expose all that in the UI.
That is, if there's any interest.

Archived Comments, replied by Lawk Salih

Lawk Salih — Fri, 12 Sep 2008 17:37:45 +0000

Neat script. HOWEVER, when an ad uses postlets, it returns terrible results.

Check out http://washingtondc.craigslist.org/rea/ for confirmation when you have this script installed.

Archived Comments, replied by Kite

Kite — Tue, 18 Mar 2008 21:54:51 +0000

Since Jeffrey doesn't seem to be updating his wonderful script, I posted my bug fixes & improvements, plus the Canadian fix (thanks Rich!) as a new script, "Craigslist image preview 2". It now filters out tiny images, and enlarges the thumbnails on mouseover.

http://userscripts.org/scripts/show/24089

Archived Comments, replied by macm

macm — Mon, 17 Mar 2008 14:54:56 +0000

Kind of the same thing, but works at http://www.craigstoolbox.com

Archived Comments, replied by Profmuggs

Profmuggs — Tue, 26 Feb 2008 19:25:00 +0000

whoops, that should have been:

replace line 78...
for (j=0; j<m>

with... for (j=0; j<5>

Archived Comments, replied by Profmuggs

Profmuggs — Tue, 26 Feb 2008 19:21:51 +0000

Lately, the only listings that have more than 4 images are the mass postings by used car dealers and real estate agents. I find these listings annoying so I limited the number of pictures my browser displays to 6. This way I can tell the mass postings apart from the casual users who are content with the 4 image fields supplied by Craigslist. To do this I replaced line 78....

for (j=0; j<m>

with...

for (j=0; j<6>

Archived Comments, replied by sqladmin

sqladmin — Tue, 19 Feb 2008 19:13:16 +0000

A W E S O M E !!!!!

this script rocks! craigslist is sooo much
better now.

Archived Comments, replied by Kite

Kite — Tue, 22 Jan 2008 09:49:38 +0000

Bug fix #1 (missing thumbnails):
the image preview won't appear if the original img tag in the ad has any attribute (style, border, etc.) before the source attribute. This can be fixed like so:

line 71, change (/img src=\"([^\"]+)\"/gi)) to
(/]+)>/gi))

line 84 & 85 change to: s = s.split('src="')[1]; s = s.split('"')[0];

Bug fix #2 (small pics blown up):
Small images won't be enlarged if we change width & height to maxWidth & maxHeight in lines 105, 107, 166 & 168.

Improvement #1 (small-pics clutter):
To filter out small images, so that they don't even appear, add this code between lines 107-108:
img.addEventListener("load", function() { if (this.height < size) { this.parentNode.parentNode.removeChild(this.parentNode); } },true);
NOTE: improvement #1 will not work without bug fix #2!

Improvement #2 (enlarge thumbnail on mouseover):
right after the last event handler, add this code:
img.addEventListener("mouseover", function() { this.style.maxHeight = 100 * size + "px"; if (!keepAspectRatio) { this.style.maxWidth = 100 * size + "px"; } },true); img.addEventListener("mouseout", function() { this.style.maxHeight = size + "px"; if (!keepAspectRatio) { this.style.maxWidth = size + "px"; } },true);

(100 is an arbitrary large number that sets the size ceiling high enough to not squash any pics.)

Archived Comments, replied by Rich Lafferty

Rich Lafferty — Sun, 30 Dec 2007 01:29:51 +0000

Canadians: The script has ".org" hardcoded, that's why it doesn't work on *.craigslist.ca. It's not enough to just add *.craigslist.ca to the list of sites it's applied to. You need to edit the script itself.

Currently line 180 in the showImages() function reads

    if (link.href && link.href.match(/.*craigslist.org.*\/\d+\.html$/)) {

Change that to read

     if (link.href && link.href.match(/.*craigslist.*\/\d+\.html$/)) {

You might as well edit the @include on line 5 while you're in there.

I suppose the same applies for other ccTLD craigslists, if those exist.

Archived Comments, replied by tobias_funke

tobias_funke — Sat, 29 Dec 2007 03:24:44 +0000

Great script, thanmks. Two things:

How, exactly, does one "resize the image previews"?

Also, I agree with the previous commenter. The enlarged small images ought to be fixed.

Archived Comments, replied by Kite

Kite — Fri, 21 Dec 2007 02:23:53 +0000

Works great! One little quibble, some people put tiny images in their ads, which get blown up huge & get in the way. This problem can be fixed by adding an if statement around the resizing code, like so:

if (img.height > size) {
if (!keepAspectRatio) {
img.style.width = size + "px";
}
img.style.height = size + "px";
}

(First and last lines are new code). It needs to be done in both newFunction and changeSizes. I tested it, seeemed to work, but was a little buggy in the changeSizes function. I'm new to javascript, so I probably missed something...

Archived Comments, replied by Stoney

Stoney — Thu, 08 Nov 2007 23:53:18 +0000

Just wondering if it is still working for Craigslist Canadian postings. I can get it too work for all of the American cities, but when I try it with Canadian cities, it no longer works.
IE. http://toronto.craigslist.ca/sys/ no pictures at all. If you don't mind could someone click on the link and let me know if the images show up. Thanks Stoney

Archived Comments, replied by nastajus

nastajus — Thu, 18 Oct 2007 04:47:48 +0000

works perfectly in my single page test at http://toronto.craigslist.org/search/sss?query=hex

Archived Comments, replied by Martin Jessen

Martin Jessen — Thu, 18 Oct 2007 03:25:05 +0000

This works fine except for when looking at cars and trucks, the first image is a blank picture!
See example:
http://silenceisdefeat.org/~deltron/craigslist.png

Archived Comments, replied by Alan Hogan

Alan Hogan — Sat, 09 Jun 2007 19:27:46 +0000

Doesn't work in Opera... Would love it if you could make it work in Opera?

Archived Comments, replied by fan

fan — Sat, 09 Jun 2007 17:44:15 +0000

This is a great script!
Would there be any way to have the images show in real size on mouse over?

Archived Comments, replied by Tetsuya Saito

Tetsuya Saito — Tue, 16 Jan 2007 05:33:07 +0000

Works! You just need to wait a little as it retrieves them.

Archived Comments, replied by Patrick 3

Patrick 3 — Sat, 25 Nov 2006 17:20:53 +0000

This script would be great... if it weren't so handicapped by only working on real estate pages. I don't understand how/why that is, I browse for furniture all the time, but houses only once in a while.

Archived Comments, replied by NoWai

NoWai — Tue, 14 Nov 2006 07:17:35 +0000

this doesnt work.

Archived Comments, replied by Swakky

Swakky — Wed, 01 Nov 2006 06:08:49 +0000

It worked perfectly for me, thanks!