初めまして
ここに
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">
上記導入出来たのは
(例えば5枚写真があった場合)
5番目
1番目
2番目
3番目
4番目
5番目
1番目
どうやって最前と最後のダブルしたの写真を消しますか?
ちなみに、拡大してないとき全然問題が無いです。
ご教授いただけますと幸いです。
以上、
よろしくお願いいたします。
P.S.
EC-CUBE 3.0.13
さくらサーバー