5

したがって、jQueryなどを使用した無料の画像ローテーターなどがたくさんあることを理解しています。しかし、私の問題は、サイトページを更新せずに画像ローテーターを動的に更新する方法はありますか？

つまり、基本的に10個の画像を表示し、1時間後にスクリプトで古い画像を削除し、10個の新しい画像と新しい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フィードがいくつかのパスをフィードする場合、おそらくキャプションも同様です。さまざまな言語でのJSON出力の作成に関するSOに関する質問がたくさんあります。これはサンプルコードであり、ほとんどのスライドショーはこれよりも少し複雑であることに注意してください。

于 2012-05-09T14:12:51.147 に答える
0

そのようなことは、サーバーサイド言語とAjaxを使用することで実現できます。あなたは1つについて言及しなかったので、例として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

フォルダ内の画像の名前は異なると思います。そのため、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を返す限り、画像リンクで引数を渡しても、画像スライダーは気になりません。私の場合、バックグラウンドで統計を実行し、画像を/basic_stats/graph.pngのビューであるRedisレイヤーに保存する自動化されたプロセスがありますか？に対してポーリングするように構成されています。次に、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を使用してシリアル化された画像データを保存しますが、PILexを使用してFSからファイルを非常に簡単にロードできます。

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

これで、これらの特定の場所で必要な任意の画像でビューを応答させることができます。次に、画像の場所をスライダーに渡します。

スライダーのリンク

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

そして、ビューに動的に応答する画像を調整させるだけです。Redisを使用すると、キーをタイムアウトし、外部プロセスでリッスン時にキーを再設定して、新しい画像をWebサーバーに提供できます。これは、シフトする画像データとしてはおそらくスケーリングされないことに注意してください。ただし、基本的な統計レポート用の内部アプリケーションの場合は、これを使用して、優れたシームレスな高速性を実現します。上限を確認するための負荷テストは行っていませんが、同時ユーザーはそれほど多くありません。

使用しているフレームワークに関係なく、この例はタスクを実行するためのオプションである必要があります。

Backbone.jsでビューレンダリング呼び出しを連鎖させて任意の更新中に画像srcを変更することもできると思いますが、Backbone.jsのうさぎの穴をまだ十分に理解しておらず、その概念はBackbone.jsに限定されている可能性があります。

Redis
ピラミッド

于 2012-05-15T16:56:24.103 に答える
0

私はあなたが興味を持っているかもしれない簡単なjQueryメソッドを持っています。

この例で使用されているImageRotatorは、XSPF、RSS、およびASXタグ形式の外部ファイルを使用するJWImageRotatorです。

また、ダウンロード可能なデモが提供するプレーンで単純なxmlテキストファイルの場合もあります。代わりに、フリッカーを使用してから、それらのRSSフィードにアクセスしてプレイリストを合理化することを検討してください。


あなたが言及した最初の問題については、ウェブページを更新せずに画像ローテーターを更新することは、単純なsetTimeoutを介してデモに示されています。以前に更新されたものと同じplaylist.xmlファイルをリロードするか、別のプレイリストファイルを使用します。


2番目の問題に対処するために、playlist.xmlファイルは、画像フォルダーにあるコンテンツを自動的に更新するため（たとえば、RSS URLフィードを使用していない場合）、指定された時間に自分自身をリロードするときに簡単に処理できます。

たとえば01.jpgから10.jpgにファイルを上書きすると、リロードイベント中に、JWImageRotatorが新しいファイルを取得するようになります。

これは、リロードを強制するためのタイムスタンプやその他のハッキングがないことを意味します。さらに一歩進めるために、完全に自動化されたプロセスを持つために自動的に循環することができるプレイリストの配列を持つことができます。


デモ には多くのコメントがあり、何が起こっているのかを説明するコンソールログメッセージがいくつかあるので、デモのメソッドを他のイメージローテーターやイメージプラグインに適合させることができます。


これがチュートリアルバージョンであるjsFiddle のデモです。

jsFiddleのこのデモにはコメントやコンソールが含まれていないため、コードをきれいに見ることができます。

これがダウンロード可能なチュートリアルバージョン のペーストビンです。

このデモをローカルで試すには、オープンソースのJW Image Rotatorが必要です。現在、v3.18にはJW透かしがありますが、v3.17にはありません...ここに圧縮されており、以下を含むすべてのソースファイルが含まれています。 .flaFlashファイル。

DEMOには、使用されていないJW Image Rotator JavaScript APIコマンドへのリンクも含まれていますが、さらにカスタマイズするためにすぐに利用できます。

于 2012-05-16T08:28:38.843 に答える