How to get popup image addresses

[ericyao]

Describe the problem.
I want to extract popup image urls from a website. I figured out how to get to individual image so far, but it seems the actual image address can't be obtained. Can anyone help? Thanks
For example, here's the page: https://www.justinalexander.com/justin-alexander/collection/wedding-dresses/88108/?order=new_arrival
And here's one of the image addresses I need to get: https://www.justinalexander.com/media/gallery/88108_FC_Justin-Alexander.jpg
(click one of the thumbnails, then right-click popup, "copy image address")

Url: https://www.justinalexander.com/justin-alexander/collection/wedding-dresses/?order=new_arrival
Sitemap:
{"_id":"jawebsite","startUrl":["https://www.justinalexander.com/justin-alexander/collection/wedding-dresses/?order=new_arrival"],"selectors":[{"id":"products","type":"SelectorElementScroll","parentSelectors":["_root"],"selector":"a.collection-item__link","multiple":true,"delay":"500"},{"id":"link","type":"SelectorLink","parentSelectors":["products"],"selector":"parent","multiple":false,"delay":0},{"id":"thumbslink","type":"SelectorElementClick","parentSelectors":["link"],"selector":"a.item-main-slider__link","multiple":true,"delay":0,"clickElementSelector":"img.item-main-slider__img","clickType":"clickOnce","discardInitialElements":"do-not-discard","clickElementUniquenessType":"uniqueText"}]}

[leemeng]

There're a few ways to get this info. All the popup image URLs will appear in the HTML after you click on any image, so there is no need to view all images. So you could grab them with type: Element atribute. You'd still need to prepend the site Url to the scraped Urls, https://www.justinalexander.com
e.g. https://www.justinalexander.com/media/gallery/88108_FC_Justin-Alexander.jpg

{"_id":"justinalexander-attrib","startUrl":["https://www.justinalexander.com/justin-alexander/collection/wedding-dresses/88108/?order=new_arrival"],"selectors":[{"id":"Name","type":"SelectorText","parentSelectors":["_root"],"selector":"h1.pdp-desc__title","multiple":false,"regex":"","delay":0},{"id":"Style","type":"SelectorText","parentSelectors":["_root"],"selector":"h2.product-item-number__style-num","multiple":false,"regex":"","delay":0},{"id":"Click first image","type":"SelectorElementClick","parentSelectors":["_root"],"selector":"div.image-wrapper","multiple":false,"delay":"3000","clickElementSelector":"li:nth-of-type(1) img.item-main-slider__img","clickType":"clickOnce","discardInitialElements":"do-not-discard","clickElementUniquenessType":"uniqueText"},{"id":"grab attrib img src","type":"SelectorElementAttribute","parentSelectors":["_root"],"selector":"#pdpPhotoFull > div > div > div > div > div.bx-viewport > div > li > img","multiple":true,"extractAttribute":"src","delay":0}]}

If you need all the data in one line, you can use either type: Grouped or HTML, but you will need to do post-processing to extract the Urls. The example below has both types:

{"_id":"justinalexander_group_n_html","startUrl":["https://www.justinalexander.com/justin-alexander/collection/wedding-dresses/88108/?order=new_arrival"],"selectors":[{"id":"Name","type":"SelectorText","parentSelectors":["_root"],"selector":"h1.pdp-desc__title","multiple":false,"regex":"","delay":0},{"id":"Style","type":"SelectorText","parentSelectors":["_root"],"selector":"h2.product-item-number__style-num","multiple":false,"regex":"","delay":0},{"id":"Click first image","type":"SelectorElementClick","parentSelectors":["_root"],"selector":"div.image-wrapper","multiple":false,"delay":"3000","clickElementSelector":"li:nth-of-type(1) img.item-main-slider__img","clickType":"clickOnce","discardInitialElements":"do-not-discard","clickElementUniquenessType":"uniqueText"},{"id":"Image group","type":"SelectorGroup","parentSelectors":["_root"],"selector":"#pdpPhotoFull > div > div > div > div > div.bx-viewport > div > li > img","delay":0,"extractAttribute":"src"},{"id":"grab html","type":"SelectorHTML","parentSelectors":["_root"],"selector":"#pdpPhotoFull > div > div > div > div > div.bx-viewport > div","multiple":false,"regex":"","delay":0}]}

[ericyao]

Thank you for the help. It works! It's easy enough to combine the whole url in Excel. My question is how did you find the attribute "#pdpPhotoFull > div > div > div > div > div.bx-viewport > div > li > img", just in case if I encounter similar situations in the future.

[leemeng]

For sites like this, you'd usually need to use Chrome's Inspect feature to look at the source code, plus some basic knowledge of HTML and CSS (I'm still learning as I go).

From there, you can choose Copy selector or Copy JS path.