|
Галереи во всплывающем окне
Ситуация следующая:
на странице много картинок со своими ссылками, нажимая на которые в всплывающем окне должна показываться нужная галерея. Но я уже третий день никак не могу допетрить как мне ссылку с картинки вставить во всплывающее окно (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>
наверняка же есть простое решение этой проблемы? Заранее спасибо всем кто ответил. |
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(); |
кстати есть готовые плагины, вот нашел один:
http://fancyapps.com/fancybox/ погуглите, чтобы с нуля свое не пилить п.с. хотя честно в своем сайте я делал с нуля свой)) правда немного кривовато получилось)) |
Ниже код страницы но он сути не передаёт, наверно я не правильно выразился.
Сама галерея прекрасно работает, у меня не получается подгрузить нужную во всплывающее окно (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">
© 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>
|
мля)) то что вы сгенерировали из 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") далее уже используйте этот урл где вам надо.. |
спасибо, но до конца не понял.
Получается что вставляем:
<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 ни синтаксически ни логически не понятен. |
аа. так вам в пхп надо? тогда причем тут js?
давайте сначала, я вас тогда вообще не понимаю у вас есть галерея, так? по клику вам надо чтобы открылся div (стал видимым), а в нем картинка более большего размера так? я думаю у каждой картинки есть id или то что ее может идентифицировать |
нет, в div должна загружаться сама страница галереи на которую ссылается картинка.
|
цитирую: "агружаться сама страница галереи на которую ссылается картинка"
iframe? или аяксом? |
не знаю, а чем они отличаются
|
| Часовой пояс GMT +3, время: 13:09. |
|