|
Галереи во всплывающем окне
Ситуация следующая:
на странице много картинок со своими ссылками, нажимая на которые в всплывающем окне должна показываться нужная галерея. Но я уже третий день никак не могу допетрить как мне ссылку с картинки вставить во всплывающее окно (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, время: 14:48. |
|