app/Plugin/DetailPageImage/Resource/template/front/add_detail.twig line 1

Open in your IDE?
  1. {% set config = repository('Plugin\\DetailPageImage\\Entity\\DetailPageImageConfig').get %}
  3. <script>
  4.     $(function() {
  5.         $('.ec-sliderItemRole .item_visual').remove();
  6.         $('.ec-sliderItemRole .item_nav').remove();
  7.         $('.ec-sliderItemRole').prepend($('#add_detail_area'));
  8.     });
  9. </script>
  11. {% if config.thumbnail == 1 %}
  12. <!-- ▼ サムネイルスライド表示 -->
  14. <style>
  15. /* 左右のカラムの幅調整 */
  16. .ec-productRole .ec-sliderItemRole {
  17.     padding-left:0;
  18.     padding-right:0;
  19. }
  20. @media only screen and (min-width: 768px){
  21. .ec-productRole .ec-sliderItemRole {
  22.     width:97%;
  23.     margin-right:3%;
  24. }
  25. .ec-productRole .ec-productRole__profile{
  26.     width:97%;
  27.     margin-left: 3%;
  28. }
  29. }
  31. ul.main_visual-thumbnails {
  32.     margin:0 -8px;
  33. }
  34. ul.main_visual-thumbnails li.item {
  35.     padding:0 8px;
  36.     cursor:pointer;
  37. }
  39. .fa-chevron-circle-left,
  40. .fa-chevron-circle-right{
  41.     position:absolute;
  42.     top:45%;
  43.     z-index:10;
  44.     cursor:pointer;
  45.     font-size:40px;
  46.     opacity:0.5;
  47. }
  48. .fa-chevron-circle-left:hover,
  49. .fa-chevron-circle-right:hover {
  50.     opacity:1;
  51. }
  52. .fa-chevron-circle-left {
  53.     left:15px;
  54. }
  55. .fa-chevron-circle-right {
  56.     right:15px;
  57. }
  59. .slick-prev_thumb,
  60. .slick-next_thumb {
  61.     position:absolute;
  62.     top:40%;
  63.     z-index:10;
  64.     cursor:pointer;
  65.     font-size:40px;
  66.     opacity:0.8;
  67. }
  68. .slick-prev_thumb:hover,
  69. .slick-next_thumb:hover {
  70.     opacity:1;
  71. }
  72. .slick-prev_thumb {
  73.     left:15px;
  74. }
  75. .slick-next_thumb {
  76.     right:15px;
  77. }
  78. </style>
  80. <div id="add_detail_area">
  81.     <ul class="main_visual" style="display:none;">
  82.         {% for ProductImage in Product.ProductImage %}
  83.             <li class="item">
  84.                 {% if config.colorbox is not null %}
  85.                     <a href="{{ asset(ProductImage, 'save_image') }}" class="cbox"><img src="{{ asset(ProductImage, 'save_image') }}"></a>
  86.                 {% else %}
  87.                     <img src="{{ asset(ProductImage, 'save_image') }}">
  88.                 {% endif %}
  89.             </li>
  90.         {% else %}
  91.             <li class="item"><img src="{{ asset(''|no_image_product, 'save_image') }}"/></li>
  92.         {% endfor %}
  93.     </ul>
  94.     {% if Product.ProductImage|length > 1 %}
  95.         <ul class="main_visual-thumbnails" style="display:none;">
  96.             {% for ProductImage in Product.ProductImage %}
  97.                 <li class="item">
  98.                     <img src="{{ asset(ProductImage, 'save_image') }}">
  99.                 </li>
  100.             {% endfor %}
  101.         </ul>
  102.     {% endif %}
  103. </div>
  105. <script>
  106.     $(function(){
  107.         $('.main_visual').css('display', 'block');
  108.         $('.main_visual').slick({
  109.             dots: false,
  110.         {% if config.arrow == 1 or config.arrow == 3 %}
  111.             arrows: true,
  112.             prevArrow: '<i class="fas fa-chevron-circle-left"></i>',
  113.             nextArrow: '<i class="fas fa-chevron-circle-right"></i>',
  114.         {% else %}
  115.             arrows: false,
  116.         {% endif %}
  117.             autoplay: true,
  118.             autoplaySpeed:5000,
  119.             speed: 300,
  120.             asNavFor: '.main_visual-thumbnails'
  121.         })
  122.         
  123.         $('.main_visual-thumbnails').css('display', 'block');
  124.         $('.main_visual-thumbnails').slick({
  125.             slidesToShow: 3,
  126.         {% if config.arrow == 2 or config.arrow == 3 %}
  127.             arrows: true,
  128.             prevArrow: '<i class="fas fa-angle-left slick-prev_thumb"></i>',
  129.             nextArrow: '<i class="fas fa-angle-right slick-next_thumb"></i>',
  130.         {% else %}
  131.             arrows: false,
  132.         {% endif %}
  133.             asNavFor: '.main_visual',
  134.             focusOnSelect: true
  135.         })
  136.     });
  137. </script>
  139. {% else %}
  140. <!-- ▼ サムネイル一覧表示 -->
  142. <style>
  143. /* 左右のカラムの幅調整 */
  144. .ec-productRole .ec-sliderItemRole {
  145.     padding-left:0;
  146.     padding-right:0;
  147. }
  148. @media only screen and (min-width: 768px){
  149. .ec-productRole .ec-sliderItemRole {
  150.     width:97%;
  151.     margin-right:3%;
  152. }
  153. .ec-productRole .ec-productRole__profile{
  154.     width:97%;
  155.     margin-left: 3%;
  156. }
  157. }
  159. .fa-chevron-circle-left,
  160. .fa-chevron-circle-right{
  161.     position:absolute;
  162.     top:45%;
  163.     z-index:10;
  164.     cursor:pointer;
  165.     font-size:40px;
  166.     opacity:0.5;
  167. }
  168. .fa-chevron-circle-left:hover,
  169. .fa-chevron-circle-right:hover {
  170.     opacity:1;
  171. }
  172. .fa-chevron-circle-left {
  173.     left:15px;
  174. }
  175. .fa-chevron-circle-right {
  176.     right:15px;
  177. }
  178. </style>
  180. <div id="add_detail_area">
  181.     <ul class="main_visual" style="display:none;">
  182.         {% for ProductImage in Product.ProductImage %}
  183.             <li class="item">
  184.                 {% if config.colorbox is not null %}
  185.                     <a href="{{ asset(ProductImage, 'save_image') }}" class="cbox"><img src="{{ asset(ProductImage, 'save_image') }}"></a>
  186.                 {% else %}
  187.                     <img src="{{ asset(ProductImage, 'save_image') }}">
  188.                 {% endif %}
  189.             </li>
  190.         {% else %}
  191.             <li class="item"><img src="{{ asset(''|no_image_product, 'save_image') }}"/></li>
  192.         {% endfor %}
  193.     </ul>
  194.     {% if Product.ProductImage|length > 1 %}
  195.         <ul class="main_visual-thumbnails" style="display:none;">
  196.             {% for ProductImage in Product.ProductImage %}
  197.                 <li class="item">
  198.                     <img style="padding-right:1px;cursor:pointer;" src="{{ asset(ProductImage, 'save_image') }}">
  199.                 </li>
  200.             {% endfor %}
  201.         </ul>
  202.     {% endif %}
  203. </div>
  205. <script>
  206.     $(function(){
  207.         $('.main_visual').css('display', 'block');
  208.         $('.main_visual').slick({
  209.             dots: false,
  210.         {% if config.arrow == 1 or config.arrow == 3 %}
  211.             arrows: true,
  212.             prevArrow: '<i class="fas fa-chevron-circle-left"></i>',
  213.             nextArrow: '<i class="fas fa-chevron-circle-right"></i>',
  214.         {% else %}
  215.             arrows: false,
  216.         {% endif %}
  217.             autoplay: true,
  218.             autoplaySpeed:5000,
  219.             speed: 300,
  220.             asNavFor: '.main_visual-thumbnails'
  221.         })
  222.         
  223.         $('.main_visual-thumbnails').css('display', 'block');
  224.         $('.main_visual-thumbnails').slick({
  225.             slidesToShow: {{ Product.ProductImage|length }},
  226.             arrows: false,
  227.             asNavFor: '.main_visual',
  228.             focusOnSelect: true
  229.         })
  230.     });
  231. </script>
  233. {% endif %}
  235. {% if config.colorbox == 1 %}
  236.     <link rel="stylesheet" href="{{ asset('assets/js/jquery.colorbox/1/colorbox.css') }}">
  237. {% elseif config.colorbox == 2 %}
  238.     <link rel="stylesheet" href="{{ asset('assets/js/jquery.colorbox/2/colorbox.css') }}">
  239. {% elseif config.colorbox == 3 %}
  240.     <link rel="stylesheet" href="{{ asset('assets/js/jquery.colorbox/3/colorbox.css') }}">
  241. {% elseif config.colorbox == 4 %}
  242.     <link rel="stylesheet" href="{{ asset('assets/js/jquery.colorbox/4/colorbox.css') }}">
  243. {% elseif config.colorbox == 5 %}
  244.     <link rel="stylesheet" href="{{ asset('assets/js/jquery.colorbox/5/colorbox.css') }}">
  245. {% else %}
  246. {% endif %}
  248. {% if config.colorbox is not null %}
  249.     <script src="{{ asset('assets/js/jquery.colorbox/jquery.colorbox-min.js') }}"></script>
  250.     <script type="text/javascript">
  251.         $(document).ready(function() {
  252.             $(".cbox").colorbox({maxWidth:'100%',maxHeight:'100%',speed:'200'});
  253.         });
  254.     </script>
  255. {% endif %}