どうか教えて下さい！
| 質問 > フロント機能 > topページのsuliderの追加の仕方 |
フロント機能
 |
| スレッド表示 | 新しいものから | 前のトピック | 次のトピック | 下へ |
| 投稿者 | スレッド |
|---|---|
| sawada |
投稿日時: 2016/7/19 16:30
対応状況: −−−
|
半人前   登録日: 2016/7/19 居住地: 投稿: 19 |
topページのsuliderの追加の仕方 サイトのトップページにリンク付きのスライドショーを追加しようとjavaやcss等を試してみましたが、画像が縦に表示されてしまい、スライドショーになりません。
どのようにしたら、リンク付きのスライドショーを追加できるか、教えていただいてもよろしいでしょうか？ 初歩的な質問で申し訳ありませんが、よろしくお願いします。 |
| shhirose |
投稿日時: 2016/7/20 12:08
対応状況: −−−
|
一人前  登録日: 2014/4/24 居住地: 投稿: 94 |
Re: topページのsuliderの追加の仕方 javascript のライブラリは何を使用して、どのように記述（HTML、JavaScript）したかを記載しないとアドバイスもできないかと思います。
|
| 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 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/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/21 16:00
対応状況: −−−
|
一人前 登録日: 2014/4/24 居住地: 投稿: 94 |
Re: topページのsuliderの追加の仕方 style タグ等をブロックではなく、コンテンツ部分に記載して見てください。
これで最低限スタイルは適応されるのではと思います。
|
| sawada |
投稿日時: 2016/7/21 17:13
対応状況: −−−
|
半人前 登録日: 2016/7/19 居住地: 投稿: 19 |
Re: topページのsuliderの追加の仕方 デザイン管理 > PC > ページ詳細設定 > 該当ページの『ページ詳細』部分の『編集』をクリックし、 2つ前に投稿したhead部分とbody部分を一緒にして入力しましたが、スライドショーになるようになりましたが、入力したタグ部分の同じものが上下で2セット出てきてしまいました。
先程入れたブロックを外した上で入力しましたが、上のような形になりました。 対処方法はありませんか？ |
| shhirose |
投稿日時: 2016/7/21 17:34
対応状況: −−−
|
一人前 登録日: 2014/4/24 居住地: 投稿: 94 |
Re: topページのsuliderの追加の仕方 簡易的にHTMLを作ってみましたが、問題なく表示されますね。
https://github.com/shhirose/eccube_xoops_77183 zip でダウンロードして index.html を開いてみてください。 slideshow という id 属性が複数あったりしないですかね？
|
| sawada |
投稿日時: 2016/7/21 18:06
対応状況: −−−
|
半人前 登録日: 2016/7/19 居住地: 投稿: 19 |
Re: topページのsuliderの追加の仕方 出来ました。
styleタグの中の.（ドット）が抜けている部分を見落としてました。 もう１つありまして、今この状態だと、画像１が右寄せになってしまい、スライドショーにしたい画像が改行されて左側に行ってしまっている状態になってます。 理想としては、スライドショーに入れない画像１を左側に、スライドショーにしたい画像を右側にして、1行でまとめて並べて表示させたいのですが、難しいでしょうか？ |
| shhirose |
投稿日時: 2016/7/21 19:40
対応状況: −−−
|
一人前 登録日: 2014/4/24 居住地: 投稿: 94 |
Re: topページのsuliderの追加の仕方 修正しました。
https://github.com/shhirose/eccube_xoops_77183 こんなイメージでしょうか？ 変更箇所 https://github.com/shhirose/eccube_xoops_77183/commit/be1bfc365e6bc0839e232cc949d0e10d6b3c3854
|
| (1) 2 » | |
| スレッド表示 | 新しいものから | 前のトピック | 次のトピック | トップ |
