Галереи во всплывающем окне
Ситуация следующая:
на странице много картинок со своими ссылками, нажимая на которые в всплывающем окне должна показываться нужная галерея. Но я уже третий день никак не могу допетрить как мне ссылку с картинки вставить во всплывающее окно (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? или аяксом? |
не знаю, а чем они отличаются
|
какое решение проще?
|
проще, не проще.. а современней аякс..
в 2-х словах. делается запрос на сервер, сервер обрабатывает запрос. отдает ответ обратно браузеру.. а вы с этими данными ччто хотите то и делайте.. вот как раз эти данные можно вам в div и запихать |
тогда аякс,
но я не смог с этим разобраться, это тёмный лес. |
а вы хотите за 5 мин разобратсья?? смешно)) пару дней надо посидеть, тем более если вы новичок.. иначе никак
|
я уже пятый день сижу, с мёртвой точки сдвинуться не могу поэтому и задал вопрос на форуме.
|
а вы думайте великие программеры за 2 недели вырастают??))) годами вот так сидят и мучают..
что именно вам не понятно про аякс? пришлите код в котором месте у вас не получается. будет дальше разговаривать.. п.с. буду здесь позже |
вот вставил аякс запрос но страница не загружается
пишет: Warning: require_once(start.php) [function.require-once]: failed to open stream: No such file or directory in Z:\home\olaf-a.local\www\blocks\job_g1.php on line 3 Fatal error: require_once() [function.require]: Failed opening required 'start.php' (include_path='.;C:\php\pear') in Z:\home\olaf-a.local\www\blocks\job_g1.php on line 3 или загружает в другом окне поломанную галерею код такой:
<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"/>
<script type="text/javascript">
function getXmlHttp()
{
var xmlhttp;
try
{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (E)
{
xmlhttp = false;
}
}
if(!xmlhttp && typeof XMLHttpRequest!='undefined')
{
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
}
function goajax(page)
{
var myrequest = getXmlHttp()
var docum = page+'?rnd='+Math.random();
var contentElem = document.getElementById('inccontent');
myrequest.open('POST', docum, true);
myrequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
myrequest.onreadystatechange = function()
{
if (myrequest.readyState == 4)
{
if(myrequest.status == 200)
{
var resText = myrequest.responseText;
var ua = navigator.userAgent.toLowerCase();
if (ua.indexOf('gecko') != -1)
{
var range = contentElem.ownerDocument.createRange();
range.selectNodeContents(contentElem);
range.deleteContents();
var fragment = range.createContextualFragment(resText);
contentElem.appendChild(fragment);
}
else
{
contentElem.innerHTML = resText;
}
}
else
{
contentElem.innerHTML = 'Ошибка';
}
}
}
myrequest.send();
}
</script>
</div>
|
блин)) читайте что пишет:failed to open stream (если не знайте анг. переводите транслитом http://translate.google.com/)
не удалось открыть поток Z:\home\olaf-a.local\www\blocks\job_g1.php он у вас не видит файла, по этому адресу. у вас денвер? надо не от самого диска обращаться (z), а от blocks\job_g1.php. но может и не верный путь. т.к. надо учитывать местоположение исполняемого файла.. и от него "плясать". |
большой проект? можете в зипе прислать, я гляну
|
да денвер,
файлы по этому адресу точно есть, по прямой ссылке всё работает.  проект прислать могу, куда прислать на файлообмееник сбросить? |
да мне все равно куда кините.. только ссылку дайте, я скачаю
|
как то с аяксом ненадёжно получается,
нельзя ли js взять ссылку по клику и передать её в <?php require_once или это утопический путь? |
вы что то путайте. пхп - это серверный язык, js - это клиентский язык.
и у них нет ничего общего. это что то на подобии меня и вас. мы с вами общаемся. например вы сервер, я клиент. я делаю запрос вам. т.е. я вас что то спрашиваю.. вы как сервер мне отвечайте.. я получив от вас информацию ее обрабатываю как мне надо. например: я увас спрашиваю: сколько будет 2х2 вы даете ответ: 4 я этот ответ получаю. и как надо обрабатываю.. могу вообще не обработать.. так и здесь. вы делайте запрос (спрашивайте у сервера), но только в данном случаю вопросом будет url запрос с параметрами. и в зависимости от параметров и от того к каком php файлу обратились вы будете получать разные ответы например: site.ru/index.php?p=123 вы сделали запрос серверу. в ответ вы получите html страницу, допустим такую <html> <head> <title>index.php</title> </head> <body> 123 <!-- <?php echo $_GET['p']; ?> --> </body> </html> тоже самое и аякс. он делает запрос серверу. тоже на домен, к какому то файлу. только различие в том, что страница не грузится с нуля. как если бы вы введи урлу в адресную строку. ответ у вас должен придти и записаться в переменную. а потом что вы хотите сделать с этой переменной - дело ваше. можно вывести на страницу, можно распарсить как json файл (если вы знайте о json формате). |
цитата: "как то с аяксом ненадёжно получается".
не занаю, не знаю.. это тот же http запрос, разницы нет тоже самое будет, если будете через фрейм делать.. только фреймы устарели.. крайне не советую |
|
так. скажите еще вот что. базу данных используйте или нет. и какой файл открыть, что бы попасть на главную страницу.. где происходят ваши события
|
ага, нашел. ну вот и ошибка. см. файл job_g2.php 2-я строчка. equire_once "start.php"
вы просите открыть start.php этого файла нет. убирайте эту строчку |
"start.php" лежит в корне как и index? этот файл запускает функции -"lib/functions.php",
если start.php убрать то выбрасывает на новую страницу, причём галерея там вся битая. |
этот скрипт работает также:
<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"/>
<script>
$(document).ready(function(){
$('#img2').click(function(){
$.ajax({
url: "page1.html",
cache: false,
success: function(html){
$("#wind").html(html);
}
});
});
});
</script>
</div>
|
всё равно не работает
|
у вас какой браузер? почитайте про фаербаг (отладчик ошибок)
в фаербаге откройте консоль, посмотрите ошибки не валятся? если консоль пустая, то ошибок нет |
вот для вас наваял))
oom-foto.ru/files/test2.zip |
| Часовой пояс GMT +3, время: 06:33. |