Fatal编程技术网
  • jquery/
  • Jquery 触发同位素

Jquery 触发同位素

jquery ajax

Jquery 触发同位素,jquery,ajax,fancybox,jquery-isotope,Jquery,Ajax,Fancybox,Jquery Isotope,如果你以前见过这个，我向你道歉。这是我在这个问题上的第三次尝试，到目前为止，大部分工作都是孤立问题的实质 <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="/

如果你以前见过这个，我向你道歉。这是我在这个问题上的第三次尝试，到目前为止，大部分工作都是孤立问题的实质

<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>
我的项目是加载一系列图像，并提供通过Fancybox iframe上传更多图像的工具。上传后，页面将调用一个函数，该函数对新的图像列表执行AJAX请求，将它们重新加载到DIV中，并使用同位素对它们进行布局

<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>
如果我从带有onclick的标记触发函数，它可以正常工作。但是如果我从Fancybox的afterClose功能触发它，图像会加载到DIV之外，同位素不会显示出来。我还确认，从按钮触发功能也不起作用

<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>
我在这里使用实际代码构建了一个演示： 为了简单起见，它避免了上传过程。它只是打开一个Fancybox，要求您关闭它，这将触发load 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>
代码如下： 

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


.元素{
宽度：230px；
高度：230像素；
//显示：内联块；
}
函数loadphotos（）{
var$container=$（“#container”）；
$container.load（'/mem/memphotos.taf'，function（）{
$container.imagesLoaded（函数（）{
$container.com({
itemSelector:“.element”，
布局模式：“fitRows”
})
});
});
};
$（“.lightbox”）.fancybox({
菲托维：错，
自动调整大小：正确，
closeClick:false，
openEffect:'无'，
近距离效应：“无”
}); 
$（“#上传照片”）.fancybox({
最大宽度：740，
最大高度：600，
菲托维：错，
自动调整大小：正确，
closeClick:false，
openEffect:'无'，
closeEffect:'无'，
“afterClose”：函数（）{
加载照片（）；
}
});
照片



你的按钮与功能配合得很好。问题是，当单击
标记时，页面将重定向到与结果相同的页面。就像页面刷新一样


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


当您按下按钮时，它调用函数并完成ajax请求。但所需样式未应用于父容器和子容器。因为所有html部分都被ajax请求结果所取代。看起来您还必须更改应用样式的概念


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


Button是一个表单元素，如果内容放在
中，您可以看到按钮的行为，如下所示。当您按下按钮时，页面将发布并重定向到同一页面，因为没有给出操作


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



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




把你的东西放在这里


要求取决于何时在页面上使用
或
标记


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


还可以从from
标记中删除所有外部样式表、js文件和内联java脚本部分，并将它们放在
标记中


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


首先加载CSS，然后加载java脚本文件
首先加载主要库，如jQuery和其他插件，因为它们依赖于其他库，如下所示


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



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







通过这样做，您可以减少意外行为并专注于实际问题。
干杯，感谢您的反馈。有些事情要做。

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