どうか教えて下さい！
| 質問 > フロント機能 > topページのsuliderの追加の仕方 |
フロント機能
 |
| スレッド表示 | 古いものから | 前のトピック | 次のトピック | 下へ |
| 投稿者 | スレッド |
|---|---|
| sawada |
投稿日時: 2016/7/21 15:53
対応状況: −−−
|
半人前   登録日: 2016/7/19 居住地: 投稿: 19 |
Re: topページのsuliderの追加の仕方 headの中にstyle タグがあるかどうかを見てみましたが、ありませんでした。
この方法では難しいのでしょうか？ また、前回いただいておりました、EC-CUBE情報です。 ------------------------------------------------------------------------------------------ [EC-CUBE] 2.13.5 [レンタルサーバ] カゴヤレンタルサーバー [OS] Linux x86_64 [PHP] 5.6.23 [データベース] PostgreSQL 9.3.5 [WEBサーバ] Apache 2.0 Handler [ブラウザ] Google Chrome 51.0.2704.103 m [導入プラグインの有無] パンくずリスト表示プラグイン カテゴリ別MV枠追加、配送先別商品別CSVダウンロード [カスタマイズの有無] ------------------------------------------------------------------------------------------ ご確認をお願いいたします。 |
| shhirose |
投稿日時: 2016/7/20 19:27
対応状況: −−−
|
一人前  登録日: 2014/4/24 居住地: 投稿: 94 |
Re: topページのsuliderの追加の仕方 引用：
これで記載しましたが、縦に画像が並んでしまうだけで、スライドショーになりません。 この状態で縦に並ぶということは、スタイルが適応されていないですね。 スタイルが適応されていれば、画像が重なった状態になっているはずです。 ※z-index を考えると画像1が表示されているはず。 ひとまず表示したページのソースを開いて（ブラウザ上で右クリックしてソースを開く）みて、style タグが head タグの中にあるか確認してください。 また、EC-CUBE のバージョンはいくつですか？2系？3系？ 以下のページの「質問用テンプレート」を引用して記載ください。 http://xoops.ec-cube.net/modules/tinyd0/index.php?id=8
|
| sawada |
投稿日時: 2016/7/20 16:09
対応状況: −−−
|
半人前 登録日: 2016/7/19 居住地: 投稿: 19 |
Re: topページのsuliderの追加の仕方 「A Simple jQuery Slideshow」を利用し、ホームページのトップに画像の切り替えを付けようと試みました。
記述の仕方としては、 <head>のところに、head用のブロックを作り、 <style type="text/css"> #slideshow { position: relative; width: 360px; height: 300px; } #slideshow p { position: absolute; top: 0; left: 0; z-index: 8; opacity: 0.0; margin: 0; background-color: white; /* ボックスの背景色(必須) */ height: 300px; } #slideshow p.active { z-index: 10; opacity: 1.0; } #slideshow p.last-active { z-index: 9; } #slideshow p img { width: 360px; height: 280px; display: block; border: 0; margin-bottom: 10px; /* 画像下部の余白 */ } </style> <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script type="text/javascript"> function slideSwitch() { var $active = $('#slideshow p.active'); if ( $active.length == 0 ) $active = $('#slideshow p:last'); var $next = $active.next().length ? $active.next() : $('#slideshow p:first'); $active.addClass('last-active'); $next.css({opacity: 0.0}) .addClass('active') .animate({opacity: 1.0}, 1000, function() { $active.removeClass('active last-active'); }); } $(function() { setInterval( "slideSwitch()", 5000 ); }); </script> 上記の様に入力しました。 そして、画像を表示させたいbodyの該当ブロックの中身が、 <div class="top-block1"> <p> <a href="リンク先"><img src="画像１" /><br /> コメント</a> </p> </div> <div id="slideshow"> <p class="active"> <a href="リンク先"><img src="スライドショーにしたい画像１" alt="画像"></a> キャプション1 </p> <p> <a href="リンク先"><img src="スライドショーにしたい画像２" alt="画像"></a> キャプション2 </p> </div> これで記載しましたが、縦に画像が並んでしまうだけで、スライドショーになりません。 また、上の画像１とスライドショーの画像を隣に並べて、スライドショーの画像だけを動かしたいと思います。 ここを訂正したらできるというのを教えていただいてもよろしいでしょうか？ また、これ以外にの方法でもっと簡単にできる方法があれば教えていただきたいです。 よろしくお願いいたします。 |
| shhirose |
投稿日時: 2016/7/20 12:08
対応状況: −−−
|
一人前 登録日: 2014/4/24 居住地: 投稿: 94 |
Re: topページのsuliderの追加の仕方 javascript のライブラリは何を使用して、どのように記述（HTML、JavaScript）したかを記載しないとアドバイスもできないかと思います。
|
| sawada |
投稿日時: 2016/7/19 16:30
対応状況: −−−
|
半人前 登録日: 2016/7/19 居住地: 投稿: 19 |
topページのsuliderの追加の仕方 サイトのトップページにリンク付きのスライドショーを追加しようとjavaやcss等を試してみましたが、画像が縦に表示されてしまい、スライドショーになりません。
どのようにしたら、リンク付きのスライドショーを追加できるか、教えていただいてもよろしいでしょうか？ 初歩的な質問で申し訳ありませんが、よろしくお願いします。 |
| « 1 (2) | |
| スレッド表示 | 古いものから | 前のトピック | 次のトピック | トップ |
