javascriptjqueryflashgalleryebay-design-templates

Take and display images


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.


Solution

  • 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.