Форум

olaf-a · #1 (**permalink**) 19.06.2013, 18:37

Ситуация следующая:
на странице много картинок со своими ссылками, нажимая на которые в всплывающем окне должна показываться нужная галерея.
Но я уже третий день никак не могу допетрить как мне ссылку с картинки вставить во всплывающее окно (div id="wind").

код страницы:

<div id="menu2"> 
	<?php
		$job_p = getAllJob();
		for ($i = 0; $i <count($job_p); $i++) {
		$id = $job_p[$i]["id"];
		$poyasneniya = $job_p[$i]["poyasneniya"];
		$opisanie_txt = $job_p[$i]["opisanie_txt"];
		include "intro_job_p.php";
		}
	?>

		
	<div class="clear"></div>
	<script type="text/javascript" src="scripts/jquery.min.js"></script>
	<script type="text/javascript" src="scripts/menu2.js"></script>

</div>
<div id="wind">
	
		<img title="close" src="image/close.png" width="24px" height="24px" onclick="document.getElementById('wind').style.display='none'; return false;" align="right"/>
	
		<?php 
		
		require_once *// ЗДЕСЬ НУЖНА ССЫЛКА НА ГАЛЕРЕЮ //*
		?>

</div>

сами картинки (intro_job_p.php):

<div class="img2" action="code.php" method="post"><a href="blocks/job_g<?php echo $id;?>.php" onclick="document.getElementById('wind').style.display='block'; var href = this.href; return false;"><img id="img_menu2" title="<?php echo $poyasneniya;?>" src="image/job/<?php echo $id;?>_job.png" width="150px" height="150px"/></a>
</div>

наверняка же есть простое решение этой проблемы?
Заранее спасибо всем кто ответил.

skrudjmakdak · #2 (**permalink**) 20.06.2013, 09:46

1. пхп код думаю тут не уместен. лучше было бы, если вы выложили сгенерированную html страницу.

2. вы делайте клик по ссылке: <a href="blocks/job_g<?php echo $id;?>.php" onclick="document.getElementById('wind').style.dis play='block'; var href = this.href; return false;">
а) читабельность нулевая, для этого вынесете в функцию вот так (тем более jquery подключен):

<a class="name_class">..</a>

$(document).ready(function()
	{
	var index_gallery = -1; //индекс галереи
	
	$('.name_class').click(function()
		{
		index_gallery = $(this);
		$(this).parent().attr('src');
		return false;
		});
	});

а в кнопочках далее, назад. надо использовать методы $(index_gallery).prev(); $(index_gallery).next();

skrudjmakdak · #3 (**permalink**) 20.06.2013, 09:49

кстати есть готовые плагины, вот нашел один:
http://fancyapps.com/fancybox/

погуглите, чтобы с нуля свое не пилить
п.с. хотя честно в своем сайте я делал с нуля свой)) правда немного кривовато получилось))

olaf-a · #4 (**permalink**) 20.06.2013, 12:18

Ниже код страницы но он сути не передаёт, наверно я не правильно выразился.
Сама галерея прекрасно работает, у меня не получается подгрузить нужную во всплывающее окно (div id="wind"), т.е. я не могу сообразить как мне взять ссылку из клика и поместить её в <?php require_once ..(СЮДА)...?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

...

</head>

<body>

	<div id="main">
шапка
    </div>	  

		

 <div id="menu2"> 

	

<div class="img2" action="code.php" method="post"><a href="blocks/job_g16.php" onclick="document.getElementById('wind').style.display='block'; var href = this.href; return false;"><img id="img_menu2" title="Гостиничный комплекс г.Сочи" src="image/job/16_job.png" width="150px" height="150px"/></a>

</div>







<div class="img2" action="code.php" method="post"><a href="blocks/job_g15.php" onclick="document.getElementById('wind').style.display='block'; var href = this.href; return false;"><img id="img_menu2" title="Рублёво-Архангельское" src="image/job/15_job.png" width="150px" height="150px"/></a>

</div>







<div class="img2" action="code.php" method="post"><a href="blocks/job_g14.php" onclick="document.getElementById('wind').style.display='block'; var href = this.href; return false;"><img id="img_menu2" title="Жилой комплекс" src="image/job/14_job.png" width="150px" height="150px"/></a>

</div>







<div class="img2" action="code.php" method="post"><a href="blocks/job_g13.php" onclick="document.getElementById('wind').style.display='block'; var href = this.href; return false;"><img id="img_menu2" title="Гольф-посёлок" src="image/job/13_job.png" width="150px" height="150px"/></a>

</div>







<div class="img2" action="code.php" method="post"><a href="blocks/job_g12.php" onclick="document.getElementById('wind').style.display='block'; var href = this.href; return false;"><img id="img_menu2" title="Частный Фитнес центр." src="image/job/12_job.png" width="150px" height="150px"/></a>

</div>







