kanegonyo > トップページの画像をJQueryで自動的に入れ替えたい @ 2017/2/14 0:10
先日より，いろいろとお尋ねして申し訳ありません。 Simplecorpでトップページの画像を数秒ごとに入れ替えたいと，お客様から要望がありました。フリーのJQueryのプラグインファイルを利用して入替ができるようにしたいと考えています。恐らく，/app/webroot/theme/simplecorp/Layouts/default.php だと思うのですが，実際に可能かどうかご教授いただけますと助かります。サーバ：ロリポップデータベースバージョン：MySQL5.6 baserCMSバージョン： 3.0.9 CakePHPバージョン： 2.5.9 PHP Version 5.5.25

kanegonyo > トップページの画像をJQueryで自動的に入れ替えたい @ 2017/2/14 0:10

先日より，いろいろとお尋ねして申し訳ありません。

Simplecorpでトップページの画像を数秒ごとに
入れ替えたいと，お客様から要望がありました。
フリーのJQueryのプラグインファイルを利用して
入替ができるようにしたいと考えています。

恐らく，/app/webroot/theme/simplecorp/Layouts/default.php
だと思うのですが，実際に可能かどうかご教授いただけますと助かります。

サーバ：ロリポップ
データベースバージョン：MySQL5.6
baserCMSバージョン： 3.0.9
CakePHPバージョン： 2.5.9
PHP Version 5.5.25

夏輝 > Re: トップページの画像をJQueryで自動的に入れ替えたい @ 2017/2/14 3:01
こんばんは。簡単に回答してしまうと「可能」です。 BXSlider辺りなんかはいかがでしょうか？・導入方法 http://on-ze.com/archives/1658 ・basercmsでの利用事例 http://cielo-ds.xsrv.jp/bceco3/ どうしても難しければまたお知らせ下さい！ @KAZMMD

kanegonyo > Re: トップページの画像をJQueryで自動的に入れ替えたい @ 2017/2/14 9:54
夏輝様ご返信ありがとうございます。わたしも，教えていただいたサイトのjQueryはダウンロードをしていました。その中で，このような一文がありました。 >とりあえずサーバーの任意の場所にアップロードして、html の～内に埋め込みます。 index.phpに～がなく \app\webroot\theme\simplecorp\Layouts\default.phpに記述すればいいのか，悩んでいました。また，スライダー部分に関しては BcBaser->img('/img/img_top_main.jpg',array('alt'=>'BaserCMS inc.メインイメージ')) ?> 上記の部分に記述することによって，可能なのか不安でしたのでお尋ねした次第です私の理解が正しいかも含めご教授いただけますと助かります。

kanegonyo > Re: トップページの画像をJQueryで自動的に入れ替えたい @ 2017/2/14 9:54

夏輝様

ご返信ありがとうございます。
わたしも，教えていただいたサイトのjQueryはダウンロードをしていました。

その中で，このような一文がありました。
>とりあえずサーバーの任意の場所にアップロードして、html の～内に埋め込みます。

index.phpに～がなく

\app\webroot\theme\simplecorp\Layouts\default.phpに
記述すればいいのか，悩んでいました。
また，スライダー部分に関しては

BcBaser->img('/img/img_top_main.jpg',array('alt'=>'BaserCMS inc.メインイメージ')) ?>

上記の部分に記述することによって，可能なのか不安でしたので
お尋ねした次第です

私の理解が正しいかも含めご教授いただけますと助かります。

夏輝 > Re: トップページの画像をJQueryで自動的に入れ替えたい @ 2017/2/16 2:31
kanegonyoさん、こんばんは。今、他のトラブルも出ているようなのでテーマファイルにスライダーを組み込んで管理画面で写真やコメントを変えられるようなのは一旦後回しにしたいと思います。一旦こちらでお知らせする内容は、物凄く簡単にスライダーを組み込む方法です。もし、テーマファイルを操作して自由にカスタマイズしたい場合は少しお時間を下さい。では、以下に「簡単スライダー導入方法！」について記載しますので事前に、スライドさせたい画像を複数枚用意しておいて下さいね。 ※width：940px、height:360px くらいがオススメかと思います。 1. こちらのサイトにアクセスし、「CREATE A SLIDER」をクリックします。　　⇒http://www.sliderui.com/ 2. 「Give the slider a name:」で、適当なスライダー名称を決定します。 3. 左側にある、「Add Slide」を枚数分繰り返しアップロードします。 4. アップロードが完了したら「Add Slide」ボタンの上にある「SETTING」を選びます。 5. サンプルでは「Auto Start」と「Controls Enabled」のみチェックをしています。（お好みで選んで下さい） 6. 選択が終わったら上の「Save Settings」を押します。 7. Saveボタンの上野「Embed Slider」をクリックして「Click here to copy code」を選択 8. ここで、SimpleCorpのテーマ管理画面に移動します。 9. テーマの管理画面から「default.php」の編集ボタンを選択。 10. 以下のソースコードの箇所を見つけてください。 `<!-- begin TopMain --> <div id="TopMain"> <?php $this->BcBaser->img('/img/img_top_main.jpg',array('alt'=>'BaserCMS inc.メインイメージ')) ?> </div> <!-- end TopMain -->` 11. メインイメージの表示されている真上の行に、さっきコピーしたEmbed Codeを貼り付けます。 12. 以下のようになっていることを確認してください。　※ data-slider-id="rqdmwy"は人によって違います。 `<!-- begin TopMain --> <div id="TopMain"> <div data-slider-id="rqdmwy"></div> <script type="text/javascript" src="http://app.sliderui.com/sliders/rqdmwy.js"></script> <?php $this->BcBaser->img('/img/img_top_main.jpg',array('alt'=>'BaserCMS inc.メインイメージ')) ?> </div> <!-- end TopMain -->` 13. メインイメージの行を削除、またはコメントアウトします。 14. 保存すると、スライダーの該当箇所の下にかなりの余白が出来てしまうので、以下の内容に変更します。 `<!-- begin TopMain --> <div id="TopMain"> <div data-slider-id="rqdmwy" style="margin-bottom:-70px;"></div> <script type="text/javascript" src="http://app.sliderui.com/sliders/rqdmwy.js"></script> <!-- <?php $this->BcBaser->img('/img/img_top_main.jpg',array('alt'=>'BaserCMS inc.メインイメージ')) ?> --> </div> <!-- end TopMain -->` 15. ここまで出来たら保存を押して、トップページを確認してみてください。わずか5分程度でいきなりスライダーを設定することが出来ていると思います！ ※ この記事を書いている半分以下の時間で出来てしまいます。笑ではでは、しっかりカスタマイズ出来るようにスライダーを設定したい場合はお知らせ下さい。ちなみに、上記オンラインスライダーを設置したサンプルサイトは以下になります。 http://cielo-ds.xsrv.jp/bcsc/

