2

I was wondering how can I make this happen.

I need to take all the images from the external link site and display them in other site. Is is posible to do without jQuery? With a simple javascript or flash?

Anyone can suggest somekind of tutorial's or something?

If javascript, then it has to be very simple code, because I want to make it work in eBay listing's.

Example: In the listing there will be sold a holder for XXX cell phone, and I want to put on the bottom a filmstrip or something similar for the exact same item(from the same category). I want to give it a funcionality so I would need to change only the link to the category and the pictures would be changed automatically. POSIBLE?

Thanks,

Please If I didn't make myself clear, ask and I will explain in more detail's.

Bhargav Rao
  • 50,140
  • 28
  • 121
  • 140
Artur Rain
  • 339
  • 1
  • 5
  • 20
  • but you know how to do it with jQuery? if ebay supports html coding, you might be able to add `` and then write your jQuery script – Jake Long Aug 22 '12 at 19:19
  • well, I tryed adding jquery to ebay, doesn't work. And no, I don't know how to do it with jquery :) – Artur Rain Aug 22 '12 at 19:21

1 Answers1

5

NOTE: The askers has stated this answer does not work INSIDE Ebay listings.
Other than that, it works so well, it'll irritate some 'web-developers' (LOL). I'm leaving it here for now.

I had a sneaky suspicion you did not own/control the external link site, thus to 'take all the images from the external link site and display them in other site' (as asked), would fall under cross-domain security restrictions.

So to in order to regain 'power to the user', just use http://query.yahooapis.com/.
jQuery would not be strictly needed.

EXAMPLE 1:
Using the SQL-like command:

select * from html 
where url="http://stackoverflow.com" 
and xpath='//div/h3/a'

The following link will scrape SO for the newest questions (bypassing cross-domain security bull$#!7):
http://query.yahooapis.com/v1/public/yql?q=select%20%2a%20from%20html%20%0Awhere%20url%3D%22http%3A%2F%2Fstackoverflow.com%22%20%0Aand%20xpath%3D%27%2F%2Fdiv%2Fh3%2Fa%27%3B&format=json&callback=cbfunc

As you can see this will return a JSON array (one can also choose xml) and calling the callback-function: cbfunc.

In your case you would fish for image-links and include them in your page.

Example 2:
As asked in the comments below, this example in pure JavaScript does not only fetch image-url's from a Ebay-store, it also fetches the product-title's and product url's (displaying them as hyperlinked images with product-title as the image's title). As such it also shows how one could dynamically build the yql-string and what one could do with the data that returns.

function cbfunc(json){
   if(json.query.count){
      var data=json.query.results.div;
      var i=0, l=data.length, htm='';
      for(;i<l;i++){
         htm+='<a href="'+data[i].a.href+'">' +
                 '<img title="'+data[i].a.img.title+'"' +
                       ' src="'+data[i].a.img.src+'">' +
              '</a>\n';
      }
      document.getElementById('output').innerHTML=htm;
   } else {
      alert('Error: nothing found'); return false;
   }
}

function fetchEbayStore(url){
   var yql="select a.href, a.img.src, a.img.title" +
           " from html" +
           " where url='" + url + "'" +
           " and xpath='//td/div[@class=\"image\"]'";
   yql="http://query.yahooapis.com/v1/public/yql?q=" +
       encodeURIComponent(yql) +
       "&format=json" +
       "&callback=cbfunc";
   getJSON(yql); //you need to provide getJSON or use a library
}

See this 'quick 'n dirty' jsfiddle to see the above example in action. Remember this is just meant for explanation, not production!

For more info: Read the yahoo's yql-documentation, see the live examples on the right side in the constructor.

