jQuery「Lightbox2」の画像の切り替わり時に、白いフラッシュ現象を起こさずに、自然にクロスフェードさせたいです。

Question

前提・実現したいこと

画像ギャラリーにサムネイル一覧があり、
その中の画像をクリックするとlightboxのように小窓が開き、
戻る、進む、といった具合に画像を閲覧できるようにしたいと考えております。

希望する挙動に近いサンプル

http://lokeshdhakar.com/projects/lightbox2/

「A Four Image Set」の部分をご覧いただけないでしょうか。

このような挙動をしつつ、さらに画像が切り替わる際に
サンプルのように「白く眩しくフラッシュしたようにならずに」させたいと考えます。

画像がフェードアウトしたときに、次の画像も同じように自然に
フェードインして（クロスフェードと言うと良いでしょうか）、
次の写真が閲覧できるようにしたいです。

自分でも行ってみた対応

この「白く眩しくフラッシュした状態」は、要は小窓の画像の背景が白いため
起こっていると考え、
「lightbox.css」の55行目
「background-color: white;」を「background-color: black;」に変更してみたところ、
多少はマシにはなりました。それでも根本的な挙動が変わるわけではなく、
画像の切り替わりがカクカクと断絶するような感じは否めませんでした。

推測している解決方法

背景の地色の白が見えずに、クロスフェードできるようなjsの指定などをすれば
解決できるのかも？とは推測しています。

しかしながら、jsは勉強不足で、どこを変更してよいか見当がつかない状況です。
よろしければ、jsの指定など、解決方法をご教授いただけないでしょうか？

初めての投稿で、投稿に不備・不足がありましたら申し訳ありませんが、どうぞ宜しくお願い致します。

Answer 1

ソースをちゃんと見たわけではないですが、おそらくjQueryの.fadeIn()を利用しているものと思われます。
速度やイージングなどのオプションでそのように見せているのかなと。
そのオプション部分を調整するといいかもしれません。
または.show()に変更するという手もありますが、単に変更しただけで意図通りに動くかは分かりません。

ただしminソースでも本ソースでも該当の箇所を特定して改修するのは熟練者でも結構大変だとは思います。
いずれにしてもプラグイン本体のカスタマイズとなるので。

私の場合は「lightbox」はそんなもの（lightだし）と思ってます。
中には光る演出がないプラグインもでているはずなので、そちらも調べて参考にしてみては。

Comments

[terumi]

＞mts10806様

ご丁寧に、ありがとうごございます。
感謝申し上げます。

ご指摘を元に「lightbox.js」を調べてみましたら、下記の
「.lb-image」classに関する記述ヶ所が、画像の切り替え動作を決定しているようでした。

-----

【186行目】
var $image = this.$lightbox.find('.lb-image');

this.$overlay.fadeIn(this.options.fadeDuration);

$('.lb-loader').hide(); //画像ロード時の画像は不要なのでhide();
this.$lightbox.find('.lb-nav, .lb-prev, .lb-next, .lb-dataContainer, .lb-numbers, .lb-caption').hide(); //画像の非表示処理
this.$outerContainer.addClass('animating');

【271行目】

// Display the image and it's details and begin preload neighboring images.
Lightbox.prototype.showImage = function() {
this.$lightbox.find('.lb-loader').hide();
this.$lightbox.find('.lb-image').show(); //画像の表示処理
this.updateNav();
this.updateDetails();
this.preloadNeighboringImages();
this.enableKeyboardNav();
};

-----

この状態で、画像の切り替わり時にフェードインアウト処理がなく、
単純にパッ、パッと切り替わるようです。

この後さらに切り替わる前の画像にfadeOut()、切替後の次の画像にfadeIn()　といった処理が同時にできればよいのかもしれません。

-----

【104行目】

this.$lightbox.find('.lb-next').on('click', function() {
if (self.currentImageIndex === self.album.length - 1) {
self.changeImage(0);
} else {
self.changeImage(self.currentImageIndex + 1);
}
return false;
});
-----

この記述で、次の画像へ切り替えているのかな？と検討はつけましたが、
では、どうやって切り替え前と後の画像へ、個別に指示を送るべきか？は見当が付かない状況です。

宜しければ、引き続きご教示いただければ幸いです。

[m.ts10806]

「this.$overlay.fadeIn(　･･･」と書いてありますが。。
lightboxが独自に作っている（ある意味特徴・売りと言える）部分でもあるようですし（fadeInの記述が結構ちりばめられている）ここをなくすとlightboxである必要がなくなるように思うのですが、
その辺りはどうお考えですが？

[terumi]

＞「this.$overlay.fadeIn(　･･･」と書いてありますが。。

申し訳ありません、具体的にご説明をお願いできませんでしょうか？

＞ ここをなくすとlightboxである必要がなくなるように思うのですが、
その辺りはどうお考えですが？

仰るとおり、lightboxである必要はないのかもしれませんが、
他に代替できるものが今のところ自力では見つけられておりませんため、
このような形でご質問をさせていただいた次第です。

勉強不足で申し訳ありませんが、どうぞ宜しくお願い致します。

[m.ts10806]

> 申し訳ありません、具体的にご説明をお願いできませんでしょうか？
>> 画像の切り替わり時にフェードインアウト処理がなく、
と書かれていますが、
this.$overlay.fadeIn(this.options.fadeDuration);
という処理をあげられているので、早速fadeIn()がでてきてるけど、
どういことなんだろう？という疑問でした。

> 他に代替できるものが今のところ自力では見つけられておりませんため、
後継・カスタマイズ版・Lightboxっぽい（触発された）ようなやつは下記にあります。
http://agorian.com/memo/photo/lightbox.html

↓とかはfadeInないように見えます。
https://wemo.tech/1169

[terumi]

＞ 早速fadeIn()がでてきてるけど、
どういことなんだろう？という疑問でした。

ご返答ありがとうございます。確かにこの部分にfadeIn()の記述がございますね。。
今の私ではthisや、thisの前後でthisに指示を行っているものまで詳細には読み解けなかったのですが、
実際の動作では、アニメーションはせずにパッ、パッ、と切り替わっておりました。

＞ 後継・カスタマイズ版・Lightboxっぽい（触発された）ようなやつは下記にあります。
ありがとうございます、発見できてなかったものもございましたので、確認してみます。

＞↓とかはfadeInないように見えます。
＞ https://wemo.tech/1169

言葉足らずで申し訳ありません、
最終的には、アニメーションがない挙動を希望しているわけではございませんでして、
クロスフェードしていく挙動を希望しております。

Lightbox2のデフォルトの画像の切り替わりでは、次の画像がフェードインするタイミングで、一瞬白くフラッシュしたような挙動になります。
この挙動を避け、かつ、今表示されている画像が自然に消えていき、次の画像が自然に表れるような挙動を最終的に希望致しております。

いずれにせよ、私の現在の力ではなかなか難しいかと思われますので、Lightbox2以外のプラグインを変更していくような形で、希望する挙動を目指していこうと考えます。

親身にご回答いただきまして、ありがとうございました。