■ユーザーズフォーラム リニューアルのお知らせ
新規投稿は新ユーザーズフォーラムにお願いします。

スライダーの画像をliタグで囲む方法ありますか?

小桃れい > スライダーの画像をliタグで囲む方法ありますか? @ 2014/2/11 2:42
メインスライダーがulタグで囲まれているので、それぞれの画像をliタグで囲みたいのですが、なかなか解決方法にたどり着けないでいます。

mainImageの関数を使って書き出すと、
<?php $this->BcBaser->mainImage(array('all' => true, 'num' => 5, 'width' => 980)) ?>


<ul id="MainImage">
<a href="/">画像タグ</a>
<a href="/">画像タグ</a>
<a href="/">画像タグ</a>
<a href="/">画像タグ</a>
<a href="/">画像タグ</a>
</ul>


のようになってしまいます。

デモテーマもご参考ください。
http://demo.basercms.net/
↓ スライダー部分のソース
<ul id="MainImage">
<a href="/" title="コーポレートサイトにちょうどいい国産CMS"><img src="/theme/nada-icons/img/main_image_1.jpg" alt="コーポレートサイトにちょうどいい国産CMS" width="750" /></a>
<a href="/" title="全て日本語の国産CMSだから、設置も更新も簡単、わかりやすい。"><img src="/theme/nada-icons/img/main_image_2.jpg" alt="全て日本語の国産CMSだから、設置も更新も簡単、わかりやすい。" width="750" /></a>
<a href="/" title="標準的なWebサイトに必要な基本機能を全て装備"><img src="/theme/nada-icons/img/main_image_3.jpg" alt="標準的なWebサイトに必要な基本機能を全て装備" width="750" /></a>
<a href="/" title="デザインも自由自在にカスタマイズ可能!"><img src="/theme/nada-icons/img/main_image_4.jpg" alt="デザインも自由自在にカスタマイズ可能!" width="750" /></a>
<a href="/" title="質問・ご相談はユーザーズフォーラムへ"><img src="/theme/nada-icons/img/main_image_5.jpg" alt="質問・ご相談はユーザーズフォーラムへ" width="750" /></a>
</ul>


何かいい方法をご存じの方がいらっしゃいましたら、ご教授お願いいたします<(_ _)>


■ BaserCMSのバージョン:baserCMS 3.0.1
■ レンタルサーバー名:heteml
■ スマートURLの利用: ON
■ 設置フォルダ: ドキュメントルート
■ 利用しているデータベース: MySQL
■ PHPスキル(自己評価): E
tecking > Re: スライダーの画像をliタグで囲む方法ありますか? @ 2014/2/11 9:33
小桃れいさん

<?php
	ob_start();
	$this->BcBaser->mainImage(array('all' => true, 'num' => 5, 'width' => 980));
	$mainImage = ob_get_clean();
	echo preg_replace('/((<a.+?>)?<img.+?>(<\/a>)?)/', '<li>$1</li>', $mainImage);
?>


$this->BcBaser->mainImage の出力をいったんバッファに溜めて $mainImage に格納、preg_replace で置換処理を行なって出力という流れです。
スライダー画像のリンク先URLの有無にかかわらず、当方の環境ではうまく置換されました。

実装法はいろいろあるとおもうのですが、さくっとできそうな一つのアイディアとして。
kaburk.com > Re: スライダーの画像をliタグで囲む方法ありますか? @ 2014/2/11 10:29
既に、良さそうな方法の回答が有りましたがベタな書き方もいかがでしょうか。
allオプションを false にすると、画像が個別に指定できるようです。

<ul id="MainImage">
  <li><?php $this->BcBaser->mainImage(array('all' => false, 'num' => 1, 'width' => 980)); ?></li>
  <li><?php $this->BcBaser->mainImage(array('all' => false, 'num' => 2, 'width' => 980)); ?></li>
  <li><?php $this->BcBaser->mainImage(array('all' => false, 'num' => 3, 'width' => 980)); ?></li>
  <li><?php $this->BcBaser->mainImage(array('all' => false, 'num' => 4, 'width' => 980)); ?></li>
  <li><?php $this->BcBaser->mainImage(array('all' => false, 'num' => 5, 'width' => 980)); ?></li>
</ul>


このallオプションをtrueにした時の件は、コアのバグのようでして、開発版で修正が入っているようです。

https://github.com/basercms/basercms/commit/ffd42df7a007c50d09c5f000ad4afb3660c54569
https://github.com/basercms/basercms/commit/ffd42df7a007c50d09c5f000ad4afb3660c54569.patch

ですので、次のリリース版ではなおっていると思うのですが、
取り急ぎ上記修正をコアのソースに反映するか、
または、公式サイトの http://basercms.net/download/past にある
baserCMS Nightly( https://github.com/basercms/basercms/zipball/dev-3 ) や、
githubの開発版(dev-3ブランチ)を使うと改善されたりします。

よかったら参考にしてください。
小桃れい > Re: スライダーの画像をliタグで囲む方法ありますか? @ 2014/2/11 12:15
teckingさん

お早いお返事ありがとうございます!
さっそく試してみたら、さくっとできました。
こんな便利な関数があるのですね。。。
これ、他の場面でも利用できそうです!ありがとうございました!!
小桃れい > Re: スライダーの画像をliタグで囲む方法ありますか? @ 2014/2/11 12:24
kaburk.comさん

ご教授ありがとうございます!
このような根本的な解決方法を探していてはまっていたので、とても勉強になりました。

開発版の修正も試させていただいたのですが、画像が5枚に満たない場合に空の<li>タグが入って、画像無しのスライドが表示されてしまいます。
ソースを触らず管理画面だけでスライドの枚数に融通を利かせたかったので、画像が存在しない場合はタグを追加しないようなオプション指定とかがあったらありがたいなと思いました。
小桃れい > Re: スライダーの画像をliタグで囲む方法ありますか? @ 2014/2/11 12:45
追記です。

firefoxのみですが、スライダーの<a>タグの中に、指定したはずのないwidth属性の数値が入力されてしまい、スライダー画像が途中で切れて表示されてしまう現象で困っていました。
リロードすると正常に表示されますが、ブラウザキャッシュを削除してリロードするとまた変な画像幅が指定されてしまいます。

今回の質問で解決した<li>タグで囲むことによって、この現象も解決したのでここでご報告させていただきます。

スライダーのjsはbaserテーマ「nada-icon」に同梱されているbox-sliderを使用させて頂きました。
ログイン
ユーザー名:
パスワード:


  新規登録 / パスワード紛失

検索

facebook
フォーラムで悩みが解決した場合など、よかったら「いいね!」をポチっとクリックしてください!質問の回答者や開発者の励みになります

フォーラムガイド


関連リンク

オンライン状況
22 人のユーザが現在オンラインです。 (20 人のユーザが フォーラム を参照しています。)

登録ユーザ: 0
ゲスト: 22