Skip to content

Instantly share code, notes, and snippets.

@henrik
Last active August 28, 2016 08:22
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save henrik/2881571 to your computer and use it in GitHub Desktop.
Save henrik/2881571 to your computer and use it in GitHub Desktop.
Bookmarklet to enable saving full-size(?) images from Houzz.com.
// When triggered, adds a small image before other images that represents the full-size image.
// Drag-and-drop it, right-click and save, or click to open.
javascript:$("img.viewImage, img.currentImage, img.space, img[id^=galleryImg], img[class^=browseListImage], .gallery-photo img").each(function() { var newSrc = this.src.replace(/[fs]images\/(\d+).*/, 'simages/$1_0_9-.jpg'); $(this).parents("a").andSelf().first().before("<a href='"+newSrc+"'><img src='"+newSrc+"' width=50></a>") })
@matthewhooper86
Copy link

Hi Henrik,

How do i save your script to a the internet browser? I am not the most techno savvy, however i have tried a few things without much success.

I have tried just drag and dropping the code on the Bookmark bar; i have tried making a notepad document with a .js at the end.. no luck. please help

I am using Mozilla Firefox.

I normally use google chrome and they dont seem to support Bookmarklets.

@henrik
Copy link
Author

henrik commented Oct 20, 2013

@matthewhopoper86 Sorry, didn't see your comment until now.

Copy the code: everything on line 4 above.

In Chrome, click Bookmarks > Bookmark This Page. Hit "Edit". The "URL" should be what you copied. Make sure it still starts with "javascript:" The name could be anything you like. If the bookmark is in your bookmarks bar, it's easy to trigger with a click.

Hope that helps!

@sbwoodside
Copy link

This will give you the maximum image size available on houzz, which is 1600 pixels wide. Add .replace(/_\d-/,'_16-') after your existing replace(). So you get:

javascript:$("img.viewImage, img.currentImage, img.space, img[id^=galleryImg], img[class^=browseListImage], .gallery-photo img").each(function() { var newSrc = this.src.replace(/[fs]images/(\d+).*/, 'simages/$1_0_9-.jpg').replace(/_\d-/,'_16-'); $(this).parents("a").andSelf().first().before("") })

@sbwoodside
Copy link

OK that didn't paste properly so, see my fork at https://gist.github.com/sbwoodside/61fe09b41e20bea93971

@joel-daros
Copy link

Isn't work. When clicked just show a blank page with "[object Object]".
Mozilla Firefox 35.0 (windows 7).
When pasted to the bookmark, mozilla changes the blank spaces with %20:

javascript:$("img.viewImage,%20img.currentImage,%20img.space,%20img[id^=galleryImg],%20img[class^=browseListImage],%20.gallery-photo%20img").each(function()%20{%20var%20newSrc%20=%20this.src.replace(/[fs]images\/(\d+).*/,%20'simages/$1_0_9-.jpg').replace(/_\d-/,'_16-');%20$(this).parents("a").andSelf().first().before("<a%20href='"+newSrc+"'><img%20src='"+newSrc+"'%20width=50></a>")%20})

@alastairstokes
Copy link

Hey, I had another go at this using yours as the basis. Images now load straight from the ideasbook. See here: http://alastairstokes.com/whouzzhouzz.html

javascript:$("img[id^=galleryImg").each(function() { var newSrc = this.src.replace(/^(http://st.hzcdn.com/fimgs/)([a-z0-9]{16}_)([0-9]{4})(-w\d+-h\d+-b\d+-p\d+-)(-)([-._a-z0-9]*)/g, 'http://st.houzz.com/simgs/$29-$3/$6');$(this).parents("a").andSelf().first().before("") })

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment