izimodalを複数ウィンドウでグループ化し、クリックしたコンテンツのモーダルウィンドウから表示させたい。

Question

jQueryのプラグインizimodalを使って、複数の内容をグループ化し、表示させるページを制作したいと考えています。
izimodalは通常通り動きましたが、

1. クリックしたコンテンツの画像を表示させる。
2. 表示したモーダルウィンドウをグループ間でスライドさせる。

の2点の動作を追加したところ、クリックした後、画像を表示させたい箇所が複数あるためか、
クリックしたコンテンツのモーダルウィンドウではなく、グループ化した1番最初の画像が常に表示されてしまいました。

　<li class="work_con work_ban" id="banner">
　 　<h2 class="work_sub-tit">BANNER</h2>
　　 <div class="work_itm-wrap">
　　 　 <ul class="work_itm">
　　  　　 <li class="work_itm-each" data-iziModal-open=".iziModal" data-izimodal-zindex="20000" data-izimodal-preventclose="">
　  　　　   <img class="work_ban1 img" src="images/banner1.png" alt="banner1">
　　 　　  </li>
　　 　　  <div id="modal-default" class="iziModal" data-izimodal-title="title" data-izimodal-subtitle="subtitle">
  　　 　    <figure style="text-align:center;"><img class="iziModal_img" src="images/banner1_o.jpg" alt="banner1" /></figure>
 　　 　     <p class="iziModal_word">text</p>
 　　      </div>   
　　       <li class="work_itm-each" data-iziModal-open=".iziModal" data-izimodal-zindex="20000" data-izimodal-preventclose="">
　  　       <img class="work_ban2 img" src="images/banner2_1.png" alt="banner2">
　　       </li>
　　       <div id="modal-default" class="iziModal" data-izimodal-title="title" data-izimodal-subtitle="subtitle">
　　         <figure style="text-align:center;"><img class="iziModal_img" src="images/banner2_o.png" alt="banner2" /></figure>
　　         <p class="iziModal_word">text</p>
　　       </div>        
　　    </ul>
　　 </div>
　　</li>

    $(document).on('click', '.open-default', function(event) {
        event.preventDefault();
        $('#modal-default').iziModal('open',this);
      });
      $('#modal-default').iziModal();
    $('.iziModal',this).iziModal({
        group: "group01",
        loop: true,
        headerColor: "rgba(5,41,88,0.8)",
        padding:20,
        borderBottom:false,
        radius:0,
        closeButton:false,
        background:"rgb(246,246,246)",
        title:"#f6f6f6",
        subtitle:"#f6f6f6",
        navigateCaption:"#052958",
    });

クリックしたコンテンツの情報を表示するためには、上記コード以外に追加する記述が必要でしょうか？
ご回答よろしくお願いします。

【制作環境】
エディタ：Visual Studio Code
言語：HTML5、CSS3、jQuery2.2.4

