3

最初に記事を評価してから、評価ボックスを閉じてビデオを表示するための素敵なスライドボックスを作成しようとしています。私はJoomlaでこれを行っており、このコードを少し編集して使用しています: http://jsfiddle.net/AetnV/72/

これは私のバージョンのコードです:(問題は静的なhtmlページ(Joomla以外)で完璧に動作しますが、Joomlaではそうではありません.JCEとグローバル構成からのjavascriptとiframeのブラックリストを無効にしましたが、まだ何も試していません.他のテーマでも同じです。

  <script type='text/javascript' src='http://code.jquery.com/jquery-1.5.2.js'></script>

  <link rel="stylesheet" type="text/css" href="/css/normalize.css">
  <link rel="stylesheet" type="text/css" href="/css/result-light.css">

  <style type='text/css'>
    * { margin: 0; padding: 0; outline: none; }

body { background: #CCC; margin: 0; padding: 0; font: 10px normal Arial, Helvetica, sans-serif; }

/*--Main Image Area--*/
.main_image {
    margin: 20px 0 0 20px; width: 650px; height: 400px;
    float: left;  background: white; position: relative;  overflow: hidden;
    color: #fff;

    moz-box-shadow: 0px 0px 4px #666; 
    -webkit-box-shadow: 0px 0px 4px #666; 
    box-shadow: 0px 0px 4px #666;
}

.main_image h2 { font-size: 2em; font-weight: normal; margin: 0 0 5px; padding: 10px; }
.main_image p  { font-size: 1.2em; padding: 10px; margin: 0; line-height: 1.6em; }
.main_image .desc  { position: absolute; bottom: 0; left: 0; width: 100%; display: none;}
.main_image .block { height: 410px; width: 100%; background: #111; border-top: 1px solid #000; }
.main_image a.collapse {
    background: black; height: 30px; width: 650px;
    position: absolute; top: -30px; right: 0px;
    font: normal 12px arial; color: white; text-align: center;
}
.main_image a.show { background-position: left bottom; } 
  </style>



<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$(document).ready(function() {

    //Show Banner
    $(".main_image .desc").show(); //Show Banner
    $(".main_image .block").animate({ opacity: 1 }, 1 ); //Set Opacity


    //Toggle Teaser
    $("a.collapse").click(function(){
        $(this).next().slideToggle();
        $(this).toggleClass("show");
    });


});//Close Function  
});//]]>  

</script>


  <div class="main_image">
<br><br><br><br><br><br>
<center><img src="http://upload.macromedia.com/exchange/flash/previews/300x200_200x200.jpg" width=205" height="205"></a></center>
    <div class="desc" style="display: block; ">
        <a href="#" class="collapse show">Click Me!</a>
        <div class="block" style="opacity: 1; display: none; ">

            <center><br><br><br><iframe width="420" height="315" src="http://www.youtube.com/embed/AxcM3nCsglA" frameborder="0" allowfullscreen></iframe></iframe>
            </center>
        </div>
    </div>
</div>

どんな助けでも大歓迎です。ありがとうございました

*また、私がやろうとしていることを実行するためのより良い方法があれば教えてください. 2div にすることを考えていたのは初めての試みで、onclick の一方が他方と重なるようにしましたが、非表示のテキストなどを考えているクモが怖いです。

4

2 に答える 2

1

以下を使用してみてください。

$document = JFactory::getDocument(); 
$js = ' $(document).ready(function() {

            $(".main_image .desc").show();
            $(".main_image .block").animate({ opacity: 0.85 }, 1 );

            $("a.collapse").click(function(){
                $(this).next().slideToggle();
                $(this).toggleClass("show");
            });

         }); ';
$document->addScriptDeclaration($js);

すでに使用されている場合$document = JFactory::getDocument();は、削除してください。

が使用されている場合$doc = JFactory::getDocument();は、上記のコードを次のように変更します。

$doc->addScriptDeclaration($js);

于 2012-11-28T12:27:27.017 に答える
0

このコードの代わりに-

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$(document).ready(function() {

    //Show Banner
    $(".main_image .desc").show(); //Show Banner
    $(".main_image .block").animate({ opacity: 1 }, 1 ); //Set Opacity


    //Toggle Teaser
    $("a.collapse").click(function(){
        $(this).next().slideToggle();
        $(this).toggleClass("show");
    });


});//Close Function  
});//]]>  

</script>

これを試して- 

<script type='text/javascript'>//<![CDATA[ 
var $j = jQuery.noConflict();
$(window).load(function(){

});//]]>  
$j(document).ready(function() {

    //Show Banner
    $j(".main_image .desc").show(); //Show Banner
    $j(".main_image .block").animate({ opacity: 1 }, 1 ); //Set Opacity


    //Toggle Teaser
    $j("a.collapse").click(function(){
        $j(this).next().slideToggle();
        $j(this).toggleClass("show");
    });


});//Close Function  
</script>
于 2012-11-28T11:37:57.223 に答える