ページ管理からページ編集で、トップページを以下のように書き換えてください。追加したのは以下の２つの部分です。
{% block stylesheet %}
<link rel="stylesheet" href="
https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.9.0/css/lightbox.css">{% endblock %}
<script src="
https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.9.0/js/lightbox.js"></script>{#
This file is part of EC-CUBE
Copyright(c) 2000-2015 LOCKON CO.,LTD. All Rights Reserved.
http://www.lockon.co.jp/
This program is free software; you can redistribute it and/or
modify it under the terms of the GNU General Public License
as published by the Free Software Foundation; either version 2
of the License, or (at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program; if not, write to the Free Software
Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA 02111-1307, USA.
#}
{% extends 'default_frame.twig' %}
{% set body_class = 'front_page' %}
{% block stylesheet %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.9.0/css/lightbox.css">
{% endblock %}
{% block javascript %}
<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 %}
<div class="row">
<div class="col-sm-12">
<div class="main_visual">
<div class="item">
<img src="{{ app.config.front_urlpath }}/img/top/mv01.jpg">
</div>
<div class="item">
<img src="{{ app.config.front_urlpath }}/img/top/mv02.jpg">
</div>
<div class="item">
<img src="{{ app.config.front_urlpath }}/img/top/mv03.jpg">
</div>
</div>
</div>
</div>
{% endblock %}
ブロック管理から、ギャラリーのブロックを編集して、
以下のように書き換えてください。
Before
<li class="col-sm-2 col-xs-4"><a href="{{ url('product_detail', {id : 2}) }}" class="item_photo"><img src="{{ app.config.front_urlpath }}/img/top/img10.jpg"></a></li>
After
<li class="col-sm-2 col-xs-4"><a href="{{ app.config.front_urlpath }}/img/top/img10.jpg" class="item_photo" data-lightbox="image-1" data-title="My caption"><img src="{{ app.config.front_urlpath }}/img/top/img10.jpg"></a></li>
このカスタマイズ実際に行ったのが以下のページです。
新着情報下のギャラリーで、１つ目の画像をクリックしてみてください。
http://demo.umebius.com/eccube/3.0.12/ <li class="col-sm-2 col-xs-4"><a href="{{ app.config.front_urlpath }}/img/top/img10.jpg" class="item_photo" data-lightbox="image-1" data-title="タイトル"><img src="{{ app.config.front_urlpath }}/img/top/img10.jpg"></a></li>
<li class="col-sm-2 col-xs-4"><a href="{{ app.config.front_urlpath }}/img/top/img11.jpg" class="item_photo" data-lightbox="image-1" data-title="タイトル"><img src="{{ app.config.front_urlpath }}/img/top/img11.jpg"></a></li>
<li class="col-sm-2 col-xs-4"><a href="{{ app.config.front_urlpath }}/img/top/img12.jpg" class="item_photo" data-lightbox="image-1" data-title="タイトル"><img src="{{ app.config.front_urlpath }}/img/top/img12.jpg"></a></li>
このように続けて書くと複数表示され、キーボードで移動可能です。
----------------
EC-CUBEカスタマイズ・高速化・脆弱性対策・SEO ご相談ください。
2系・3系から4系へのバージョンアップ実績豊富
どうか教えて下さい！
モーダルウィンドウについて
