1:ID:Yq3CyS 1週間前

#質問 js初心者で、一つのギャラリーコンテンツにjs二つ適用させたら案の定片方のjsが正常に動かなくなってしまった…。photoswipe.jsにアニメーションソートシャッフルを使いたいだけなんですが、どうもうまくいかない。〜min.js のファイル名って通常編集したりしますか?
あと周りに聞ける人がいないんだけど、codepenとかで問題のコード貼り付けて見てもらうこととかってできるんでしょうか?

13 件のコメント

2:ID:XM3.G9 1週間前
photoswipeもアニメーションシャッフルもシンプルなので、変なところで躓いているかもしれません。codepen貼り付けてくれたら見てみますよ。でもTeratailとかのほうが回答が付くかもしれません。
minはいじらないですが、minの元ファイルが配布されていたら、それをいじることはありますね。
3:ID: 1週間前
一つずつの疑問に丁寧にご回答いただきありがとうございます。codepen、アカウントは持ちつつ実際に利用するのは初めてなのですが準備ができたらこちらにlinkなど貼り付けてみます。ありがとうございます••!
4:ID: 削除
5:ID: 1週間前
問題のコンテンツを再現しました。
http://667510b69398e446.lolipop.jp/works/etc/bug.html

やりたいこと
- ギャラリーコンテンツ上での、photoswipe.jsとanimation sort shuffleの共存

現状確認している問題
- 画面更新をかけると、一瞬だけオンマウスの画像が画面全体に表示される
- animation sort shuffleは問題なく動くが、photoswipe.jsはオンマウスのみ正常で、サムネイルクリック後の挙動がまったくない(スワイプできる拡大画像が開かない)。

当方コーダー上がり&開発勉強中の身ですが、自分には現状、おそらく両方のjsが干渉し合っているんだろうという程度しかわからないため、この地点から修正する方法を恥ずかしながら、お伺いしたく思います。
上記ページよりご確認をお願いします。

参考
http://photoswipe.com/
http://www.n--log.net/web/animation-sort-jquery-shuffle/
6:ID:.kjqLw 1週間前
photoswipeはどこで発火させてるん?
7:ID:PQW3hr 削除
8:ID:PQW3hr 1週間前
Re:6
無視されてかなしー
9:ID: 削除
10:ID: 1週間前
Re:8
返事見たのだけど、ソース再チェックする時間なくて遅れてしまった…すみません。しかし、ポイントはそこでした。トリガーになるjs - fire-photoswipe-normail.jsが抜けていました…。恥ずかしい。。。
ヒントをいただき、ありがとうございました。

しかしまだ拡大時の画像が完全に表示出来ておらず、
- 画面更新をかけると、一瞬だけオンマウスの画像が画面全体に表示される の問題に対応中です。

「これはこうなんじゃないの?」的な意見がありましたら、どなたか教えていただけると助かります…!
11:ID: 1週間前
Re:10
※文章変だった
まだ拡大時の画像が完全に表示出来ていない点と、
- 画面更新をかけると、一瞬だけオンマウスの画像が画面全体に表示される の問題に対応中です。
12:ID:.kjqLw 1週間前
Re:10
イベントが起きる前にソート前の画像が表示されてるから最初は非表示にしておけばいいよ。さらっとみた感じfigureに予めopacity:0を付けておけばいいはず。
13:ID: 6日前
Re:12
またもや、ありがとうございます。デモページの方は今おかしなことになってるんですが汗、本番では問題なくいけました。差し支えなければ、その挙動(イベントが起きる前に〜)を判断する箇所はどこなのか教えていただけたりしますか?今後のバグ対応で、参考にできればと…。環境的にネットをのぞいて周りに聞ける人がいないもので、恐縮です。
14:ID:.kjqLw 5日前
Re:13
自分で0から作って動きを追っていけば分かりやすいと思うけど、ようは読み込みと処理順。

html
css
越えられない壁
js

の順で読み込んで処理されるから、
jsを読み込んで制御される前の素の状態のhtml/cssが一瞬表示されるのよ。

んで、基本的にスライドとか1枚めは表示させて2枚目以降は非表示。って時には大体opacityを使ってて、その制御はhtmlのstyleに直書きして反映させてんの。
だから開発者ツールでopacityが追加されているタグを探して、そこにclassかなんかで予めopacity:0を突っ込んでおけば、最初は非表示にしておいて、jsが読み込まれてイベントが起きたら勝手に上書きされるようになるって話し。
コメントの受付は終了しました。

一緒に読まれているつぶやき

ページ上部に戻る