JQueryのfancyboxで表示する画像情報を変更したが変更が適用されない

Question

JQueryのfancyboxを用いて画像を表示するシステムを作成しているのですが、
それとは別に画像を自由に回転できる仕組みを作っていて、画像本体のJPGの内容を変更する仕組みは動作しているのですが、
変更した画像の情報がfancybox内では適用されません。
間違っているかもしれないですが
ネットなどの文献よりshowLoadingというオプションを使えば出来ると見つけたのでやってみましたが、
上手く出来ませんでした。
ブラウザ標準の更新を使わずにfancyboxの表示内容を更新する方法はあるのでしょうか。

$(function() {
	$('a.fancybox').fancybox();
　　　　$(".rotate").click(function(){
　　　　　　　$.fancybox.showLoading($.fancybox.getInstance().current );
　　　　}
});



<a class="fancybox" href="./doc/test.jpg" data-fancybox="group1">test.jpg</a>

ちなみに
jquery-3.3.1
fancyBox3
を使用しています。

Comments

[退会済みユーザー]

えっとfancy-boxで拡大表示する際に回転したいと言うことですか？
それとも回転できる画像を拡大表示したいと言うことですか？

[mememd]

.rotateボタンを押した際にajaxを用いて特定の画像を回転させて同じ名前で上書き保存したのはいいけど、
fancyboxで拡大表示？した際、変更前の状態で表示されるのでそれを上書き保存した状態で表示させたいです

[退会済みユーザー]

ajaxのタグをつけたほうが詳しい方の回答が得られるのでは？

[m.ts10806]

その画像って変更した後どこにどのように保存されるものですか？
例え元画像上書きだったとしても別途ロード（読み直し）する仕組みがないと変更後の画像は出てこないと思います。

[mememd]

fancyboxのみを再ロードする方法が知りたいです

[m.ts10806]

そもそもですが「画像を自由に回転できる仕組み」ってどういう作りなんでしょうか。物理的に回転したものをサーバーに保存する仕組みなのか、回転したように「見せる」ものなのか。

[mememd]

物理的に回転したものをサーバーに回転前と同じ階層と名前で上書き保存する仕組みです。
①WEBページロード→②fancyboxで画像表示→③サーバーにある画像情報更新→④fancyboxで表示（更新前の画像が表示）
④には更新された画像を表示したいのです

[x_x]

fancybox を使わなければ画像を回転させて表示できているということでしょうか？

Answer 1

ブラウザ標準の更新を使わずに・・・表示内容を更新する

まさにAjaxの仕事です。

ひとまず「ajax 画像ロード」で検索　ですかね。
画像の実体はサーバーにあるものなのでサーバー上の画像が変更されるのであればクライアント側であるJavaScriptだけではどうにもできません。

Answer 2

fancybox.js内の
画像を表示するIMGの設定を行う際、イメージURLにタイムスタンプを付けると更新できました。

slide.$ghost = $(ghost)
          .addClass("fancybox-image")
          .appendTo(slide.$content)
          .attr("src", slide.thumb +"?"+ new Date().getTime());
      }