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

スライドショーが表示されなくなりました。【チュートリアルP.34】

watanabe > スライドショーが表示されなくなりました。【チュートリアルP.34】 @ 2014/4/16 19:47
はじめまして。

BaserCMSを使い始めたばかりで、チュートリアルを見ながらテンプレートの作成を進めています。

P.34の「BcBaser->mainImage(array(‘all’ => true, ‘id’ => ’MainImage’)) ?>」と入力して適用したあと、トップページのスライドショーが最初の1枚目のみ表示されフェードアウト後、次の画像に進まなくなりました。

オプションに「'num'=>5」と追加すると、ソースでは5枚分の画像が
  • タグで囲まれた状態で書き出されているのですが、スライドは1枚目のみ表示された後、次の画像に進みません。

    BcBaser->mainImage(array(‘all’ => true, ‘id’ => ’MainImage’)) ?>」を削除して、変更前のコードに戻すと5枚とも表示されます。
    ※画像までのパスは絶対パスで記述しています。

    どのようにすれば表示させることができるかご教示いただけないでしょうか。

    よろしくお願いいたします。

    ■ BaserCMSのバージョン:3.02
    ■ レンタルサーバー名:ロリポップ
    ■ スマートURLの利用: [OFF]
    ■ 設置フォルダ: [ドキュメントルート]
    ■ 利用しているデータベース: [ MySQL]
    ■ PHP: 少しなら…
  • n1215 > Re: スライドショーが表示されなくなりました。【チュートリアルP.34】 @ 2014/4/16 23:49
    watanabe 様

    はじめまして。
    先ほど新規インストールで試して現象の再現を確認しました。
    baserCMSアップデートに伴い、メソッドで出力されるタグが変更になったためではないかと思います。

    ●原因と経緯
    元々、BcBaserヘルパーのmainImageメソッドはチュートリアル同梱のindex.htmlファイルに記述されているものと同じく
    <ul id="MainImage">
    	<a href="/index.php/" title="コーポレートサイトにちょうどいい国産CMS"><img src="img/main_image_1.jpg" alt="コーポレートサイトにちょうどいい国産CMS" /></a>
    	<a href="/index.php/" title="全て日本語の国産CMSだから、設置も更新も簡単、わかりやすい。"><img src="img/main_image_2.gif" alt="全て日本語の国産CMSだから、設置も更新も簡単、わかりやすい。" /></a>
    	<a href="/index.php/" title="標準的なWebサイトに必要な基本機能を全て装備"><img src="img/main_image_3.jpg" alt="標準的なWebサイトに必要な基本機能を全て装備" /></a>
    	<a href="/index.php/" title="デザインも自由自在にカスタマイズ可能!"><img src="img/main_image_4.jpg" alt="デザインも自由自在にカスタマイズ可能!" /></a>
    	<a href="/index.php/" title="質問・ご相談はユーザーズフォーラムへ"><img src="img/main_image_5.jpg" alt="質問・ご相談はユーザーズフォーラムへ" /></a>
    </ul>


    とul要素の直下にa要素を吐き出す仕様だったと記憶しています。
    ただこれはあまりよろしくない記述なので、ユーザーフォーラムで以下の指摘がありました。

    引用:
    $this->BcBaser->mainImageで出力するデータにliタグが抜けている
    http://forum.basercms.net/modules/newbb/viewtopic.php?viewmode=&topic_id=1440&forum=8


    これに伴いBcBaserヘルパーのmainImageメソッドの出力は
    <ul id="MainImage">
    	<li><a href="/index.php/" title="コーポレートサイトにちょうどいい国産CMS"><img src="/theme/corp/img/main_image_1.jpg" alt="コーポレートサイトにちょうどいい国産CMS" /></a></li>
    	<li><a href="/index.php/" title="全て日本語の国産CMSだから、設置も更新も簡単、わかりやすい。"><img src="/theme/corp/img/main_image_2.gif" alt="全て日本語の国産CMSだから、設置も更新も簡単、わかりやすい。" /></a></li>
    	<li><a href="/index.php/" title="標準的なWebサイトに必要な基本機能を全て装備"><img src="/theme/corp/img/main_image_3.jpg" alt="標準的なWebサイトに必要な基本機能を全て装備" /></a></li>
    	<li><a href="/index.php/" title="デザインも自由自在にカスタマイズ可能!"><img src="/theme/corp/img/main_image_4.jpg" alt="デザインも自由自在にカスタマイズ可能!" /></a></li>
    	<li><a href="/index.php/" title="質問・ご相談はユーザーズフォーラムへ"><img src="/theme/corp/img/main_image_5.jpg" alt="質問・ご相談はユーザーズフォーラムへ" /></a></li>
    </ul>


    と変わっています。この結果、corp.jsとcorp.cssにおける要素の指定が上手くいかなくなったというわけです。

    ●解決策
    この変更にあわせてcorp.jsとcorp.cssの記述も修正します。
    基本的にはa要素を指し示す部分をli要素に総置換ということになります。

    ・corp.js 4箇所の文字列 'a' を 'li' に置換
        $(function() {
             
            var imgBox = $('#MainImage');
            var fadeSpeed = 1000;
            var switchDelay = 2000;
             
            imgBox.find('li').hide(); // ←(1)
            imgBox.find('li:first').stop().fadeIn(fadeSpeed); //←(2)
         
            setInterval(function(){
                imgBox.find('li:first-child').fadeOut(fadeSpeed) //←(3)
                .next('li').fadeIn(fadeSpeed) //←(4)
                .end().appendTo(imgBox);
            },switchDelay);
             
        });
    


    ・corp.css 1箇所  a を li に置換
    #MainImage {
    	position:relative;
    	height:342px;
    }
    #MainImage > li{ /*←ここ*/
    	display :block;
    	position :absolute;
    	top :0px;
    }
    


    以上、ご確認ください。

    Twitter: @n_1215

    watanabe > Re: スライドショーが表示されなくなりました。【チュートリアルP.34】 @ 2014/4/17 8:26
    早速ご回答いただきましてありがとうございます。

    ご指摘の箇所を修正しましたところ、無事動作するようになりました。

    本当にありがとうございました。

    Watanabe
    ログイン
    ユーザー名:
    パスワード:


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

    検索

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

    フォーラムガイド


    関連リンク

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

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