<div class="img2" action="code.php" method="post"><a href="blocks/job_g11.php" onclick="document.getElementById('wind').style.display='block'; var href = this.href; return false;"><img id="img_menu2" title="АВФ Домодедово" src="image/job/11_job.png" width="150px" height="150px"/></a>

</div>







<div class="img2" action="code.php" method="post"><a href="blocks/job_g10.php" onclick="document.getElementById('wind').style.display='block'; var href = this.href; return false;"><img id="img_menu2" title="Рекострукция Банка" src="image/job/10_job.png" width="150px" height="150px"/></a>

</div>







<div class="img2" action="code.php" method="post"><a href="blocks/job_g9.php" onclick="document.getElementById('wind').style.display='block'; var href = this.href; return false;"><img id="img_menu2" title="Торгово-развлекательный центр" src="image/job/9_job.png" width="150px" height="150px"/></a>

</div>







<div class="img2" action="code.php" method="post"><a href="blocks/job_g8.php" onclick="document.getElementById('wind').style.display='block'; var href = this.href; return false;"><img id="img_menu2" title="Мясокомбинат /Дубки/" src="image/job/8_job.png" width="150px" height="150px"/></a>

</div>







<div class="img2" action="code.php" method="post"><a href="blocks/job_g7.php" onclick="document.getElementById('wind').style.display='block'; var href = this.href; return false;"><img id="img_menu2" title="здание СТО" src="image/job/7_job.png" width="150px" height="150px"/></a>

</div>







<div class="img2" action="code.php" method="post"><a href="blocks/job_g6.php" onclick="document.getElementById('wind').style.display='block'; var href = this.href; return false;"><img id="img_menu2" title="Жилой дом" src="image/job/6_job.png" width="150px" height="150px"/></a>

</div>







<div class="img2" action="code.php" method="post"><a href="blocks/job_g5.php" onclick="document.getElementById('wind').style.display='block'; var href = this.href; return false;"><img id="img_menu2" title="Торговй комплекс /Снежный городок/" src="image/job/5_job.png" width="150px" height="150px"/></a>

</div>







<div class="img2" action="code.php" method="post"><a href="blocks/job_g4.php" onclick="document.getElementById('wind').style.display='block'; var href = this.href; return false;"><img id="img_menu2" title="Жилой комплекс" src="image/job/4_job.png" width="150px" height="150px"/></a>

</div>







<div class="img2" action="code.php" method="post"><a href="blocks/job_g3.php" onclick="document.getElementById('wind').style.display='block'; var href = this.href; return false;"><img id="img_menu2" title="Детский сад" src="image/job/3_job.png" width="150px" height="150px"/></a>

</div>







<div class="img2" action="code.php" method="post"><a href="blocks/job_g2.php" onclick="document.getElementById('wind').style.display='block'; var href = this.href; return false;"><img id="img_menu2" title="Жилые 14-ти этажные дома" src="image/job/2_job.png" width="150px" height="150px"/></a>

</div>







<div class="img2" action="code.php" method="post"><a href="blocks/job_g1.php" onclick="document.getElementById('wind').style.display='block'; var href = this.href; return false;"><img id="img_menu2" title="Галерея /Каштан/ по ул. Вавилова 6" src="image/job/1_job.png" width="150px" height="150px"/></a>

</div>







		

	<div class="clear"></div>

	<script type="text/javascript" src="scripts/jquery.min.js"></script>

	<script type="text/javascript" src="scripts/menu2.js"></script>



</div>

