How to scrape relative images - javascript

If i look at Amazon Button to add items to lists on their site - you can see it here:
http://www.amazon.co.uk/wishlist/get-button
How does it work? I'm pretty sure it scrapes the page somehow but it seems to get every image whether its a flash image, jpg or anything, even when the site in question uses relative img src as opposed to absolute full site urls
Example page below, all images shown are jpg which is cool but all img src are relative meaning no "http://blah.com" before them
http://gadgets.guardianoffers.co.uk/p-788-Casio-Solar-Powered-Edifice-Watch.html
Is there a better way to get images other than parsing the html source?
Or are they just doing a million ifs if they don't get a hit straight away?

It looks like it parses the HTML of the page and looks for what is semantically identified as the primary image, name and price. For example, if you look at a page that doesn't have any ecommerce products, for example: http://www.theglobeandmail.com/ it takes the page h1 element as the product name and the primary image (front page story image) as the product image.
So behind the scenes they are doing a lot of guessing. Using HTML 5 semantic markup, you could establish a standard for this kind of thing, but unless everyone is using it, you are just making educated guesses.

Related

Loading a link multiple times (at different times)

I have an exercise in which I need to make a page for my school, in this exercise I am tasked with making a page in which the user will be able to see faces from everyone in the class. I wanted to think "a little outside the box" and use https://thispersondoesnotexist.com to generated different faces.
I found https://fakeface.rest that allows me to give directions to thispersondoesnotexist.com allowing me to set an age range and a size for the image https://fakeface.rest/thumb/view?minimum_age=16&maximum_age=25
Here is my issue however: The page is loading every links at the same time and displaying the same image multiple times like this:
That's why I wanted to know if there was a way for me to load the two images at a different time so that they show a different "person" each time.
It would be preferable to avoid using js (html and CSS) but if this is the only solution then so be it: I'll use it
Ps: I tried using eager/lazy loading but that didn't work
Here I added an additional garbage parameter to each url, to make the urls different:
<img src="https://fakeface.rest/thumb/view?minimum_age=16&maximum_age=25&blart1">
<img src="https://fakeface.rest/thumb/view?minimum_age=16&maximum_age=25&blart2">
<img src="https://fakeface.rest/thumb/view?minimum_age=16&maximum_age=25&blart3">
<img src="https://fakeface.rest/thumb/view?minimum_age=16&maximum_age=25&blart4">
They actually tell you how to do that with the API:
If you want to insert multiple different faces and prevent the browser caching then you can append any number or random string to the end of the endpoint as follows:
https://fakeface.rest/face/view/1?gender=male
https://fakeface.rest/face/view/anythingcangohere_theapidoesntdoanythingwithit?gender=male
Source: inserting into html (scroll past the image)

how to manage,speed up and preload all the images on the page?

Okay, this has been my headache for long enough. I am learning to build a dynamic news/blog website which derives image sources from MySQL database. There are different section on the website which pick images from same table on database by different tags. Most of the images I use are from external sources like google, yahoo, etc. So my questions are:
Where do you keep your images? I mean should I use images from external sources or should I save image in my website directory? Or a cloud service like one drive?
How do you preload all the images on website? Because on my site they load really slow?
How to show just empty dives until the images are loaded, like Facebook does.
If the images are on other websites (of which images I am stealing) are optimised? If so then do I still need to save and optimise it again?
A cloud service would be expensive because of the quantity of images you will have and external spurces is a big no. I will always choose to put them in my website directory
Once they put the content offline or block access, your site will be broken. – Manuel Otto
I don't know about jquery, but: preload images with jquery
Javascript, DOM. The example at the bottom is completely adjustable to how you want to show the images.
I would say: don't
This is just an example.
document.body.addEventListener("load", myFunction);
function myFunction() {
document.getElementById("allMyImages").style= "background-image: src("myImage.jpg");";
}
It triggers myFunction when the webpage has been fully loaded.
Keep your own images on your own server. Don't rely on external sources to always be up/functional. But also, be careful of using copyrighted images/graphics.
You can use javascript to hide and show your page when the document has fully loaded. If you have too many images, lazyload can be an option so that you don't put too much strain on the users connection.
Specify a width and height for the container to keep the proportions while the image loads
I'm guessing the output is optimized so the 'stolen' one should be too

Javascript Image Gallery

