バージョン選択

フォーラム

 どうか教えて下さい！  バグ見つけましたよ！  こんな機能あったらなぁ  プラグインについて  その他

メニュー

 当サイトについて  初めてご利用になる方へ  EC-CUBE開発情報

オンライン状況

54 人のユーザが現在オンラインです。 (35 人のユーザが フォーラム を参照しています。)
登録ユーザ: 0
ゲスト: 54
もっと...

サイト内検索
質問 > 管理機能 > 詳細ページの商品画像一覧のスライド機能について

管理機能

新規スレッドを追加する

スレッド表示 | 新しいものから 前のトピック | 次のトピック | 下へ
投稿者 スレッド
ゲスト
投稿日時: 2018/6/6 11:49
対応状況: −−−
詳細ページの商品画像一覧のスライド機能について
-- EC-CUBE3 --
-- macOS High Sierra --
商品詳細ページにて商品の画像を複数枚登録しておく事で、スワイプで画像を切り替えられる様になっています。
これに対し、スワイプだけでなく、両サイドにボタンを設置し、それを押す事でも画像の切り替えが出来る様にしたいです。
※ヤフオクでの出品詳細画像の切り替えと同じ様な機能です。

https://www.ec-cube.net/products/detail.php?product_id=804
EC-CUBE2 で取り扱っている上記の様なスライドショープラグインにてボタンでもスライド出来るプラグインが、EC-CUBE3 では見当たらないので直接実装しようと思うのですが、中々上手くいきません。

detail.twig内の、
$('.slides').slick({
       dots: true,
       arrows: false,
       speed: 300,
       customPaging: function(slider, i) {
              return '<button class="thumbnail">' + $(slider.$slides[i]).find('img').prop('outerHTML') + '</button>';
       }
});


ここの部分のイベントハンドラーを
$('.button').on('click', function())...

.on('click', function())...等に変更するだけでは駄目でした。

ボタン画像の配置も非常に厄介なんですが、何とか解決出来ればと思っています。ご存知の方がいらっしゃいましたらアドバイス頂ければと存じます。
matchbou
投稿日時: 2018/6/6 14:03
対応状況: −−−
一人前
登録日: 2018/3/19
居住地:
投稿: 130
Re: 詳細ページの商品画像一覧のスライド機能について
slickのオプションでappendArrowsを使用すれば出来ませんか？


----------------
アイフォーコム株式会社
お問い合わせ URL：https://www.iforcom.jp/ec/
tel：045-412-3010
EC-CUBEの構築・カスタマイズは有償で承ります。ご相談下さい
ゲスト
投稿日時: 2018/6/6 14:37
対応状況: −−−
Re: 詳細ページの商品画像一覧のスライド機能について
商品詳細画面のdetail.twig内に、
$('.slides').slick({
       dots: true,
       arrows: false,
       speed: 300,
       customPaging: function(slider, i) {
              return '<button class="thumbnail">' + $(slider.$slides[i]).find('img').prop('outerHTML') + '</button>';
       }
});

このslick関数があり、arrows: の項目をtrueにしたらデフォルトのPrevious・nextボタンが出現しました。
なので、
prevArrow:
nextArrow:

をslick関数の中に追加し、使いたいアイコンをhtml表記で実装する事で、デフォルトボタンからアイコンに変更させる事が出来ました！

後はレイアウトの調整をすれば大丈夫そうです。何とか解決出来て良かったです、どうもありがとうございました。
スレッド表示 | 新しいものから 前のトピック | 次のトピック | トップ


 



ログイン


EC-CUBE公式 Amazon Payプラグイン

統計情報

総メンバー数は89,093名です
総投稿数は110,033件です

投稿数ランキング

1
seasoft 		7367
2
468 		3217
3
AMUAMU 		2712
4
nanasess 		2314
5
umebius 		2085
6
yuh 		1819
7
h_tanaka 		1649
8
red 		1570
9
mcontact 		1297
10
tsuji 		958
11
fukap 		907
12
shutta 		835
13
tao_s 		799
14 ramrun 789
15 karin 689
16 sumida 641
17
homan 		633
18 DELIGHT 572
19
patapata 		502
20
flealog 		485


ネットショップの壺

EC-CUBEインテグレートパートナー

Copyright© EC-CUBE CO.,LTD. All Rights Reserved.