moredeepさんと同じ内容になってしまいますが、具体的に書いてみます。
moredeepさんの方法を試した結果が書かれていませんが、既に試されているのであれば無視して下さって構いません。
以下のように書かれているところを、
javascript
1$(function() {
2 var html ='',
3 $select = $('#select_detail'),
4 selectHtml = $select.detach(),
5 PAGE_NUM = 5,
6 DIR = 'images/details2/',
7 BEFORE = 'page_',
8 EXTENSION = '.png';
9
10 for(var i=0; i<=PAGE_NUM ;i=i+1|0){
11 var file = DIR + BEFORE + i + EXTENSION,
12 img_id = i === 0 ? 'id="start"' : '',
13 li_class = i === 0 ? '' : 'class="d_none"';
14
15 html += '<li '+ li_class +'data-src="'+file+'"><img src="'+file+'"'+img_id+'></li>';
16 }
17 $('#lightgallery').html(html).lightGallery().on('onSlideItemLoad.lg',function(){
18 $('.lg-toolbar').append(selectHtml);
19
20 $('.lg-next,.lg-prev,.lg-thumb-item').on('click',function(e){
21 var idx=$('.lg-thumb-item').index($('.lg-thumb-item.active'));
22 if($(this).is('.lg-thumb-item')) idx=$('.lg-thumb-item').index(this);
23 idx+=($(this).is('.lg-prev')?-1:0)+($(this).is('.lg-next')?1:0);
24 if(idx<0) idx=$('.lg-thumb-item').length-1;
25 if(idx>=$('.lg-thumb-item').length) idx=0;
26 $('.lg-thumb-item').removeClass('active').eq(idx).addClass('active');
27 });
28 });
29});
次のように修正したらどうなるでしょうか?
javascript
1$(function() {
2 var html ='',
3 $select = $('#select_detail'),
4 selectHtml = $select.detach(),
5 PAGE_NUM = 5,
6 DIR = 'images/details2/',
7 BEFORE = 'page_',
8 EXTENSION = '.png';
9
10 for(var i=0; i<=PAGE_NUM ;i=i+1|0){
11 var file = DIR + BEFORE + i + EXTENSION,
12 img_id = i === 0 ? 'id="start"' : '',
13 li_class = i === 0 ? '' : 'class="d_none"';
14
15 html += '<li '+ li_class +'data-src="'+file+'"><img src="'+file+'"'+img_id+'></li>';
16 }
17 $('#lightgallery').html(html).lightGallery().on('onSlideItemLoad.lg',function(){
18 $('.lg-toolbar').append(selectHtml);
19 });
20
21 // この部分を外に出しました
22 $('.lg-next,.lg-prev,.lg-thumb-item').on('click',function(e){
23 var idx=$('.lg-thumb-item').index($('.lg-thumb-item.active'));
24 if($(this).is('.lg-thumb-item')) idx=$('.lg-thumb-item').index(this);
25 idx+=($(this).is('.lg-prev')?-1:0)+($(this).is('.lg-next')?1:0);
26 if(idx<0) idx=$('.lg-thumb-item').length-1;
27 if(idx>=$('.lg-thumb-item').length) idx=0;
28 $('.lg-thumb-item').removeClass('active').eq(idx).addClass('active');
29 });
30});