2012-06-29 69 views
1

希望這裏有人能幫助我!Fancybox onload內嵌內容問題

我試圖設置fancybox,所以當網頁加載時它會顯示一些內聯內容。然而,我似乎無法讓它工作。這裏是我到目前爲止所使用的代碼:

<script type="text/javascript"> 
    $(document).ready(function() { 
     /* 
     * Simple image gallery. Uses default settings 
     */ 

     $('.fancybox').fancybox(); 

     /* 
     * Different effects 
     */ 

     // Change title type, overlay opening speed and opacity 
     $(".fancybox-effects-a").fancybox({ 
      helpers: { 
       title : { 
        type : 'outside' 
       }, 
       overlay : { 
        speedIn : 500, 
        opacity : 0.95 
       } 
      } 
     }); 

     $.fancybox.open([ 
      { 
       href : '#inline1', 
       title : '1st title' 
      } 
     ], { 
      padding : 0 
     });​ 

    }); 
</script> 
<style type="text/css"> 
    .fancybox-custom .fancybox-skin { 
     box-shadow: 0 0 50px #222; 
    } 
</style> 

和HTML如下:

<h1>fancyBox</h1> 

<ul> 
    <li><a class="fancybox" href="#inline1" title="Lorem ipsum dolor sit amet">Inline</a></li> 

</ul> 

<div id="inline1" style="width:400px;display: none;"> 
    <h3>Etiam quis mi eu elit</h3> 
    <p> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis mi eu elit tempor facilisis id et neque. Nulla sit amet sem sapien. Vestibulum imperdiet porta ante ac ornare. Nulla et lorem eu nibh adipiscing ultricies nec at lacus. Cras laoreet ultricies sem, at blandit mi eleifend aliquam. Nunc enim ipsum, vehicula non pretium varius, cursus ac tortor. Vivamus fringilla congue laoreet. Quisque ultrices sodales orci, quis rhoncus justo auctor in. Phasellus dui eros, bibendum eu feugiat ornare, faucibus eu mi. Nunc aliquet tempus sem, id aliquam diam varius ac. Maecenas nisl nunc, molestie vitae eleifend vel, iaculis sed magna. Aenean tempus lacus vitae orci posuere porttitor eget non felis. Donec lectus elit, aliquam nec eleifend sit amet, vestibulum sed nunc. 
    </p> 
</div> 

希望有人能幫助,因爲我纔剛剛學習的jQuery/JavaScript的剛纔和我知道這一切都非常黑。

在此先感謝!

回答

1

如果你已經有這個

<a class="fancybox" href="#inline1" .... 

那麼你可以通過設置你的腳本一樣

$('.fancybox').fancybox().trigger("click"); 

(你不會需要$.fancybox.open一部分。)

它會打開內嵌fancybox內容在頁面加載或點擊鏈接。

如果你想以更復雜的方式來做到這一點,這意味着只有當有人第一次訪問網站時纔會在頁面加載時啓動fancybox(並非每次他們在同一會話期間返回頁面),那麼檢查這個https://stackoverflow.com/a/8305703/1055987

+0

謝謝,我終於彈出通過使用代碼工作: '$(函數(){ \t $ .fancybox.open([ \t \t { \t \t \t HREF:「 #inline1' \t \t}, \t],{ \t \t填充:0 \t}); \t}); //]]> ' – Matt27

+0

另外, 感謝您轉發我到那篇文章。將考察cookie的使用。雖然新的歐元法律要求提醒用戶使用cookie,但這可能不是最佳選擇。 – Matt27

+0

在你的網頁上稍微披露就夠了,不會是? – JFK