2016-08-18 10 views
0

私は自分自身で答えを探しましたが、私が投稿しているので、私は多くの運がなかった。 Fancyboxは次のところにあります:http://fancyapps.com/fancybox/Fancybox2更新タイトルロード後

私は自分のためにフォトギャラリーを作っています。これは優秀です。しかし、タイトル欄に画像の説明を載せたい。私の画像の説明は他の場所に保存されています。 (私は実際にFlickrからの説明を引っ張っていますが、それはほとんど無関係です。) 右のように、各画像には "id"というhtml5データが保存されています。これは、flickr画像IDにリンクされています。私はfancyboxを開く前 、私はこれを行う:

var sDescription; 

$(".fancybox").fancybox({ 
        beforeLoad: function() { 
         var id = this.element.data('id'); 
         var data = { 
          imgID: id 
         }; 
         //setupBlocks(); 
         loadData(data); 
        } 

function loadData(data) { 
        $.ajax({ 
         type: "POST", 
         url: "Ajax/getDescription.php" 
         , 
         data: data 
         , success: function (res) { 

          sDescription = res; 
         } 
        }); 
       } 

このすべてがやっているが、私自身のスクリプト、テキストのみの文字列を保持しているページにIDを渡し、その後文字列にそれを入れています。

afterLoad: function() { 

         this.title= this.element.data('title')+sDescription; 
        } 

ここでは、タイトルと説明を保持するようにタイトルを更新するだけです。最初の画像を開くと、それはAJAXの要求を行い、それをダウンロードした後に、ファンシーボックスが開き、タイトルが次のように表示されます:Megan 0014 "The Wanderer" left/rightを押すと、beforeLoadコールバックが呼び出されますajaxリクエストですが、fancyboxを閉じたり開いたりしない限り、テキストは更新されません(完全に異なるモデルのThe Wandererはまだ名前の接頭辞が修正されています)。 私が試したその他のこと:変数の "this"を参照してloadDataに渡し、ajaxが読み込まれるとテキストを設定しますが、fancyboxが開かれた後はタイトルが更新されないようですdiv in html。

最後の手段として、各文字列をプリロードして配列に設定するかもしれませんが、私がむしろやりたいことは成功時に文字列を更新することだけです。

私はこれをできるだけジェネリックに保つのが非常に難しかったですが、質問があれば教えてください。

編集:矢印キーを2回押すと、テキストが更新され、前の画像の説明に更新されます。文字列を更新しないファンシーボックスの問題です。

Edit2:うん、私はたくさん編集します。知っている。私はonUpdateコールバックを発見したので、私のajaxの成功では$ .fancybox.update();を呼び出します。

私にonUpdateは次のようになります。

onUpdate : function() { 
         console.log("on update"); 
         this.title = this.element.data('title') + sDescription; 
         console.log(this.title); 

        } 

コンソールのタイトルがページのタイトルをCORRECT-さではありません。これは、いいえ、ウィンドウを閉じることなくタイトルを変更することはできません...

答えて

0

うわー、私はこれを考えていないと思っていますが、私はdivを直接修正できないことを忘れていました。

$(".fancybox-title").html(this.element.data('title') +" "+ sDescription)