夏輝 > Re: トップページの画像をJQueryで自動的に入れ替えたい @ 2017/2/16 2:31

kanegonyoさん、こんばんは。

今、他のトラブルも出ているようなのでテーマファイルにスライダーを組み込んで
管理画面で写真やコメントを変えられるようなのは一旦後回しにしたいと思います。

一旦こちらでお知らせする内容は、物凄く簡単にスライダーを組み込む方法です。
もし、テーマファイルを操作して自由にカスタマイズしたい場合は少しお時間を下さい。

では、以下に「簡単スライダー導入方法！」について記載しますので
事前に、スライドさせたい画像を複数枚用意しておいて下さいね。
※width：940px、height:360px くらいがオススメかと思います。

1. こちらのサイトにアクセスし、「CREATE A SLIDER」をクリックします。
　　⇒http://www.sliderui.com/
2. 「Give the slider a name:」で、適当なスライダー名称を決定します。
3. 左側にある、「Add Slide」を枚数分繰り返しアップロードします。
4. アップロードが完了したら「Add Slide」ボタンの上にある「SETTING」を選びます。
5. サンプルでは「Auto Start」と「Controls Enabled」のみチェックをしています。（お好みで選んで下さい）
6. 選択が終わったら上の「Save Settings」を押します。
7. Saveボタンの上野「Embed Slider」をクリックして「Click here to copy code」を選択
8. ここで、SimpleCorpのテーマ管理画面に移動します。
9. テーマの管理画面から「default.php」の編集ボタンを選択。
10. 以下のソースコードの箇所を見つけてください。

<!-- begin TopMain -->
<div id="TopMain">
<?php $this->BcBaser->img('/img/img_top_main.jpg',array('alt'=>'BaserCMS inc.メインイメージ')) ?>
</div>
<!-- end TopMain -->

11. メインイメージの表示されている真上の行に、さっきコピーしたEmbed Codeを貼り付けます。
12. 以下のようになっていることを確認してください。　※ data-slider-id="rqdmwy"は人によって違います。

<!-- begin TopMain -->
<div id="TopMain">
<div data-slider-id="rqdmwy"></div>
<script type="text/javascript" src="http://app.sliderui.com/sliders/rqdmwy.js"></script>
<?php $this->BcBaser->img('/img/img_top_main.jpg',array('alt'=>'BaserCMS inc.メインイメージ')) ?>
</div>
<!-- end TopMain -->

13. メインイメージの行を削除、またはコメントアウトします。
14. 保存すると、スライダーの該当箇所の下にかなりの余白が出来てしまうので、以下の内容に変更します。

<!-- begin TopMain -->
<div id="TopMain">
<div data-slider-id="rqdmwy" style="margin-bottom:-70px;"></div>
<script type="text/javascript" src="http://app.sliderui.com/sliders/rqdmwy.js"></script>
<!-- <?php $this->BcBaser->img('/img/img_top_main.jpg',array('alt'=>'BaserCMS inc.メインイメージ')) ?> -->
</div>
<!-- end TopMain -->

15. ここまで出来たら保存を押して、トップページを確認してみてください。

わずか5分程度でいきなりスライダーを設定することが出来ていると思います！
※ この記事を書いている半分以下の時間で出来てしまいます。笑

ではでは、しっかりカスタマイズ出来るようにスライダーを設定したい場合はお知らせ下さい。

ちなみに、上記オンラインスライダーを設置したサンプルサイトは以下になります。
http://cielo-ds.xsrv.jp/bcsc/

スレッド表示 | 新しいものから

前のトピック | 次のトピック | トップ

トップページの画像をJQueryで自動的に入れ替えたい

キーワード検索