拍摄和显示图像 [英] Take and display images

问题描述

我想知道如何才能做到这一点.

I was wondering how can I make this happen.

我需要从外部链接站点获取所有图像并在其他站点上显示它们.没有jQuery可以做吗?使用简单的 JavaScript 或 Flash?

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?

如果是 javascript，那么它必须是非常简单的代码，因为我想让它在 eBay 列表中工作.

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

示例:在列表中将出售一个 XXX 手机支架，我想在底部放一个幻灯片或类似的东西，用于完全相同的项目(来自同一类别).我想给它一个功能，所以我只需要更改指向类别的链接，图片就会自动更改.可能吗?

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?

谢谢，

如果我没有说清楚，请询问，我会更详细地解释.

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

推荐答案

注意:提问者已声明此答案不适用于 INSIDE Ebay 列表.
除此之外，它运行得非常好，它会激怒一些网络开发人员"(LOL).我暂时把它留在这里.

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.

所以为了重新获得用户的权力"，只需使用http://query.yahooapis.com/.
jQuery 不是严格需要的.

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

示例 1:
使用类似 SQL 的命令:

EXAMPLE 1:
Using the SQL-like command:

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

以下链接将抓取SO以获取最新问题(绕过跨域安全牛$#！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

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

如您所见，这将返回一个 JSON 数组(也可以选择 xml)并调用回调函数: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.

示例 2:
正如下面评论中所问的那样，这个纯 JavaScript 中的示例不仅从 Ebay 商店中获取 image-url's，还获取 product-title's 和 product url's(将它们显示为带有 product-title 作为图像标题的超链接图像).因此，它还显示了如何动态构建 yql 字符串以及如何处理返回的数据.

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>
';
      }
      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
}

请参阅这个快速的'n 脏'的jsfiddle"以查看上面的示例.请记住，这只是为了解释，而不是生产！

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

更多信息:阅读 yahoo 的 yql 文档，查看右侧的实时示例在构造函数中.

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

这篇关于拍摄和显示图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！