Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 20.01.2012, 16:20   #1
ADSoft
Старожил
 
Регистрация: 25.02.2007
Сообщений: 4,150
По умолчанию открыть fancybox в модальном окне fancybox

есть задача: с помощью fancybox создаю миниагалерею с превьюшками, необходимо по нажатию по превьюшкам - выдавать большую фотку...
по отдельности и первое и второе рабоатет .. .как совмещаю - фиг вам....

вот код
Код:
$(document).ready(function() {
		$('a.inline').fancybox({
			hideOnContentClick: false,
			overlayShow: true,
			overlayOpacity: 0.5,
			zoomSpeedIn: 0.4,
			zoomSpeedOut: 0,
			type : "inline"
		});
		
		$("[class='big_img']").fancybox({
			hideOnContentClick: true,
			overlayShow: true,
			overlayOpacity: 0.5,
			zoomSpeedIn: 0.4,
			zoomSpeedOut: 0
		});	
});
Код 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>
а вот в самом блоке - открытие увеличеной картинки уже не работает.... почему же, почему же ?
ADSoft вне форума Ответить с цитированием
Старый 20.01.2012, 17:58   #2
Cronos20
Форумчанин
 
Регистрация: 08.07.2010
Сообщений: 679
По умолчанию

Это известная проблема fancybox, он просто создает копию блока и помещает к себе, при это теряются все навешанные события. При это может быть и проблема конфликтов например с id элементов (их становится уже 2 штуки на странице).
С таким я обычно боролся инициализацией всяких галлерей и скриптов уже после $.fancybox.open(), навешивая функцию на элементы уже в контекст открывшегося fancybox.
Cronos20 вне форума Ответить с цитированием
Старый 22.01.2012, 04:34   #3
Cronos20
Форумчанин
 
Регистрация: 08.07.2010
Сообщений: 679
По умолчанию

Код:
<script>
    function getFancyboxContainer (){ // функция возвращает ссылку на содержимое открытого окна fancybox
		return $("#fancybox-inner");
	}
    $(document).ready(function() {
		$('a.inline').fancybox({
			hideOnContentClick: false,
			overlayShow: true,
			overlayOpacity: 0.5,
			zoomSpeedIn: 0.4,
			zoomSpeedOut: 0,
            //type : "inline", - убрать, все проблемы начались с этого
            onComplete : function (data){ // та проблема, о которой я говорил, инициализируем внутреннюю галлерею только после открытия
                getFancyboxContainer().find("[rel=fotos]").fancybox({ //берем картинки по атрибуту rel, чтобы потом их еще можно было листать в новом окне
                    hideOnContentClick: true,
                    overlayShow: true,
                    overlayOpacity: 0.5,
                    zoomSpeedIn: 0.4,
                    zoomSpeedOut: 0
                });	
            }
		});
		
		
});
    
    </script>


<div style="display:none">
<div id="cont11">
	<h3>Список фото автомобиля</h3>
	<div>
	<a href="images/full_img.jpg" rel="fotos"><img  src="images/small_img1.jpg" border="0" /></a>
    <a href="images/full_img.jpg"  rel="fotos"><img  src="images/thumbnail.jpg" border="0" /></a>	
	</div>
</div>
</div>

<a href="#cont11" class="inline">По этой ссылке открывается блок cont11</a>
Cronos20 вне форума Ответить с цитированием
Старый 19.03.2015, 08:53   #4
Minus_yu
Чатланин!
Форумчанин
 
Аватар для Minus_yu
 
Регистрация: 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>
если пытаться открывать картинки из списка превьюшек напрямую со страницы (т.е. убрать style="display:none;" из 75-й строки). то картинки вполне корректно открываются в fancybox

если же сначала открываем список превьюшек картинок в одном попапе и пытаемся открыть fancybox из этого попапа, то получаем "индейскую национальную избу"...

кто-нибудь сталкивался? как решить?
Minus_yu вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
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