5

所以我知道有很多免费的图像旋转器等，使用 jQuery 之类的东西。然而，我的问题是，有没有办法在不刷新网站页面的情况下动态更新图像旋转器？

所以基本上你正在显示十张图片，然后 1 小时后你有一个脚本删除旧图片添加十张新图片和一个新的 xml 文件，你需要刷新页面吗？或者脚本是否总是动态检查 xml 文件，因此您不必进行刷新。

ps 它不必在 jQuery 中，可以是 HTML5 或类似的 - 我只想能够从文件夹中添加和删除图像，并让旋转器自动更新以使用文件夹中的内容

4

6 回答 6

5

我认为，如果可能的话，最好不要对画廊进行任何可能需要重新初始化的操作。下面的方法旨在通过替换图库图像而不替换 img 节点本身来实现这一目标。

首先，让我们假设服务器端代码已经启动并且可以正常工作，并以任何方式返回 json，当解码后相当于：

[
    "images/aaa.jpg",
    "images/bbb.jpg",
    "images/ccc.jpg",
    "images/ddd.jpg",
    "images/eee.jpg",
    etc.
]

然后：

$(function(){
    var $galleryImgs = $('#myGallery img');//gallery img nodes in a jQuery wrapper.
    var updateGallery = function() {
        $.ajax({
            url: 'getImageUrls.php', //or whatever
            data: {
                n: $galleryImgs.length //specify how many new image urls to fetch
            },
            dataType: 'json',
            success: function(data) {
                $.each(data, function(i, url) {
                    if($galleryImgs[i]) { //safety
                        $galleryImgs[i].src = url; //replace each gallery image in turn
                    }
                });
            }
        });
    };
    var galleryInterval = setInterval(updateGallery, 60*60*1000);//60*60*1000 for one hour; 30*60*1000 for half an hour
});

因此，画廊插件将（希望）继续它的旋转，幸福地不知道它的图像已被更改。一些画廊插件可能比其他插件更适合这一点 - 需要进行实验。

于 2012-05-10T01:04:22.800 回答
2

就删除和替换文件而言，您必须在服务器端进行。你没有提到服务器语言，所以我建议在另一个问题中打开它。一旦你弄清楚了，你可以让你的脚本使用 ajax 轮询服务器以获取更新。

查询看起来（有点）像这样：

 refreshShow = function() {
    $.ajax({
      url: 'imagefeed.json',
      dataType: 'json',
      type: 'post',
      data: {
        gallery: 'homeGallery'
      },
      success: function(data) {
        $('#homeGallery img').remove();
        $.each(data, function(i, image){
          $('#homeGallery').append(
            $('<img />').attr('href', image.path)
          )
        });
      }
    });
  };

然后你的民意调查：

$(function(){
  setTimeout(function(){ refreshShow() }, 30000); //polls every 30 seconds for updates
});

JSON 提要会提供一些路径，也许还有标题。您可以在 SO 上找到一大堆关于以不同语言创建 JSON 输出的问题。请记住，这是示例代码，大多数幻灯片都比这稍微复杂一些。

于 2012-05-09T14:12:51.147 回答
0

我假设文件夹中的图像具有不同的名称，因此您可能需要提供一个 URL，您可以轮询该 URL 以获取新文件名，可能如下所示：

http://example.com/imagenames

它返回这样的json：

{
   images: ["i1.jpg", "i1.jpg", "i1.jpg", "i1.jpg", "i1.jpg"],
   version: 12
}

然后，您可以频繁地向该 url 发出 ajax 请求，查看版本号是否被碰撞，然后替换图像轮播中的图像。如果您没有找到可以让您动态更改图像的工具，那么编写起来应该很简单。

这是一种方法，您只需要添加自动旋转： http ://sorgalla.com/projects/jcarousel/examples/dynamic_flickr_api.html

于 2012-05-09T14:27:38.980 回答
0

Python 金字塔示例

我已经实现了这个并且可以正常工作，但是我只是没有图像自动更改。我使用 ajax 请求

/basic_stats/graph.png?graph.type=IMAGE

其中 /basic_stats/graph.png 只是我配置到特定视图的路线。您的图像滑块不会关心您是否在图像链接中传递参数，只要该路由返回它所期望的 png 或 jpg。在我的情况下，我有一个自动化进程，它在后台运行统计信息，然后将图像存储到一个 Redis 层，该层的视图为 /basic_stats/graph.png? 配置为轮询。然后我只查询 request.params['some_key_value'] 并返回一个图像作为响应对象。然后你根本不需要做任何 ajax 魔术，只需生成正确的响应对象。

从 __init__.py

config.add_route('ImageSlider', '/images/ImageSlider.png')

来自views.py

@view_config(route_name='ImageSlider')
def ImageSlider(request):
    imgData = None
    if 'graph.type' in request.params:
        if request.params['image.name'] == 'ImageSlider1':
            r_server = redis.Redis('127.0.0.1')
            imgDataObj = r_server.get('ImageSlider1')
            del r_server
            imgData = pickle.loads(imgDataObj)
        elif request.params['image.name'] == 'ImageSlider2':
            r_server = redis.Redis('127.0.0.1')
            imgDataObj = r_server.get('ImageSlider2')
            del r_server
            imgData = pickle.loads(imgDataObj)
    return Response(body_file=imgData, content_type='image/png')

