我使用的是自动图片蒙太奇插件：
http://tympanus.net/Development/AutomaticImageMontage/index4.html
我使用Jquery点击按钮调用我的附加图像。
<div id="montage_overlay" class="paddingspacer2">
<div class="am-container" id="am-container">
<a href="http://mediastorage.playerspace.com/photo/groups/6_02252008_181.jpg" rel="galleryfacebox" title="'92 Bison Alumni"><img src="http://mediastorage.playerspace.com/photo/groups/6_02252008_181.jpg"></img></a>
<a href="http://mediastorage.playerspace.com/photo/groups/6_02252008_183.jpg" rel="galleryfacebox" title="Bison Alumni Honored"><img src="http://mediastorage.playerspace.com/photo/groups/6_02252008_183.jpg"></img></a>
<a href="http://mediastorage.playerspace.com/photo/groups/6_02252008_185.jpg" rel="galleryfacebox" title="Yuker at Bubba's"><img src="http://mediastorage.playerspace.com/photo/groups/6_02252008_185.jpg"></img></a>
<a href="http://mediastorage.playerspace.com/photo/groups/6_02252008_186.jpg" rel="galleryfacebox" title="Home Team for 3"><img src="http://mediastorage.playerspace.com/photo/groups/6_02252008_186.jpg"></img></a>
<a href="http://mediastorage.playerspace.com/photo/groups/6_02252008_188.jpg" rel="galleryfacebox" title="...the crowd gets the skinny on W&J"><img src="http://mediastorage.playerspace.com/photo/groups/6_02252008_188.jpg"></img></a>
<a href="http://mediastorage.playerspace.com/photo/groups/6_02252008_189.jpg" rel="galleryfacebox" title="Bison Finish Regular Season in Strong Fashion"><img src="http://mediastorage.playerspace.com/photo/groups/6_02252008_189.jpg"></img></a>
<a href="http://mediastorage.playerspace.com/photo/groups/6_02252008_190.jpg" rel="galleryfacebox" title="...a long weekend in b-town"><img src="http://mediastorage.playerspace.com/photo/groups/6_02252008_190.jpg"></img></a>
<a href="http://mediastorage.playerspace.com/photo/groups/6_02282008_192.jpg" rel="galleryfacebox" title="Bison Baller #1"><img src="http://mediastorage.playerspace.com/photo/groups/6_02282008_192.jpg"></img></a>
</div>
<div id="loadmore2" class="siteusemorebox">
<a href="#" class="loadmore" id="2">View more media</a>
</div>
</div>
<div class="clearboth"></div>
<script type="text/javascript" src="/scripts/jquery/plugins/montage/jquery.montage.min.js"></script>
<script language="javascript1.1">
window.media_more_script = '/ajax_results.cfm?rpp=6&ajax_type=my_group_photos&eventid=37&media_type=1&myscript=%2Findex%2Ecfm%2Fleague%2F23%2Faction%2Fdashboard%2Fcontent%5Faction%2Fevents%2Feventid%2F37%2Fevent%5Faction%2Fphotos';
</script>
<script type="text/javascript">
$(function() {
var $container = $('#am-container'),
$imgs = $container.find('img').hide(),
totalImgs = $imgs.length,
cnt = 0;
$imgs.each(function(i) {
var $img = $(this);
$('<img/>').load(function() {
++cnt;
if( cnt === totalImgs ) {
$imgs.show();
$container.montage({
minw : 150,
alternateHeight : true,
alternateHeightRange : {
min : 150,
max : 350
},
margin : 3,
fillLastRow : true
});
/*
* just for this demo:
*/
$('#montage_overlay').fadeIn(500);
$(document).on("click",'.loadmore',function()
{
var ID = $(this).attr("id");
var myscript3 = window.media_more_script || null;
if(ID)
{
$("#loadmore"+ID).html('<img src="/images/processing.gif" />');
$.ajax({
type: "POST",
url: myscript3,
data: "lastmsg="+ ID,
cache: false,
success: function(html){$container.append(html).montage( 'add',html);}
});
}
else
{
$(".siteusemorebox").html('No more records.');
}
return false;
});
}
}).attr('src',$img.attr('src'));
});
});
</script>
Google Chrome会返回以下错误：
TypeError: Object
<a href="http://mediastorage.playerspace.com/photo/groups/6_02282008_192.jpg" rel="galleryfacebox" title="Bison Baller #1"><img src="http://mediastorage.playerspace.com/photo/groups/6_02282008_192.jpg"></img></a>
<a href="http://mediastorage.playerspace.com/photo/groups/6_02252008_190.jpg" rel="galleryfacebox" title="...a long weekend in b-town"><img src="http://mediastorage.playerspace.com/photo/groups/6_02252008_190.jpg"></img></a>
<a href="http://mediastorage.playerspace.com/photo/groups/6_02252008_189.jpg" rel="galleryfacebox" title="Bison Finish Regular Season in Strong Fashion"><img src="http://mediastorage.playerspace.com/photo/groups/6_02252008_189.jpg"></img></a>
<a href="http://mediastorage.playerspace.com/photo/groups/6_02252008_188.jpg" rel="galleryfacebox" title="...the crowd gets the skinny on W&J"><img src="http://mediastorage.playerspace.com/photo/groups/6_02252008_188.jpg"></img></a>
<a href="http://mediastorage.playerspace.com/photo/groups/6_02252008_186.jpg" rel="galleryfacebox" title="Home Team for 3"><img src="http://mediastorage.playerspace.com/photo/groups/6_02252008_186.jpg"></img></a>
<a href="http://mediastorage.playerspace.com/photo/groups/6_02252008_185.jpg" rel="galleryfacebox" title="Yuker at Bubba's"><img src="http://mediastorage.playerspace.com/photo/groups/6_02252008_185.jpg"></img></a>
<a href="http://mediastorage.playerspace.com/photo/groups/6_02252008_183.jpg" rel="galleryfacebox" title="Bison Alumni Honored"><img src="http://mediastorage.playerspace.com/photo/groups/6_02252008_183.jpg"></img></a>
<a href="http://mediastorage.playerspace.com/photo/groups/6_02252008_181.jpg" rel="galleryfacebox" title="'92 Bison Alumni"><img src="http://mediastorage.playerspace.com/photo/groups/6_02252008_181.jpg"></img></a>
has no method 'find' [http://halosummerleague.playerspace.com/scripts/jquery/plugins/montage/jquery.montage.min.js:1]
有什么想法吗？
答案 0 :(得分：0)
得到它
<script type="text/javascript">
$(function() {
var $container = $('##am-container'),
$imgs = $container.find('img').hide(),
totalImgs = $imgs.length,
cnt = 0;
$imgs.each(function(i) {
var $img = $(this);
$('<img/>').load(function() {
++cnt;
if( cnt === totalImgs ) {
$imgs.show();
$container.montage({
minw : 150,
alternateHeight : true,
alternateHeightRange : {
min : 150,
max : 350
},
margin : 3,
fillLastRow : true
});
$('##montage_overlay').fadeIn(500);
$(document).on("click",'.loadmore',function()
{
var ID = $(this).attr("id");
var myscript3 = window.media_more_script || null;
if(ID)
{
$("##loadmore"+ID).html('<img src="/images/processing.gif" />');
$.ajax
({
type: "POST",
url: myscript3,
data: "lastmsg="+ ID,
cache: false,
success: function(html){
var $newimages = $( html );
$newimages.imagesLoaded( function(){
$container.append( $newimages ).montage( 'add', $newimages );
$("##loadmore"+ID).remove();
});
}
});
}
else
{
$(".siteusemorebox").html('No more records.');
$("##loadmore"+ID).remove();
}
return false;
});
}
}).attr('src',$img.attr('src'));
});
});
</script>