|
|
Регистрация Восстановить пароль |
Регистрация | Задать вопрос |
Заплачу за решение |
Новые сообщения |
Сообщения за день |
Расширенный поиск |
Правила |
Всё прочитано |
|
Опции темы | Поиск в этой теме |
20.01.2012, 16:20 | #1 |
Старожил
Регистрация: 25.02.2007
Сообщений: 4,177
|
открыть fancybox в модальном окне fancybox
есть задача: с помощью fancybox создаю миниагалерею с превьюшками, необходимо по нажатию по превьюшкам - выдавать большую фотку...
по отдельности и первое и второе рабоатет .. .как совмещаю - фиг вам.... вот код Код:
Код HTML:
<div style="display:none"> <div id="cont11"> <h3>Список фото автомобиля</h3> <div> <a href="/fotos/1_2.jpg" class="big_foto"><img src="/fotos/1_1.jpg" border="0" /></a> <a href="/fotos/2_2.jpg" class="big_foto"><img src="/fotos/2_1.jpg" border="0" /></a> </div> </div> </div> <a href="#cont11" class="inline">По этой ссылке открывается блок cont11</a> |
20.01.2012, 17:58 | #2 |
Форумчанин
Регистрация: 08.07.2010
Сообщений: 679
|
Это известная проблема fancybox, он просто создает копию блока и помещает к себе, при это теряются все навешанные события. При это может быть и проблема конфликтов например с id элементов (их становится уже 2 штуки на странице).
С таким я обычно боролся инициализацией всяких галлерей и скриптов уже после $.fancybox.open(), навешивая функцию на элементы уже в контекст открывшегося fancybox. |
22.01.2012, 04:34 | #3 |
Форумчанин
Регистрация: 08.07.2010
Сообщений: 679
|
Код:
|
19.03.2015, 08:53 | #4 |
Чатланин!
Форумчанин
Регистрация: 20.11.2010
Сообщений: 140
|
Встала подобная задача...
Код HTML:
<link rel="stylesheet" href="fancy-style/jquery.fancybox-1.3.4.css"/> <script src="jquery-1.7.2.min.js"></script> <script src="jquery.fancybox-1.3.4.js"></script> <style> .modal{ position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.8); text-align: center; z-index: 2; display: none; } .modal-holder{ width: 900px; background: #f3f2f3; border: 1px solid #ccc; display: inline-block; vertical-align: middle; text-align: left; position: relative; padding: 10px 0 0 0; } .modal-content { overflow: auto; max-height: 700px; padding: 20px; } .modal:after { display: inline-block; height: 100%; vertical-align: middle; content: ""; width: 0; } .modal .close-modal { position: absolute; right: 11px; top: 11px; overflow: hidden; cursor: pointer; font-weight: bold; font-size: 15px; } </style> <script> $(document).ready(function(){ $('.itemmore a').live('click',function(){ // var aid = $(this).attr('class'); var workContent = $("#cont11").html(); $('.modal .modal-content').empty().append(workContent); $('.modal').show(); }) $('.close-modal').live('click',function(){ $('.modal').hide(); }); $(".modal").live('click',function(e) { var el = $(e.target); if (el.hasClass("close") || el.closest(".modal-holder").length == 0) { el.closest(".modal").hide(); } }); }); jQuery(function($) { $("a.fancybox").fancybox(); }); </script> <div style="display:none;"> <div id="cont11"> <h3>Список фото автомобиля</h3> <div> <a href="1424084347_0.jpg" class="fancybox"><img src="small_1424084347_0.jpg" border="0" /></a> <a href="1424084347_1.jpg" class="fancybox"><img src="small_1424084347_1.jpg" border="0" /></a> </div> </div> </div> <div class="itemmore"><a href="javascript: viod(0);" class="inline">По этой ссылке открывается блок cont11</a></div> <div class="modal"> <div class="modal-holder"> <div class="modal-content"> </div> <a class="close-modal">x</a> </div> </div> если же сначала открываем список превьюшек картинок в одном попапе и пытаемся открыть fancybox из этого попапа, то получаем "индейскую национальную избу"... кто-нибудь сталкивался? как решить? |
Похожие темы | ||||
Тема | Автор | Раздел | Ответов | Последнее сообщение |
Fancybox смена положения галереи на странице | Librarian | JavaScript, Ajax | 3 | 04.01.2012 22:02 |
Проблема с (авторизация в модальном окне) | Vitaliy> | JavaScript, Ajax | 5 | 20.07.2011 07:14 |
Задать размеры окон для каждой ссылки в fancybox | WennY | JavaScript, Ajax | 0 | 24.06.2011 14:29 |
Вывод результата работы скрипта в модальном окне | snikers987 | JavaScript, Ajax | 2 | 06.06.2011 23:27 |
Вопрос по Wordpress: Видео в модальном окне. | m_hamlet | WordPress и другие CMS | 0 | 10.01.2011 17:04 |