<div id="wind">

	

		<img title="close" src="image/close.png" width="24px" height="24px" onclick="document.getElementById('wind').style.display='none'; return false;" align="right"/>



		

		<!DOCTYPE html>

    <head>

        <title>Responsive Image Gallery</title>

		<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, maximum-scale=1.0, user-scalable=no"> 

        <meta name="description" content="Responsive Image Gallery with jQuery" />

        <meta name="keywords" content="jquery, carousel, image gallery, slider, responsive, flexible, fluid, resize, css3" />

		<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 rel="stylesheet" type="text/css" href="css/elastislide.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=Pacifico' rel='stylesheet' type='text/css' />

		<noscript>

			<style>

				.es-carousel ul{

					display:block;

				}

			</style>

		</noscript>

		<script id="img-wrapper-tmpl" type="text/x-jquery-tmpl">	

			<div class="rg-image-wrapper">

				{{if itemsCount > 1}}

					<div class="rg-image-nav">

						<a href="#" class="rg-image-nav-prev">Previous Image</a>

						<a href="#" class="rg-image-nav-next">Next Image</a>

					</div>

				{{/if}}

				<div class="rg-image"></div>

				<div class="rg-loading"></div>

				<div class="rg-caption-wrapper">

					<div class="rg-caption" style="display:none;">

						<p></p>

					</div>

				</div>

			</div>

		</script>

    </head>

    <body>

		<div class="container">



			

			<div class="content">

					<div id="rg-gallery" class="rg-gallery">

					<div class="rg-thumbs">

						<!-- Elastislide Carousel Thumbnail Viewer -->

						<div class="es-carousel-wrapper">

							<div class="es-nav">

								<span class="es-nav-prev">Previous</span>

								<span class="es-nav-next">Next</span>

							</div>

							<div class="es-carousel">

								<ul>

									<li><a href="#"><img src="image/job/1_galary/thumbs/1.jpg" data-large="image/job/1_galary/1.jpg" alt="image01" data-description="Пробная надпись" /></a></li>

									<li><a href="#"><img src="image/job/1_galary/thumbs/2.jpg" data-large="image/job/1_galary/2.jpg" alt="image02" data-description="A plaintful story from a sistering vale" /></a></li>

									<li><a href="#"><img src="image/job/1_galary/thumbs/3.jpg" data-large="image/job/1_galary/3.jpg" alt="image03" data-description="A plaintful story from a sistering vale" /></a></li>

									<li><a href="#"><img src="image/job/1_galary/thumbs/4.jpg" data-large="image/job/1_galary/4.jpg" alt="image04" data-description="My spirits to attend this double voice accorded" /></a></li>

									<li><a href="#"><img src="image/job/1_galary/thumbs/5.jpg" data-large="image/job/1_galary/5.jpg" alt="image05" data-description="And down I laid to list the sad-tuned tale 22222222222222222222 222222222222222222222  222222222222222222222222222222 2222222 2222222222222222222222 2222222222222 222222222222222222222222222222222222222222222222" /></a></li>

									

								</ul>

							</div>

						</div>

						<!-- End Elastislide Carousel Thumbnail Viewer -->

					</div><!-- rg-thumbs -->

				</div><!-- rg-gallery -->

				

			</div><!-- content -->

		</div><!-- container -->

		<script type="text/javascript" src="js/jquery.min_v1.6.4.js"></script>

		<script type="text/javascript" src="js/jquery.tmpl.min.js"></script>

		<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>

		<script type="text/javascript" src="js/jquery.elastislide.js"></script>

		<script type="text/javascript" src="js/gallery.js"></script>

    </body>

</html>

</div> 

		<div id="footer"> 

   <table>

	   <tr id="copyrate">

		   <td align="left">

			  &copy; 2013 Сделано для себя

			</td>

			<td align="right">

			<img src="image/smail.png" alt="" title=":)" width="24px" height="24px"/ align="center" cellspacing="0" cellpadding="10"> 

		   </td>

	   </tr>

   </table>

</div> 

	

	</div> 

</body>

</html>

skrudjmakdak · #5 (**permalink**) 20.06.2013, 14:21

мля)) то что вы сгенерировали из php в html - это замечательно. но нафига все блоки лепить? парочку оставить и хорош..
ну да ладно, сделали. будем см.

<div class="img2" action="code.php" method="post">
  <a href="blocks/job_g3.php" onclick="document.getElementById('wind').style.display='block'; var href = this.href; return false;">
     <img id="img_menu2" title="Детский сад" src="image/job/3_job.png" width="150px" height="150px"/>
  </a>
</div>

вы кликайте по тегу <a> правильно? а адрес хранится в теге img.
теперь по тега <a> вам надо обратиться к img, поэтому пишем: this.chilrder - это массив дочерних элементов, но у вас один дочерний элемент, поэтому обращаемся именно так this.chilrder[0]

теперь вам надо достать урл адрес: this.chilrder[0].getAttribute("src")
далее уже используйте этот урл где вам надо..

olaf-a · #6 (**permalink**) 20.06.2013, 15:15

спасибо, но до конца не понял.
Получается что вставляем:

<div class="img2" action="code.php" method="post"><a href="blocks/job_g<?php echo $id;?>.php" onclick="document.getElementById('wind').style.display='block'; this.chilrder[0].getAttribute("src"); return false;"><img id="img_menu2" title="<?php echo $poyasneniya;?>" src="image/job/<?php echo $id;?>_job.png" width="150px" height="150px"/></a>
</div>

но, извините за тупость, не понимаю как эту ссылку запихать <?php require_once ..(СЮДА)...?>, мне переход из js в php ни синтаксически ни логически не понятен.

skrudjmakdak · #7 (**permalink**) 20.06.2013, 15:34

аа. так вам в пхп надо? тогда причем тут js?

давайте сначала, я вас тогда вообще не понимаю

у вас есть галерея, так? по клику вам надо чтобы открылся div (стал видимым), а в нем картинка более большего размера так? я думаю у каждой картинки есть id или то что ее может идентифицировать

olaf-a · #8 (**permalink**) 20.06.2013, 15:53

нет, в div должна загружаться сама страница галереи на которую ссылается картинка.

skrudjmakdak · #9 (**permalink**) 20.06.2013, 15:56

цитирую: "агружаться сама страница галереи на которую ссылается картинка"

iframe? или аяксом?

olaf-a · #10 (**permalink**) 20.06.2013, 16:21

не знаю, а чем они отличаются

Форум

Справочник

Discord чат

Курсы javascript