GitaarLAB
  • 14,536
  • 11
  • 60
  • 80
  • can you tell me more about it? and yes, I want to retrevie ebay category item photos. – Artur Rain Aug 22 '12 at 19:34
  • I still do not understand how to use it :) Sorry. Can you give me an example with this url 'http://stores.ebay.es/Todo-barato-24h/Galaxy-3-III-I9300-/_i.html?_fsub=3451642014&_sid=183003444&_trksid=p4634.c0.m322' And bare in mind, I can't use jQuery – Artur Rain Aug 22 '12 at 19:41
  • thank's, but in my case it won't help, because I can't use jquery. I need to figure out other way. I think... I don't have a clue. Sh*t – Artur Rain Aug 22 '12 at 19:49
  • I get error's: Query syntax error(s) [line 1:34 required (...)+ loop did not match anything at character '/'] select * from html where url=http://stackoverflow.com nothing more... – Artur Rain Aug 22 '12 at 19:58
  • 1
    holy sh*t that command is awesome – Jake Long Aug 22 '12 at 20:09
  • @Jake Long: brilliant right? Power to the user again :) – GitaarLAB Aug 22 '12 at 20:12
  • @Arturas Strazdas: This will should fix the errors you were getting: `select * from html where url="http://stores.ebay.es/Todo-barato-24h/Galaxy-3-III-I9300-/_i.html?_fsub=3451642014&_sid=183003444&_trksid=p4634.c0.m322%27"` Now let's fish for the correct content! – GitaarLAB Aug 22 '12 at 20:16
  • @Arturas Strazdas: just to get you started: [try this](http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20%0Awhere%20url%3D%22http%3A%2F%2Fstores.ebay.es%2FTodo-barato-24h%2FGalaxy-3-III-I9300-%2F_i.html%3F_fsub%3D3451642014%26_sid%3D183003444%26_trksid%3Dp4634.c0.m322%2527%22%20%0Aand%20xpath%3D'%2F%2Ftd%2Fdiv%2Fa%2Fimg'&format=json&diagnostics=true&callback=cbfunc) hahaha. – GitaarLAB Aug 22 '12 at 20:20
  • @Arturas Strazdas: or this: [`select src from html where url="http://stores.ebay.es/Todo-barato-24h/Galaxy-3-III-I9300-/_i.html?_fsub=3451642014&_sid=183003444&_trksid=p4634.c0.m322%27" and xpath='//td/div/a/img'`](http://query.yahooapis.com/v1/public/yql?q=select%20src%20from%20html%20%0Awhere%20url%3D%22http%3A%2F%2Fstores.ebay.es%2FTodo-barato-24h%2FGalaxy-3-III-I9300-%2F_i.html%3F_fsub%3D3451642014%26_sid%3D183003444%26_trksid%3Dp4634.c0.m322%2527%22%20%0Aand%20xpath%3D'%2F%2Ftd%2Fdiv%2Fa%2Fimg'&diagnostics=true) giving only url's – GitaarLAB Aug 22 '12 at 20:22
  • @GitaarLAB this is cool, really !!! is there any option to do it with changing the url in the code ? So the client woudn´t have to go to query.yahooapis.com ? – Artur Rain Aug 22 '12 at 20:37
  • yes, construct your json query client or server side. Just don't hard-code the link in it. – GitaarLAB Aug 22 '12 at 20:41
  • @GitaarLAB ok, now the stupid question: how do I implement JSON to my HTML code? Damn I feel stupid... – Artur Rain Aug 22 '12 at 20:52
  • Here is a _quick 'n dirty **not meant for 'production'** (but therefore easy to understand)_ [demo in jsfiddle](http://jsfiddle.net/7tC3L/) without jquery, just pure javascript. And, as an added bonus, you can enter a storelink in an inputfield, just like you asked in your comments. – GitaarLAB Aug 22 '12 at 22:21
  • @GitaarLAB this is great !! But in eBay doesn´t work.. Just tryed to see... Unsafe JavaScript attempt to access frame with URL ....... Domains, protocols and ports must match. – Artur Rain Aug 22 '12 at 22:59
  • Updated my answer with a [revised jsfiddle](http://jsfiddle.net/7tC3L/1/), where the sql-like statements are a lot easier to read. @Arturas Strazdas: you asked: `I need to take all the images from the external link site and display them in other site.` Yet if I understand correctly, now you want this to work INSIDE EBAY? Maybe look into the ebay-api then.. – GitaarLAB Aug 22 '12 at 23:09
  • I want it to work in ebay listing's. And I forgot, that also I need an img+url to the product. sh*t – Artur Rain Aug 22 '12 at 23:13
  • Ok, sadly, it was worth a shot. I completely revamped my answer. There is also something new in the answer: the example and [updated fiddle](http://jsfiddle.net/7tC3L/2/show/) now also fetch the product-title's and product-url's and makes them into clickable images showing the thumbnails. Sorry to have shown you a workin solution that you can not use inside 'Ebay listings' (whatever they are..). Good luck on your quest! – GitaarLAB Aug 23 '12 at 02:59
  • 1
    @GitaarLAB the work you've done is superb !! It will definately help me!!! Yesterday, also thanks to you, I studied the ebay api's, so I will try there. Here is ebay listing witch I made before: [link]http://www.ebay.es/itm/RADIO-COCHE-TDT-HD-movimiento-MPEG4-GPS-BLUETOOTH-MP3-MP4-y-Frontal-Extraible-/160869841846?pt=LH_DefaultDomain_186&hash=item257496fbb6 – Artur Rain Aug 23 '12 at 13:02
  • @GitaarLAB also, could you please post a code like this `select src from html where url="http://stores.ebay.es/Todo-barato-24h/Galaxy-3-III-I9300-/_i.html?_fsub=345‌​1642014&_sid=183003444&_trksid=p4634.c0.m322%27" and xpath='//td/div/a/img'` only with links involved? Thanks. – Artur Rain Aug 23 '12 at 16:28
  • I think I don't understand this question. See my anwser that I updated 14 hours ago. It has: product-links, titles and image-urls. In the last posted [jsfiddle](http://jsfiddle.net/7tC3L/2/show/) you can enter a store-link (your's is pre-set), click the button fetch, then it will fetch the data and present it. If you hover over the image's, you'll see the product-title, if you click the image you go to the productpage on ebay. Check function `fetchEbayStore()` in my answer, it has a clear readable sql-part. Is this what you meant? – GitaarLAB Aug 23 '12 at 17:11
  • @GitaarLAB no I wanted that you would post a query for YQL to retreve this data. So I could get xml with the same data in YQL as you give me in a jsfiddle. Thanks. Because for now I will stick with a simple way, retreve the data and copy it to the listing as html. I'm having problem's with queries in YQL :) – Artur Rain Aug 23 '12 at 18:10
  • so the query should include img-url, product-title and product-url? – GitaarLAB Aug 23 '12 at 18:16
  • title not neccesery, but yes. – Artur Rain Aug 23 '12 at 18:18
  • Click query to go directly to yql console: [`select a.href, a.img.src, a.img.title from html where url='http://stores.ebay.es/Todo-barato-24h/Galaxy-3-III-I9300-/_i.html?_fsub=3451642014&_sid=183003444&_trksid=p4634.c0.m322' and xpath='//td/div[@class="image"]'`](http://developer.yahoo.com/yql/console/?q=select%20a.href%2C%20a.img.src%2C%20a.img.title%0Afrom%20html%0Awhere%20url%3D%27http%3A%2F%2Fstores.ebay.es%2FTodo-barato-24h%2FGalaxy-3-III-I9300-%2F_i.html%3F_fsub%3D3451642014%26_sid%3D183003444%26_trksid%3Dp4634.c0.m322%27%0Aand%20xpath%3D%27%2F%2Ftd%2Fdiv%5B%40class%3D%22image%22%5D%27) – GitaarLAB Aug 23 '12 at 18:23
  • last question !! is it posible to get the data without a div? So it would be inline? if not no problem, I will fix it with css, but if yes it would be better. :) But it work's perfectly as I wanted. – Artur Rain Aug 23 '12 at 18:31
  • forget the div's!!! PLEASE PLEASE PLEASE, can you get me a price and buy it now icon (compralo Ya) in my case. – Artur Rain Aug 23 '12 at 18:39
  • About the div's. You can present the data any way you like. The 'buy now button' should be a fixed link on ebay (you do know how to find the url of a image right?), as for the prices, I'm looking at it right now. – GitaarLAB Aug 23 '12 at 18:46
  • 1
    @GitaarLAB thanks for all your help. You helped me a lot ! And wrote an awesome script. Thanks. – Artur Rain Aug 23 '12 at 18:49
  • PRICES: [Query yql console link](http://developer.yahoo.com/yql/console/?q=SELECT%20href%2C%20src%2C%20title%2C%20content%20FROM%20html%20WHERE%20url%3D%27http%3A%2F%2Fstores.ebay.es%2FTodo-barato-24h%2FGalaxy-3-III-I9300-%2F_i.html%3F_fsub%3D3451642014%26_sid%3D183003444%26_trksid%3Dp4634.c0.m322%27%20AND%20xpath%3D%27%2F%2Fdiv%5B%40class%3D%22image%22%5D%2Fa%7C%2F%2Fdiv%5B%40class%3D%22image%22%5D%2Fa%2Fimg%7C%2F%2Ftable%5B%40class%3D%22gallery%22%5D%2Ftr%2Ftd%2Fdiv%2Ftable%2Ftr%2Ftd%2Fspan%27) and demo [JSFIDDLE DEMO](http://jsfiddle.net/7tC3L/5/show/) with hardcoded buy button. Good Luck!! – GitaarLAB Aug 23 '12 at 21:08