2014-01-18 145 views
0

我有jQuery Isotope運行正確,因此它使一個很好的鏈接列表和當用戶點擊一個鏈接它在Fancybox內按預期拉起iframe。我想添加到這個,所以我可以讓Fancybox在頁面加載時運行。我需要添加什麼?jQuery,在頁面加載運行Fancybox

用戶流程:

[user on another page] -> [user clicks link] -> [redirect to this page/code which runs Fancybox on pageload] 

當前同位素代碼:

<div class="portfolioFilter"> 
      Filter by: 
       <a href="#" data-filter="*" class="button3">Show All</a> 
       <a href="#" data-filter=".A" class="button3">A</a> 
       <a href="#" data-filter=".B" class="button3">B</a> 
       ... 
</div> 
<div class="portfolioContainer"> 
    <div class="A isospacing"> 
      <a href="page.html" class="various" data-fancybox-type="iframe" id="S54"><span class="description">John Doe</span></a> 
      <a href="page2.html" class="various" data-fancybox-type="iframe" id="S55"><span class="description">Jane Doe</span></a> 
      ... 
     </div> 
</div> 

jQuery代碼:

$(window).load(function(){ 
     var $container = $('.portfolioContainer'); 
     $container.isotope({ 
      filter: '*', 
      animationOptions: { 
       duration: 750, 
       easing: 'linear', 
       queue: false 
      } 
     }).trigger("click"); 

     $('.portfolioFilter a').click(function(){ 
      $('.portfolioFilter .current').removeClass('current'); 
      $(this).addClass('current'); 

      var selector = $(this).attr('data-filter'); 
      $container.isotope({ 
       filter: selector, 
       animationOptions: { 
        duration: 750, 
        easing: 'linear', 
        queue: false 
       } 
      }); 
      return false; 
     }); 
    }); 

回答

0

僅供參考,

我解決了它使用此:

<script type="text/javascript"> 
$(document).ready(function() { 
    $.fancybox({ 
     'width': '40%', 
     'height': '40%', 
     'autoScale': true, 
     'transitionIn': 'fade', 
     'transitionOut': 'fade', 
     'type': 'iframe', 
     'href': 'http://www.Website.com/Details' 
    }); 

});