触发同位素

如果您以前看过这个，请道歉。这是我在这个问题上的第三次尝试，到目前为止，大部分工作都在隔离实际存在的问题。触发同位素

我的项目是加载一系列图像，并提供一个工具，通过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

回答

相关问题