此示例使用 Redis 存储序列化图像数据，但您可以使用 PIL ex 从 FS 轻松加载文件

imgData = Image.open("/images/ImageSlider1.png")

您现在可以让视图在这些特定位置使用您想要的任何图像进行响应。然后只需将您的图像位置传递给您的滑块

滑块的链接

src="/images/ImageSlider.png?image.name=ImageSlider1"
src="/images/ImageSlider.png?image.name=ImageSlider2"

只需让您的视图调整它动态响应的图像。Redis 允许您超时您的密钥，并让外部进程在侦听时重新填充密钥，以将新图像提供给您的网络服务器。请注意，这可能不会随着您移动的图像数据而扩展，而是用于基本统计报告的内部应用程序，这就是我使用它的原因，它很棒，而且无缝快速。我还没有对它进行负载测试以查看上限是多少，但我们不会有很多并发用户。

不管你使用什么框架，这个例子应该是完成你的任务的一个选项。

我想在 Backbone.js 中链接视图渲染调用以在任意更新期间更改图像 src 也可能有效，但我还没有深入 Backbone.js 兔子洞，而且这个概念可能仅限于 Backbone.js。

Redis
金字塔

于 2012-05-15T16:56:24.103 回答
0

类似的事情可以通过使用服务器端语言和 Ajax 来完成。你没有提到一个，所以我只是以 PHP 为例，但这个概念几乎是：

A) 启动旋转器并加载文件夹中的图像。

B) 使用 setTimeout(); 创建一个函数，该函数将使用 Ajax 调用检查目录的 PHP 页面，并返回检查目录中图像名称的 json。

C) 删除旋转器的当前图像，然后使用 JSON 中的新信息重新填充它。

一个例子是：

[PHP]

$listOfImages = new array();

foreach( glob("/uploads/*.jpg") as $file ){
    array_push( $listOfImages, $file ); // gets an array of all the jpgs in the uploads directory
}
return json_encode( $listOfImages );

[jQuery]

<script type='text/javascript'>


    $(function($){
        var slider = new Slider(); //Pseudo-class for a slider
        setTimeout(function(){

           $.ajax({
             url:"update-slider-with-images.php",
             type:"post",
             dataType:"json",
             success:function(data){

               slider.clearAllImages(); //pseudo function to remove images from slider

               var images = JSON.parse( data );
               for(image in images){

                  slider.addImage( image ); //Psuedo function to add image to the rotation queue

               }

               slider.slide(); // Pseudo function to start the slider

            }

         });

        },300000); // check every 6 minutes

    });

</script>

这可能不是您所需要的一切，因为您需要创建滑块类或以其他方式在我的示例中重新实现该代码，但只要您了解 PHP，就足以让您入门。如果您不这样做，我认为将其转换为其他东西不会太难。我知道 Rails 可以处理文件系统的东西，我相信 ASP.Net 也可以。

于 2012-05-10T17:33:14.640 回答
0

我有一个您可能感兴趣的简单jQuery方法。

示例中使用的 Image Rotator 是JW Image Rotator，它使用 XSPF、RSS 和 ASX 标签格式的外部文件。

它也可能只是可下载演示提供的简单的xml 文本文件。您可以考虑使用 Flicker，然后访问这些 RSS 源来简化播放列表。


对于您提到的第一个问题，在演示中通过简单的 setTimeout 显示在不刷新网页的情况下更新图像旋转器。它重新加载之前更新过的相同 playlist.xml文件或使用不同的播放列表文件。


为了解决您的第二个问题，playlist.xml文件在指定时间重新加载自己时使事情变得容易，因为它会自动强制更新您在图像文件夹中的内容（例如，如果不使用 RSS URL 提要）。

每当您覆盖文件时，例如01.jpg 到 10.jpg ，然后在重新加载事件期间，由于JW Image Rotator检索它们，它将抓取新文件。

这意味着没有时间戳或其他黑客来强制重新加载。更进一步，您可以拥有一系列播放列表，这些播放列表可以自动循环以实现完全自动化的过程。


演示 中有很多注释和一些控制台日志消息来解释发生了什么，以便您可以将演示的方法调整到任何其他图像旋转器或图像插件。


这是jsFiddle 上 的一个DEMO，它是教程版本。

这个jsFiddle 上的 DEMO 不包含任何注释或控制台，因此您可以清楚地看到代码。

这是可下载的教程版本的pastebin。

要在本地试用这个DEMO，您需要开源 JW Image Rotator，当前版本为 v3.18，现在有 JW 水印，但 v3.17没有...它压缩在这里，它包括所有源文件，包括.fla Flash 文件。

演示还包含一个指向JW Image Rotator JavaScript API命令的链接，这些命令甚至没有使用过……但可以随时用于进一步定制！

于 2012-05-16T08:28:38.843 回答