Zillow Image Downloader

zillow.js

/**
 *  NOTE: this specifically works if the house is for sale since it renders differently.
 *  This will download the highest resolution available per image.
 */ 



/**
 * STEP 1: Make sure to *SCROLL* through all images so they appear on DOM.
 * No need to click any images.
 */



/**
 * STEP 2: Open Dev Tools Console.
 * Copy and paste code below
 */
const script = document.createElement('script');
script.src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js";

script.onload = () => {
  $ = jQuery.noConflict();
  
  const imageList = $('ul.media-stream li picture source[type="image/jpeg"]').map(function () {
    const srcset = $(this).attr('srcset').split(' '); // get highest res urls for each image
    return srcset[srcset.length - 2]
  }).toArray();
  
  const delay = ms => new Promise(res => setTimeout(res, ms)); // promise delay
  
  // get all image blobs in parallel first before downloading for proper batching
  Promise.all(imageList.map(i => fetch(i))
  ).then(responses =>
    Promise.all(responses.map(res => res.blob()))
    ).then(async (blobs) => {
      for (let i = 0; i < blobs.length; i++) {
        if (i % 10 === 0) {
          console.log('1 sec delay...');
          await delay(1000);
        }
        
        var a = document.createElement('a');
        a.style = "display: none";
        console.log(i);
        
        var url = window.URL.createObjectURL(blobs[i]);
        a.href = url;
        a.download = i + '';
        document.body.appendChild(a);
      a.click();

      setTimeout(() => {
        window.URL.revokeObjectURL(url);
      }, 100);
    }
  });
};

document.getElementsByTagName('head')[0].appendChild(script);

@medosf Which above script is this for?

Hi all,

@wtcipher, @ANONDOTCDOT, @eek2022, @medosf,

Had to edit a lot of it, but this version that I made now works perfectly in one try:

const script = document.createElement("script");
script.src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js";

script.onload = async () => {
  const $ = jQuery.noConflict();

  const delay = (ms) => new Promise((res) => setTimeout(res, ms));

  const imageList = [];

  while (
    $(".photo-carousel-icon-wrapper .icon-arrow-right").length ||
    $(".photo-carousel-icon-wrapper .icon-reload").length
  ) {
    await delay(200);

    if ($(".photo-carousel-icon-wrapper .icon-reload").length) {
      break;
    }

    const srcset = $('.hdp-gallery-image-content .image:visible source[type="image/jpeg"]').attr("srcset");
    if (srcset) {
      const srcs = srcset.split(" ");
      const src = srcs[srcs.length - 2];

      if (!imageList.includes(src)) {
        imageList.push(src);
      }
    }

    $(".photo-carousel-icon-wrapper .icon-arrow-right").parent().click();
  }

  const responses = await Promise.all(imageList.map((src) => fetch(src)));
  const blobs = await Promise.all(responses.map((res) => res.blob()));

  for (let i = 0; i < blobs.length; i++) {
    if (i % 10 === 0) {
      console.log("1 sec delay...");
      await delay(1000);
    }

    const a = document.createElement("a");
    a.style.display = "none";

    const url = window.URL.createObjectURL(blobs[i]);
    a.href = url;
    a.download = `${i}`;
    document.body.appendChild(a);
    a.click();

    setTimeout(() => {
      window.URL.revokeObjectURL(url);
    }, 100);
  }
};

document.head.appendChild(script);

Just open in DevConsole, run it - and you'll see the following:

For educational use only.