Страница 1 из 2 1 2 >
Показывать 40 сообщений этой темы на одной странице

Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Помогите пожалуйста завершить скрипт (https://javascript.ru/forum/dom-window/48261-pomogite-pozhalujjsta-zavershit-skript.html)

pavelfdr 27.06.2014 02:21
Помогите пожалуйста завершить скрипт
 
Здравствуйте! В сети нашел один скрипт и решил его немного изменить. При нажатии на изображение выходит окно. Проблема в следующем, при нажатии на фотографии,которые подгружаются именно в этом куске кода

$('#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>

рони 27.06.2014 02:23
pavelfdr,
а зачем вам нужна строка 21?

рони 27.06.2014 02:26
pavelfdr,
да и toggle того уже нет ...

pavelfdr 27.06.2014 02:34
Цитата:
Сообщение от рони (Сообщение 318164)
pavelfdr,
а зачем вам нужна строка 21?
Это было в коде скрипта,который я скачал :)

рони 27.06.2014 02:44
pavelfdr,
вы уж определитесь что вам милее видеть в строке 18 и недублируйте зря.

pavelfdr 27.06.2014 03:11
Отлично) Оставил только это 
<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="js/jquery.montage.min.js"></script>


Проблема с окном, остается открытой :-(

рони 27.06.2014 10:35
pavelfdr,
информации вашей недостаточно - работа скриптов неописана, что делают плагины неизвестно - но зачем вы блок загрузки новых фото запихнули в середину предзагрузки строки 169 - 190
примерно дролжно быть так
<!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="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="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif"></img></a>
				<a href="#dialog" name="modal"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif"></img></a>
				<a href="#dialog" name="modal"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif"></img></a>
				<a href="#dialog" name="modal"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif"></img></a>
				<a href="#dialog" name="modal"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif"></img></a>
				<a href="#dialog" name="modal"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif"></img></a>
				<a href="#dialog" name="modal"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif"></img></a>
				<a href="#dialog" name="modal"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif"></img></a>
				<a href="#dialog" name="modal"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif"></img></a>
				<a href="#dialog" name="modal"><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif"></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
							});
  						}
					}).attr('src',$img.attr('src'));
				});

               	/*
							 * 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 );
								});
							});


			});
		</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>

pavelfdr 27.06.2014 16:36
Скрип работает таким образом:

В начале выходят 10 фотографии при нажатии на них появляется окно.

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


В низу существует кнопка load more... которая подгружает еще фотографии.

<div id="loadmore" class="loadmore" style="width:100%;">load more...</div>
</div>



Проблема в том,что принажатии на подгруженные фото окно не появляется хотя в строке url пишет
Код:
index.html#dialog
За подгрузку отвечает функция 
$('#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 );
								});
							});

рони 28.06.2014 12:18
Цитата:
Сообщение от pavelfdr
montage
что бы открылось окно на вновь добавленное поставьте на них клик или измените $('a[name=modal]').click(function(e) { на $('am-container').on('click', 'a[name=modal]', function) -- возможно раз у вас старая версия jquery придётся использовать live вместо on

pavelfdr 28.06.2014 21:47
Здравствуйте! Изменил 
$('a[name=modal]').click(function(e) {
как Вы сказали на 
$('a[name=modal]').click(function(e) { на $('am-container').on('click', 'a[name=modal]', function)
но выдает ошибку синтакса. Также изменил 
newimgs	+= '<"a href="#dialog" name="modal"><img src="images/' + src + '.jpg"/></img></a>';

На 
newimgs	+= '<"a href="#" onclick="#dialog" name="modal" ><img src="images/' + src + '.jpg"/></img></a>';

Но ничего не произошло , возможно я что-то перепутал... :-(


Часовой пояс GMT +3, время: 23:04.
Страница 1 из 2 1 2 >
Показывать 40 сообщений этой темы на одной странице