jQueryのカルーセルプラグインを探しています（AJAXリフレッシュ

Question

）Amazonのホームページに表示されているプラ​​グインと同様のプラグインを探しています。一番下までスクロールし、カルーセルが実際にどのように動作するかを確認します。右または左をクリックすると、AJAXのリフレッシュが行われます（ほとんどのカルーセルプラグインが行う画像のスライド全体ではありません）。

私はこれを行うためのjQueryベースのプラグインを探していました。 私はいくつかのjQueryカルーセルプラグインを見たことがありますが、それらはすべてスライド効果を行います。これは私が探しているものではありません。 AmazonでのようなAJAXリフレッシュアクションを実行したい。

このようにしてjQueryカルーセルプラグインを見た人はいらっしゃいますか？それは右または左をクリックするとAJAX呼び出しを行い、このような中間処理アニメーションgifを表示できますか？

Answer 1

何も見つかりませんでしたが、何かを書くのはあまり難しくありません。

PHP、Perl、Python、.NETなどを使用し、JSONオブジェクトを返すサーバーサイドスクリプトを作成します。あなたはjQueryの助けを頼んだだけなので、私はあなた自身のサーバースクリプトを書く方法を知っていると思います。以下は、jQueryを使用してこれを行う方法の1つです。

戻り、このようなJSONオブジェクト...

{"items":[{"img":"http://www.png","url":"http://www.html","name":"Item A"}, 
      {"img":"http://www.png","url":"http://www.html","name":"Item B"}, 
      {"img":"http://www.png","url":"http://www.html","name":"Item C"}], 
"collection_id":100} 

function onGotData(data) 
{ 
    jQuery('#itemA .item_name').text(data.items[0].name); 
    jQuery('#itemA .item_image').attr('src', data.items[0].img); 
    jQuery('#itemA').click(function() { document.location = data.items[0].url }); 
    jQuery('#itemB .item_name').text(data.items[1].name); 
    jQuery('#itemB .item_image').attr('src', data.items[1].img); 
    jQuery('#itemB').click(function() { document.location = data.items[1].url }); 
    jQuery('#itemC .item_name').text(data.items[2].name); 
    jQuery('#itemC .item_image').attr('src', data.items[2].img); 
    jQuery('#itemC').click(function() { document.location = data.items[2].url }); 
    collection_id = data.collection_id; 
} 
var collection_id = 100; 
function getData(direction, id) 
{ 
    // change images to loading animation 
    jQuery('#itemA .item_image').attr('src', 'loading.gif'); 
    jQuery('#itemB .item_image').attr('src', 'loading.gif'); 
    jQuery('#itemC .item_image').attr('src', 'loading.gif'); 
    jQuery.getJSON('http://path.to/yourscript?collection=' + 
      direction + '&id=' + id,null,onGotData); 
} 

...を頼むと、このような結果をレンダリングするために、いくつかのJavaScriptを書くには、どのように保持するために、このようないくつかのHTMLを想定しますあなたが持っているアイテムはこれまでにない

最後にいくつかのボタンを押します。その後

<div id="goLeft"><img src="left.gif"></div> 
<div id="goRight"><img src="right.gif"></div> 

ボタンがクリック可能にする...

jQuery('#goLeft').click(function() { 
    getData('left', collection_id); 
}); 
jQuery('#goRight').click(function() { 
    getData('left', collection_id); 
}); 

約10分かかっていますが、うまくいけば空欄に記入し、あなたが探しているものを作ることができるはず。 #jQuery irc.freenode.netは、ライブページの作業を開始すると、さらにあなたを助けることができます。彼らはあなたが彼らと仕事をしたいならば、一般的に非常に役に立ちます。