【izimodalのopenに関する記述】

		open: function (param) {

			var that = this;

			try {
				if(param !== undefined && param.preventClose === false){
					$.each( $('.'+PLUGIN_NAME) , function(index, modal) {
						if( $(modal).data().iziModal !== undefined ){
							var state = $(modal).iziModal('getState');

							if(state == 'opened' || state == 'opening'){
								$(modal).iziModal('close');
							}
						}
					});				
				}
			} catch(e) {  /*console.warn(exc);*/  }

            (function urlHash(){
				if(that.options.history){

	            	var oldTitle = document.title;
		            document.title = oldTitle + " - " + that.options.title;
					changeHashWithoutScrolling('#'+that.id);
					document.title = oldTitle;
					//history.pushState({}, that.options.title, "#"+that.id);

					window.$iziModal.history = true;
				} else {
					window.$iziModal.history = false;
				}
            })();

			function opened(){

			    // console.info('[ '+PLUGIN_NAME+' | '+that.id+' ] Opened.');

				that.state = STATES.OPENED;
		    	that.$element.trigger(STATES.OPENED);

				if (that.options.onOpened && ( typeof(that.options.onOpened) === "function" || typeof(that.options.onOpened) === "object" ) ) {
			        that.options.onOpened(that);
			    }
			}

			function bindEvents(){

	            // Close when button pressed
	            that.$element.off('click', '[data-'+PLUGIN_NAME+'-close]').on('click', '[data-'+PLUGIN_NAME+'-close]', function (e) {
	                e.preventDefault();

	                var transition = $(e.currentTarget).attr('data-'+PLUGIN_NAME+'-transitionOut');

	                if(transition !== undefined){
	                	that.close({transition:transition});
	                } else {
	                	that.close();
	                }
	            });

	            // Expand when button pressed
	            that.$element.off('click', '[data-'+PLUGIN_NAME+'-fullscreen]').on('click', '[data-'+PLUGIN_NAME+'-fullscreen]', function (e) {
	                e.preventDefault();
	                if(that.isFullscreen === true){
						that.isFullscreen = false;
		                that.$element.removeClass('isFullscreen');
	                } else {
		                that.isFullscreen = true;
		                that.$element.addClass('isFullscreen');
	                }
					if (that.options.onFullscreen && typeof(that.options.onFullscreen) === "function") {
				        that.options.onFullscreen(that);
				    }
				    that.$element.trigger('fullscreen', that);
	            });

	            // Next modal
	            that.$navigate.off('click', '.'+PLUGIN_NAME+'-navigate-next').on('click', '.'+PLUGIN_NAME+'-navigate-next', function (e) {
	            	that.next(e);
	            });
	            that.$element.off('click', '[data-'+PLUGIN_NAME+'-next]').on('click', '[data-'+PLUGIN_NAME+'-next]', function (e) {
	            	that.next(e);
	            });

	            // Previous modal
	            that.$navigate.off('click', '.'+PLUGIN_NAME+'-navigate-prev').on('click', '.'+PLUGIN_NAME+'-navigate-prev', function (e) {
	            	that.prev(e);
	            });
				that.$element.off('click', '[data-'+PLUGIN_NAME+'-prev]').on('click', '[data-'+PLUGIN_NAME+'-prev]', function (e) {
	            	that.prev(e);
	            });
			}

Comments

[kei344]

プラグイン／ライブラリは公式配布サイトのURLを質問文に追記ください。（URLにはリンクを張ることができます）また、「#modal-default」のHTMLも提示してください。

Answer 1

同様の問題で悩んでおりましたが、以下のようにすれば実現できます。

<li class="work_itm-each" data-iziModal-open=".iziModal_1" data-izimodal-zindex="20000" data-izimodal-preventclose="" data-izimodal-group="group01">
  <img class="work_ban1 img" src="images/banner1.png" alt="banner1">
</li>
<div id="modal-default" class="iziModal iziModal_1" data-izimodal-title="title" data-izimodal-subtitle="subtitle">
  <figure style="text-align:center;"><img class="iziModal_img" src="images/banner1_o.jpg" alt="banner1" /></figure>
  <p class="iziModal_word">text</p>
</div>   
<li class="work_itm-each" data-iziModal-open=".iziModal_2" data-izimodal-zindex="20000" data-izimodal-preventclose="" data-izimodal-group="group01">
  <img class="work_ban2 img" src="images/banner2_1.png" alt="banner2">
</li>
<div id="modal-default" class="iziModal iziModal_2" data-izimodal-title="title" data-izimodal-subtitle="subtitle">
  <figure style="text-align:center;"><img class="iziModal_img" src="images/banner2_o.png" alt="banner2" /></figure>
  <p class="iziModal_word">text</p>
</div>  

ポイントは、data-iziModal-openを.iziModal_1のようにし、個々で識別できるようにしてボタンの方はclass="iziModal iziModal_1"のようにすることです。
また冗長的ですがdata-izimodal-group="group01"を追加することで望み通りの動作になります。

jQueryの方のgroup: "group01"は消してください。

Comments

[hrsw]

ご回答ありがとうございます！希望していた動作通りの動きになりました！！

Answer 2

<div id="modal-default" class="iziModal" となっているので$('.iziModal',this)に含まれるのでは。
クリックについては.open-defaultの要素が提示されていないのでどういう動作をさせたいのかがわかりません。

Comments

[hrsw]

ご回答いただき、ありがとうございます！
jQueryの1~5行目については記載しなくても動くため、id="modal-default"とclass="open-default"については、class="iziModal”として設定した箇所が、配布されたjsデータによってまとめて動作する記述がされていると思います。どの箇所が該当するかわからず、長文になってしまったのですが、配布されたjsデータの中のopenに関する記述を追加項目にコピペしました。
動作としては、サイト上に19ケ所設置したボタンそれぞれに、別々のモーダルウィンドウが立ち上がる設定をしたいと考えています（現状ではどのボタンを押しても19ケ所を1つにまとめたグループの、1番最初のモーダルウィンドウが表示されてしまいます）。

[kei344]

> 配布されたjsデータによってまとめて動作する記述がされていると思います。
何を言っているのかがわからない。

$(document).on('click', '.open-default'
というコードは open-default というクラスが付いた物にクリック時の動作をつけるコードです。
そのクラスが無ければそもそも動きません。消しても動くのは当然です。

別の物にしたいなら個別にidを振って処理すればよいのでは。

[kei344]

追記文にも書いてないが･･･。

[hrsw]

ご回答ありがとうございました。希望していた動作通りの動きになりました！！