觸發同位素

如果您以前看過這個，請道歉。這是我在這個問題上的第三次嘗試，到目前爲止，大部分工作都在隔離實際存在的問題。觸發同位素

我的項目是加載一系列圖像，並提供一個工具，通過Fancybox iframe上傳更多圖像。上傳後，頁面會調用一個函數，對新的圖像列表進行AJAX請求，將它們重新加載到DIV中，並使用Isotope進行佈局。

如果我通過帶有onclick的標籤觸發該功能，它可以正常工作。但是，如果我從Fancybox的afterClose函數中觸發它，則圖像將加載到DIV外部，同位素不會將其排除。我也確認，從按鈕觸發功能也不起作用。

我已經使用實際代碼在這裏構建了一個演示： http://photopedia.com.au/mem/login.taf?_function=test 爲了簡單起見，它避免了上載過程。它只是打開一個Fancybox，要求您關閉它，這會觸發加載photos（）函數。

這裏是代碼：

<style> 
.element{ 
width:230px; 
height:230px; 
//display:inline-block; 
} 
</style> 
<script src="/jquery/jquery-1.11.2.min.js"></script> 
<script type="text/javascript" src="/jquery/fancybox2/source/jquery.fancybox.pack.js"></script> 
<link rel="stylesheet" type="text/css" href="/jquery/fancybox2/source/jquery.fancybox.css" media="screen" /> 

<script src="/js/isotope.pkgd.min.js" type="text/javascript"></script> 
<script src="/js/imagesloaded.pkgd.js" type="text/javascript"></script> 


    <!-- jQuery with jQuery Easing, and jQuery Transit JS --> 
    <script src="/jquery/jquery.easing.1.3.js" type="text/javascript"></script> 
    <script src="/jquery/jquery-transit-modified.js" type="text/javascript"></script> 

<script> 
function loadphotos(){ 
var $container = $('#container'); 

$container.load('/mem/memphotos.taf',function(){ 
$container.imagesLoaded(function() { 
$container.isotope({ 
    itemSelector: '.element', 
    layoutMode: 'fitRows' 
    }) 
}); 
}); 
}; 

</script> 


<script type="text/javascript"> 
$(".lightbox").fancybox({ 
     fitToView : false, 
     autoSize : true, 
     closeClick : false, 
     openEffect : 'none', 
     closeEffect : 'none' 
    }); 

$("#uploadphoto").fancybox({ 
     maxWidth : 740, 
     maxHeight : 600, 
     fitToView : false, 
     autoSize : true, 
     closeClick : false, 
     openEffect : 'none', 
     closeEffect : 'none', 
     'afterClose' : function() { 
      loadphotos(); 
      } 
    }); 



</script> 

<div class=title> 
<h1>Photos</h1> 
</div> 
<div style="clear:both;"></div> 



<br> 


<!-- if profile name is blank --> 
<a href="" onclick="loadphotos();">Load photos</a> <- works 

<br> 
<br> 

<button onclick="loadphotos();">Load photos</button> <- doesn't work 

<br> 
<br> 

<a href='/mem/upload_imagetest.html' id='uploadphoto' class="fancybox fancybox.iframe"> 
Upload a photo 
</a> <- doesn't work 

<br> 
<br> 

<div id="container" style="border:1px dotted red;"> 



</div> 


<script> 
$(document).ready(function() { 
    loadphotos(); 
}); 
</script> 

</body> 
</html>

你可以提供任何幫助，將不勝感激。

來源

2015-05-26 AusS2000

你的按鈕很好用。問題是當點擊標籤<a>時，頁面會被重定向到您的結果所在的頁面。像頁面刷新一樣。

當您按下按鈕時，它會調用該函數並完成ajax請求。但所需的樣式不適用於父容器和子容器。因爲所有的html部分都由ajax請求取代了結果。看起來你也必須改變應用風格的概念。

按鈕是一種表單元素，如果內容放置在<form>中，您可以看到該按鈕的行爲，如下所示。當你按下按鈕時，頁面會發布並重定向到同一頁面，因爲沒有給出該操作。

<body> 
    <form action="" method="post"> 
     place Your contents here 
    </form> 
</body>

的要求是取決於在頁面上使用<button>或<a>標籤。

還從<body>標記中刪除所有外部樣式表和js文件以及嵌入java腳本部分，並將它們放置在<head>標記內。

首先加載CSS，然後加載java腳本文件加載主要的庫，如jQuery和其他插件，因爲它們依賴於其他庫，如下所示。

<link rel="stylesheet" type="text/css" href="/jquery/fancybox2/source/jquery.fancybox.css" media="screen"> 

<script src="/jquery/jquery-1.11.2.min.js"></script> 
<script type="text/javascript" src="/jquery/fancybox2/source/jquery.fancybox.pack.js"></script>

通過這樣做，您可以減少意外行爲並專注於實際問題。

來源

2015-05-26 07:47:16 PHJCJO

乾杯，感謝您的反饋。有些事情要處理。 – AusS2000

回答

相關問題