<div id='neilplayerblock'>
<{if $block.illustrate}><div id='illustratebox'><{$block.illustrate}></div><{/if}>

<div id='bxslider_play' class='bxslider_play_<{$block.bid}>'>
<{if $block.setting.themefolder eq 'computer' &&  $xoops_isadmin}>
<a target="_blank" id='player_block_admin' class='btn' tabindex="-1" href="<{xoAppUrl}>modules/neothemesadmin/admin/playeradmin.php?typeval=1"><{$smarty.const._THEME_IMGADMIN}></a>
<{/if}>
<ul class="bxslider bxslider_box<{$block.bid}>">
<{foreach item=jsimg from=$block.content name=jsimg}>
<li><img id='img_<{$jsimg.imgid}>_box' alt="<{$jsimg.content}>" title="<{$jsimg.content}>" src="<{xoAppUrl}>uploads/neothemesadmin/b<{$jsimg.imgid}>.png?state=<{$smarty.const._MS_SHARED270|date}>"  data-url="<{$jsimg.url|default:'javascript:void(0);'}>"  data-target="<{if $jsimg.target eq '0'}>_self<{else}>_blank<{/if}>" /></li>
<{/foreach}>
</ul>
</div>
</div>


<script src="<{xoAppUrl}>modules/neillibrary/js/bxslider/js/jquery.bxslider.js"></script>

<script>
$(document).ready(function() {
// 初始化 bxSlider
setTimeout(function() {
  var slider = $('.bxslider_box<{$block.bid}>').bxSlider({
  mode: '<{$block.options.3}>',// 設置幻燈片切換效果模式為 'fade'（淡入淡出）
  moveSlides: 1,  // 每次滑動 1 頁 
  infiniteLoop: true, // 啟用無限循環播放 
  slideWidth: <{$block.width}>, // 設定每個幻燈片的寬度
  minSlides: 1,  // 設定顯示的最小幻燈片數量
  maxSlides: 1,  // 設定顯示的最大幻燈片數量 
  speed: 800, // 設定切換速度（以毫秒為單位）
  auto: <{if $block.options.5}>true<{else}>false<{/if}>,  // 啟用自動播放功能 
  pause: <{$block.options.4}>, // 設定自動播放的時間間隔（以毫秒為單位）  
  autoHover: true,// 滑鼠滑過時停止自動播放 
  touchEnabled: <{if $block.setting.themefolder eq 'computer'}>false<{else}>true<{/if}>, //如果為 true，滑桿將允許觸摸滑動過渡
  controls: true // 顯示幻燈片的左右控制按鈕
});


// 綁定圓點導航的 Tab 與 Enter 行為
$('.bxslider_play_<{$block.bid}> .bx-pager-item a').on('focus', function() {
  var slideIndex = $(this).data('slide-index');
  slider.goToSlide(slideIndex); // 切換到指定的幻燈片
  slider.stopAuto(); // 停止自動播放
});
}, 100);

<{if $block.setting.themefolder eq 'computer'}>
// 使用 Enter 鍵開啟對應圖片的連結
setTimeout(function() {
$('.bxslider_play_<{$block.bid}> .bx-pager-item a').on('keydown', function(event) {
  if (event.key === 'Enter') {
    var slideIndex = $(this).data('slide-index');
    // 調整索引來確保顯示順序的正確性
    var adjustedIndex = (slideIndex + 1) % $('.bxslider li').length;
    var url = $('.bxslider li').eq(adjustedIndex).find('img').data('url'); // 假設圖片的連結儲存在 data-url 中
    var target = $('.bxslider li').eq(adjustedIndex).find('img').data('target') || '_self';
    if (url) {
      window.open(url, target); // 開啟圖片對應的連結
    }
  }
});
}, 100);
<{/if}>

// 只綁定圖片點擊事件
setTimeout(function() {
$('.bxslider_play_<{$block.bid}> .bxslider li img').off('click').on('click', function() {
  var url = $(this).data('url'); // 取得圖片的 URL
  var target = $(this).data('target') || '_self'; // 取得圖片的 target（若無設定則使用 _self）
  if (url) {
    window.open(url, target); // 開啟指定的連結
  }
});
}, 100);
});
</script>

<script>
if($("#construct<{$block.bid}>").length == '1') {
$("#construct<{$block.bid}>").addClass('noblockcontent');
}
$('.box<{$block.bid}> .block-title .ielement').html("<span class="blocktitle blocktitleto<{$block.bid}>" name="<{$block.bid}>"><{$block.titlevar}></span>");	
</script>