Need help downloading zoom image on Nike website


Nov 28, 2010
22,668
27
located
I looked at the source for JPG, but didn't know it was buried like this, but I also don't write websites. Learnt something new, thank you. :)
 

jared_kipe

macrumors 68030
Dec 8, 2003
2,967
1
Seattle
I looked at the source for JPG, but didn't know it was buried like this, but I also don't write websites. Learnt something new, thank you. :)
Yeah, I've never seen anything quite like it before either.

In Safari, you can turn on the developer menu in the Preferences->Advanced.
Then you can right click an item on the screen and hit inspect element. For things like an image you can click the url that is in the src and it will take you to the 'Resources' tab where you can see information about that image and a list of other images loaded.

From there I saw the pieces that it used to stitch together an image and started experimenting with the query parameters until I got too big and it started saying invalid image size.
 

jared_kipe

macrumors 68030
Dec 8, 2003
2,967
1
Seattle
Thanks, that is ****ing nifty, I never used it to look for this.
Well allow me to blow your mind a little bit more ;)

Not only can you right click on an element and "Inspect Element". Once you have the pane open, you can hover your mouse over DOM elements and Safari will highlight the hovered segment in blue and even give size calculations.

Clicking on an element in the DOM will show the hierarchy of CSS rules that are applied to that element and which CSS files they came from. You can live toggle on and off rules, as well as live edit them. The selector rules will automatically apply to any element they should apply, so its easy to test styling on things like lists or paragraphs. You can also edit the just the one elements style, which is great for just testing things like putting a margin or border around a select element.

Going over into the Console tab (or if the bar isn't up hitting command+option+c) here you can type, or paste in javascript and have it automatically run on the page. This is great for hand tuning some simple javascript like finding a form and copying its value or something. If the Javascript has return types, it can be very useful, like typing "document.forms" will display every form tag with little drop down triangles.

You'll note that you can use any JS library loaded by the current document. Which is great, because usually jQuery is available to you. And if it isn't you can just create and append a new script element to load it from google.
 
Nov 28, 2010
22,668
27
located
Well allow me to blow your mind a little bit more ;)

technobabble of the worst kind
And next time you are telling me, I can zoom and enhance. Yeah. ;)

Thanks, that hovering element stuff (yeah, automotivated word search / thesaurus is deactivated currently) is helpful, but that other stuff, while I understand what it means, I don't understand what it means.
I guess I will browse and inspect more now and see all the dirty code.

Back in the days when I was writing HTML (1990s) it was really simple and one could see a clean code or a Frontpage code. Even Dreamweaver made some stuff I never understood. But since I stopped HTML before CSS and all that other stuff was released, I am a bit blind when it comes to that.

Thanks again.
 
Nov 28, 2010
22,668
27
located
This is the full screen size picture. click open the thumbnail. Image Dimensions 1426px x 1018px.
Or you can even go bigger, cropped the white away though and got 1607 x 726 pixel out of it (compared to your 1152 x 530 pixel if it would be cropped):

Anyway, the solution was already posted 13 days ago. Maybe some people are just blind?