Jquery＆Joomla無故障故障

Question

我想製作一個不錯的幻燈片，首先對文章進行評分，然後關閉評分框以查看視頻。我上的Joomla這樣做的，使用此代碼一點編輯：http://jsfiddle.net/AetnV/72/

這是我的代碼版本： （問題是靜態的HTML頁面（非的Joomla）它的作品完美，但不是的Joomla我有上的JavaScript和iframe從JCE和全局配置，但仍然沒有列入黑名單，禁止，我想這也與其他主題的相同。

<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> 

任何幫助是極大的讚賞。 謝謝

*此外，如果你有一個更好的方法來建議做我想做的事情 請告訴我。我在想，使其2divs和一個的onclick將重疊另一個，但我怕蜘蛛的我第一次嘗試思考它的隱藏文字等。

Answer 1

嘗試已被使用，請將其刪除。

如果使用$doc = JFactory::getDocument();，那麼在上面的代碼，改成這樣：

$doc->addScriptDeclaration($js);

Answer 2

取而代之的是代碼 -

<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> 

嘗試這個 -

$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();是：用以下

<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>