Здравствуйте! В сети нашел один скрипт и решил его немного изменить. При нажатии на изображение выходит окно. Проблема в следующем, при нажатии на фотографии,которые подгружаются именно в этом куске кода
$('#loadmore').show().bind('click', function() {
var len = imgarr.length;
for( var i = 0, newimgs = ''; i < 15; ++i ) {
var pos = Math.floor( Math.random() * len ),
src = imgarr[pos];
newimgs += '<a href="#dialog" name="modal"><img src="images/' + src + '.jpg"/></img></a>';
}
при нажатии ничего не происходит...помогите пожалуйста,так как даже не знаю в чем может быть проблема.
А вот здесь все ок,окно выходит
<div class="am-container" id="am-container">
<a href="#dialog" name="modal"><img src="images/1.jpg"></img></a>
<a href="#dialog" name="modal"><img src="images/2.jpg"></img></a>
<a href="#dialog" name="modal"><img src="images/3.jpg"></img></a>
<a href="#dialog" name="modal"><img src="images/4.jpg"></img></a>
<a href="#dialog" name="modal"><img src="images/5.jpg"></img></a>
<a href="#dialog" name="modal"><img src="images/6.jpg"></img></a>
<a href="#dialog" name="modal"><img src="images/7.jpg"></img></a>
<a href="#dialog" name="modal"><img src="images/8.jpg"></img></a>
<a href="#dialog" name="modal"><img src="images/9.jpg"></img></a>
<a href="#dialog" name="modal"><img src="images/10.jpg"></img></a>
</div>
Вот весь код:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Automatic Image Montage with jQuery" />
<meta name="keywords" content="jquery, images, montage, fullscreen, floating, grid, automatic" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow&v1' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Monoton' rel='stylesheet' type='text/css' />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="scripts/scripts.js"></script>
<script type="text/javascript" src="scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.montage.min.js"></script>
<script>
$(document).ready(function() {
$('a[name=modal]').click(function(e) {
e.preventDefault();
var id = $(this).attr('href');
var maskHeight = $(document).height();
var maskWidth = $(window).width();
$('#mask').css({'width':maskWidth,'height':maskHeight});
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow",0.8);
var winH = $(window).height();
var winW = $(window).width();
$(id).css('top', winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);
$(id).fadeIn(2000);
});
$('.window .close').click(function (e) {
e.preventDefault();
$('#mask, .window').hide();
});
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});
});
</script>
<style>
#boxes .window {
position:absolute;
left:0;
top:0px;
-top: 40px;
width:440px;
height:200px;
display:none;
z-index:9999;
padding: 20px;
overflow: hidden;
}
#boxes #dialog {
width: 80%;
height: 60%;
padding:10px;
background-color:#ffffff;
}
.top {
position:absolute;
left:0;
top:0;
width:100%;
height:30px;
background: #0085cc;
padding: 8px 20px 6px 10px;
}
.close {
float: right;
margin-right: 3%;
margin-top: 4px;
}
.content {
padding-top: 35px;
color:#999999;
}
</style>
</head>
<body style="background:#fff;">
<div class="container">
<div class="am-container" id="am-container">
<a href="#dialog" name="modal"><img src="images/1.jpg"></img></a>
<a href="#dialog" name="modal"><img src="images/2.jpg"></img></a>
<a href="#dialog" name="modal"><img src="images/3.jpg"></img></a>
<a href="#dialog" name="modal"><img src="images/4.jpg"></img></a>
<a href="#dialog" name="modal"><img src="images/5.jpg"></img></a>
<a href="#dialog" name="modal"><img src="images/6.jpg"></img></a>
<a href="#dialog" name="modal"><img src="images/7.jpg"></img></a>
<a href="#dialog" name="modal"><img src="images/8.jpg"></img></a>
<a href="#dialog" name="modal"><img src="images/9.jpg"></img></a>
<a href="#dialog" name="modal"><img src="images/10.jpg"></img></a>
</div>
<div id="loadmore" class="loadmore" style="width:100%;">load more...</div>
</div>
<script type="text/javascript">
$(function() {
/*
* just for this demo:
*/
$('#showcode').toggle(
function() {
$(this).addClass('up').removeClass('down').next().slideDown();
},
function() {
$(this).addClass('down').removeClass('up').next().slideUp();
}
);
$('#panel').toggle(
function() {
$(this).addClass('show').removeClass('hide');
$('#overlay').stop().animate( { left : - $('#overlay').width() + 20 + 'px' }, 300 );
},
function() {
$(this).addClass('hide').removeClass('show');
$('#overlay').stop().animate( { left : '0px' }, 300 );
}
);
// initialize the plugin
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({
minsize : true,
margin : 2
});
/*
* just for this demo:
*/
$('#overlay').fadeIn(500);
var imgarr = new Array();
for( var i = 1; i <= 73; ++i ) {
imgarr.push( i );
}
$('#loadmore').show().bind('click', function() {
var len = imgarr.length;
for( var i = 0, newimgs = ''; i < 15; ++i ) {
var pos = Math.floor( Math.random() * len ),
src = imgarr[pos];
newimgs += '<a href="#dialog" name="modal"><img src="images/' + src + '.jpg"/></img></a>';
}
var $newimages = $( newimgs );
$newimages.imagesLoaded( function(){
$container.append( $newimages ).montage( 'add', $newimages );
});
});
}
}).attr('src',$img.attr('src'));
});
});
</script>
<div id="boxes">
<div id="dialog" class="window" style="top: 120px;
left: 110.5px;">
<div class="top"><a href="#" class="link close"/>Close</a></div>
<div class="content">
<h3>Lanterns</h3>
</div>
</div>
</div>
<div id="mask"></div>
</body>
</html>