添付ファイルのスライドショー

同一のレコード内に「添付ファイル1」「添付ファイル2」と作成した場合、それぞれ別のスライドショーで閲覧する事は可能でしょうか?

 

現在「添付ファイル1」「添付ファイル2」別々のフォームに写真を登録しても、スライドショーでは混合して表示されます。

ご教授いただけると幸いです。

宜しくお願い致します。

Toshi さん

試しに、DOM 上で「添付ファイル2」を丸ごと削除して、「添付ファイル1」をクリックすると、
「添付ファイル1」と「添付ファイル2」が、スライドショーで表示されます。
ということで、標準機能のスライドショーをカスタマイズするのは、困難だと思われます。

もしやるとすると、下記の手順になると思います。
・DOM 上で「添付ファイル1」と「添付ファイル2」の複製を作成
・DOM上の元の「添付ファイル1」と「添付ファイル2」を削除
・複製した「添付ファイル1」クリック時にスライドショーを行うようにカスタマイズ。
・複製した「添付ファイル2」クリック時にスライドショーを行うようにカスタマイズ。

rex0220様

 

ご回答いただき有難う御座います。また、検証までしていただき有難う御座います。

当方DOM未経験の為調べてみたのですが、DOMとkintonの繋がりが理解できず勉強不足を痛感しております…。

もし今回のカスタマイズにつながるような参考URL等がありましたら教えていただく事は可能でしょうか。

 

何卒宜しくお願い致します。

 

kintone の DOM 操作は、非推奨ですので、できれば標準のまま使われるのが一番です。
kintone の仕様変更でカスタマイズした部分が動作しなくなる可能性があります。
今回のカスタマイズは、かなり開発工数が必要だと思いますので
一応カスタマイズ前に、カスタマイズのリスクを含めてご検討ください。

>・DOM 上で「添付ファイル1」と「添付ファイル2」の複製を作成
>・DOM上の元の「添付ファイル1」と「添付ファイル2」を削除

この部分は、下記コードでいいと思います。
value-5118242 の数字部分は、項目に付与された番号を指定します。
番号は、ブラウザーのデバッグツールなどでDOM を調べます。

$('.value-5118242 img').each(function() {
$(this).clone(false).insertAfter(this);
$(this).remove();
});

>・複製した「添付ファイル1」クリック時にスライドショーを行うようにカスタマイズ。
>・複製した「添付ファイル2」クリック時にスライドショーを行うようにカスタマイズ。

画像クリック時に、画像ファイルをダウンロードして、スライドショーのライブラリを使用すると実現できると思います。

・ファイルダウンロード
kintone ファイルのダウンロードとアップロード

複数ファイルを取得するのは、再帰呼び出しを行って順番に処理します。

 

・スライドショー
スライドショーは、あまり詳しくありませんので、ライブラリを検索してみてください。
下記のような紹介サイトも参考になると思います。

レスポンシブ対応のjQueryスライダー系ライブラリ × 11選

rex220様

 

詳しく教えていただきありがとうございます。

しかし経験不足の為、実装はかなり困難そうです…。

 

非推奨設定という事もあり、業者への依頼含め一旦検討してみたいと思います。

 

有り難う御座いました。