初めまして
ここに
http://xoops.ec-cube.net/modules/newbb/viewtopic.php?viewmode=thread&topic_id=18311&forum=5&post_id=78936#forumpost78936 参考して商品詳しくページに成功導入できました
ですが写真を呼びの時一番目の写真と最後の写真がダブルに載せました。
#}
{% extends 'default_frame.twig' %}
{% set body_class = 'product_page' %}
{% block stylesheet %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.9.0/css/lightbox.css">
{% endblock %}
{% block javascript %}
<script>
$(function(){ $('.carousel').slick({ infinite: false, speed: 300, prevArrow:'<button type="button" class="slick-prev">
<span class="angle-circle">
<svg class="cb cb-angle-right">
<use xlink:href="#cb-angle-right" /></svg></span></button>', nextArrow:'
<button type="button" class="slick-next">
<span class="angle-circle">
<svg class="cb cb-angle-right"><use xlink:href="#cb-angle-right" />
</svg>
</span>
</button>', slidesToShow: 4, slidesToScroll: 4, responsive: [ { breakpoint: 768, settings: { slidesToShow: 3, slidesToScroll: 3 } } ] });
$('.slides').slick({ dots: true, arrows: false, speed: 300, customPaging: function(slider, i) { return '<button class="thumbnail">' +
$(slider.$slides[i]).find('img').prop('outerHTML') + '</button>'; } }); $('#favorite').click(function() { $('#mode').val('add_favorite'); }); $('#add-cart').click(function() { $('#mode').val('add_cart'); }); // bfcache無効化 $(window).bind('pageshow', function(event) { if (event.originalEvent.persisted) { location.reload(true); } }); });
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.9.0/js/lightbox.js">
</script>
<script> $(function(){ $('.main_visual').slick({ dots: true, arrows: false, autoplay: true, speed: 300 }); });
</script>
{% endblock %}
{% block main %}
{# todo ブロック化} <div id="topicpath" class="row"> {% for ProductCategory in Product.ProductCategories %} <ol> <li><a href="{{ url('product_list') }}">全商品</a></li>
{% for Category in ProductCategory.Category.path %}
<li><a href="{{ url('product_list') }}?category_id={{ Category.id }}">{{ Category.name }}</a></li>
{% endfor %} <li>{{ Product.name }}</li> </ol>
{% endfor %} </div>
#}
<!-- ▼item_detail▼ -->
<div id="item_detail">
<div id="detail_wrap" class="row">
<!--★画像★-->
<div id="item_photo_area" class="col-sm-6"> <div id="detail_image_box__slides" class="slides">
{% if Product.ProductImage|length > 0 %}
{% for ProductImage in Product.ProductImage %}
<a href="{{ app.config.image_save_urlpath }}/{{ ProductImage|no_image_product }}" class="item_photo" data-lightbox="image-1" data-title="タイトル" width="200%"><img src="{{ app.config.image_save_urlpath }}/{{ ProductImage|no_image_product }}"></a>
{% endfor %}
{% else %}
<div id="detail_image_box__item">
<img src="{{ app.config.image_save_urlpath }}/{{ ''|no_image_product }}"/></div>
{% endif %}
</div>
</div>
<section id="item_detail_area" class="col-sm-6">
上記導入出来たのは
(例えば５枚写真があった場合)
５番目
１番目
２番目
３番目
４番目
５番目
１番目
どうやって最前と最後のダブルしたの写真を消しますか？
ちなみに、拡大してないとき全然問題が無いです。
ご教授いただけますと幸いです。
以上、
よろしくお願いいたします。
P.S.
EC-CUBE 3.0.13
さくらサーバー
どうか教えて下さい！