(I have limited coding experience)
I have a template file for a website and currently the image gallery for the site opens in a new page, I would like instead for the image gallery to not open additional pages/tabs and instead contain images in rows of five with one large main image under the rows all within the same page, I would like the main image when scrolled over with the mouse it zooms in on the picture Also when you click on the smaller additional images (in rows of five) it will change the main bigger image to the image that was clicked and allow the zoom in feature as well.
What are the tags I need to place in the template file (in the link below) and where do I put the tags?
Shown below is the current tags in the template
This is the picture gallery tags in the template file of the site:
<!-- picture gallery -->
<script type="text/javascript">myThumbs = ##CST_ITEM_IMAGE_ARRAY_T##;myPix = ##CST_ITEM_IMAGE_ARRAY_M##;</script>
Here is a link to the template file and a pdf of what I am trying to accomplish
http://sdrv.ms/UCHk8z
Here is what the current image gallery looks like now that needs to be changed to not open a new window
http://www.ebay.com/itm/4-Behringer-B208D-Active-800-Watt-2-Way-PA-Speaker-Systems-8-Woofer-/390478326914?pt=US_Pro_Audio_Speakers_Monitors&hash=item5aea526c82
I am not proficient with programming I understand some things but not how it all flows together, I only know basic links and tags so thank you everyone for your help, I greatly appreciate all the responses. I have been Google searching everything to no success.
According to my understanding of your question I think you require something like Thumbnail gallery , if so refer the below url
http://www.queness.com/post/3141/10-image-galleries-jquery-script-with-thumbnail-filmstrip
so I have choose one ( http://www.robertnyman.com/picture-slides/) to use for your purpose right so by that 80% of work is done just download the demo of that and is it will be easily understandable, in your case you can see 3 links in demos click on the one you like and download it and use it
so you have downloaded the file using the picture gallery link, so you will get a zip file which consists of gallery and _Macosx don't bother about the Macosx.
Now go into the gallery file in that there will be a index.html,css and required js, copy them where you require and if you see the index html there will be a div which consists of Picture slider container class div, complete the copy the div and paste it where you require.... Thats it :D
Note: Make sure you give the correct paths to the images, thumbnails, css and js
Hope this helps

General questions about #! hashbang urls and am I using them correctly

I'm in the process of writing a website that includes a reasonably large gallery. First page of the gallery the user will be displayed a bunch of thumbnail images with a url of: website.com/gallery.php
When they click a thumbnail image, if javaScript is turned off it will follow the url in the href and go to a page called gallery.php?img=67. If javaScript is turned on the href click will not execute, instead it will perform an ajax request to display the larger image and some text about it. The url changes to gallery.php#!img=67. The back button will take you back to the thumbnails, pressing f5 will keep the big image displayed with the text. If someone copies the address with the #! and sends it to someone they will get the same image displayed (assuming the receiver has javaScript turned on).
My question is, have I sorted this out correctly for google to index the individual gallery pages? Will google index them twice, once with the ?img=67 and once with the #! and if so is that a bad thing? I'm using javaScript/Ajax to preload the larger images once the thumbnail page is loaded for speed. I've read a lot of backlash against using hasbang ajaxy things recently and wondering if you think can justify using it here?
Google will follow your links and index the ?img=67 pages, and will not index your #! pages, because it can't see those links. You can tell Google about those links by doing the following:
Add <meta name="fragment" content="!"> to the <head> of your document, and
Handle requests for /?_escaped_fragment_= by returning an "HTML Snapshot" of your page that has all your #! links in the <A> tags.
Also, to make the most of this feature, you should also handle requests for /?_escaped_fragment_=img=67 by returning an HTML snapshot page with the big image displayed. Remember, GoogleBot doesn't execute Javascript. Using the #! URL tells Google to retrieve an alternate version of the page (A version where #! has been replaced with ?_escaped_fragment_=) that should render without Javascript.
THe use of #! tags in URLs are in the news recently, with updates to a well known blog.
http://isolani.co.uk/blog/javascript/BreakingTheWebWithHashBangs has a good description of what they are best used for - and when they can be bad. I think your use in a gallery is quite valid.
In short, a URL like http://lifehacker.com/#!5753509/hello-world... is rewritten by Google, and other compatible web-spiders as http://lifehacker.com/?_escaped_fragment_=5753509/hello-world...
Google may index them twice, but you can also use the canonical meta-tag to ensure it knows what the 'official' copy is.
Possible solution (as suggested in http://isolani.co.uk/blog/javascript/BreakingTheWebWithHashBangs) is to use regular links and translate them to #! in the OnClick() event. This ensures that the site displays regular links and not the shitty #!.
It does mean extra work for the server though, since the server needs to support both versions (the Ajax version and the regular version), but I think it worth it.These #! are so ugly..

Ajax entire page - display only one div and retain CSS and other header material?

A client wants a merch shop on their site, and has set one up. I could iFrame in the whole page to the merch page, but frankly the merch site is an eyesore, and their site has a very particular feel to it. So I'm considering using an AJAX GET to grab the whole page, then javascript to display only the div with the merchandise in it. However, there are a lot of javascript includes (etc) on the merch site that I'd need to make sure are still present for the div to work correctly.
Any feeling on if this would work or not? Would the displayed div take its stylesheet and scripts from the AJAX'd page? Can I put the div in an iframe instead?
Opinions?
It sounds like an ugly solution. Isn't it better to do this serverside instead, for example let a PHP script read in the page and to whatever magic it takes to display it?
Using AJAX to load entire pages is ugly for a couple of reasons, including:
It breaks the URLs (can be worked around but requires extra work)
It's hard for search engines to crawl your site
It breaks some GUI elements in the browser, such as loading visualisations
looks like you can use jquery load function http://docs.jquery.com/Ajax/load

Categories