Вопрос по совместной работе fancybox и livequery

[l@pteff]

Здравствуйте, для применения эффекта fancybox'а к картинкам, добавляемым аяксом из бд, подключил плагин livequery, но совместить их не получается, фэнсибокс не работает и картинка открывается просто в окне браузера. Вот код:

<a class="gallery2" href="../modal_description/auto/auto_1.php">
<span>
<img style="width:100px; height:50px" src="../images/auto/auto_1.jpeg" />
</span></a>

настройка модальных окон: пробовал сделать так:

$("a.gallery2").livequery(function() {
$("a.gallery2").fancybox({

/*код fancybox'а*/

});
});

Если кто-то сталкивался с подобной проблемой, подскажите пожалуйста как можно добиться эффекта fancybox к картинкам добавляемым аяксом, мб есть другие способы?
заранее благодарен

[Octane]

Фансибокс придется показывать самостоятельно, как-то так:

$("a.gallery2").live("click", function () {
    $.fancybox({href: this.href});
});

не проверял

[walik]

Вот пример что все работает
http://learn.javascript.ru/play/lZTl4

href="modal_description/auto/auto_1.php"

У вас не работает так как, в href у ссылки должен быть путь к изображение которое fancybox должен открыть, а у вас как я вижу стоит ссылка на PHP скрипт.

[l@pteff]

walik, href у ссылки ставлю на php-ксрипт, т.к. под картинкой должно выводиться её название, поле для комментов, и т. д., это всё описано в php-файле.
Octane, пробовал Ваш вариант, но пока не получилось, мб что-то не так делаю. Вот полностью настройка модального окна:

$("a.gallery, a.iframe").fancybox();
$("a.modalbox").fancybox(
{ 
"frameWidth" : 400,
"frameHeight" : 400 
});

$("a.gallery2").livequery('click', function() {
$("a.gallery2").fancybox(
{ 
"margin-top":-5,
"padding" : 15, // отступ контента от краев окна
"imageScale" : false, // Принимает значение true - контент(изображения) масштабируется по размеру окна, или false - окно вытягивается по размеру контента. По умолчанию - TRUE
"zoomOpacity" : false,	// изменение прозрачности контента во время анимации (по умолчанию false)
"zoomSpeedIn" : 1000,	// скорость анимации в мс при увеличении фото (по умолчанию 0)
"zoomSpeedOut" : 1000,	// скорость анимации в мс при уменьшении фото (по умолчанию 0)
"zoomSpeedChange" : 1000, // скорость анимации в мс при смене фото (по умолчанию 0)
"frameWidth" : 850,	 // ширина окна, px (425px - по умолчанию)
"frameHeight" : 880, // высота окна, px(355px - по умолчанию)
"overlayShow" : true, // если true затеняят страницу под всплывающим окном. (по умолчанию true). Цвет задается в jquery.fancybox.css - div#fancy_overlay 
"overlayOpacity" : 0.8,	 // Прозрачность затенения 	(0.3 по умолчанию)
"hideOnContentClick" : false, // Если TRUE  закрывает окно по клику по любой его точке (кроме элементов навигации). Поумолчанию TRUE 
"centerOnScroll" : false // Если TRUE окно центрируется на экране, когда пользователь прокручивает страницу 
});
}); 

$("#menu a, .anim").hover(function() {
$(this).animate({"paddingLeft" : "10px"}, 300)},
function() {$(this).animate({"paddingLeft" : "0"}, 300);
});
$("a.iframe").fancybox(
{ 
"frameWidth" : 800,	 // ширина окна, px (425px - по умолчанию)
"frameHeight" : 600 // высота окна, px(355px - по умолчанию) 
});

Посмотрите плиз, где нужно исправить код

[Octane]

$.fancybox, а не $("…").fancybox

[l@pteff]

исправил, там где настройки класса gallery2 но пока безрезультатно

$("a.gallery, a.iframe").fancybox();
$("a.modalbox").fancybox(
{ 
"frameWidth" : 400,
"frameHeight" : 400 
});

$("a.gallery2").livequery('click', function() {
$.fancybox(
{ 
"margin-top":-5,
"padding" : 15, 
"imageScale" : false,
"zoomOpacity" : false,
"zoomSpeedIn" : 1000,
"zoomSpeedOut" : 1000,
"zoomSpeedChange" : 1000, 
"frameWidth" : 850,	
"frameHeight" : 880, 
"overlayShow" : true, 
"overlayOpacity" : 0.8,	
"hideOnContentClick" : false, 
"centerOnScroll" : false
});
});

$("#menu a, .anim").hover(function() {
$(this).animate({"paddingLeft" : "10px"}, 300)},
function() {$(this).animate({"paddingLeft" : "0"}, 300);
});
$("a.iframe").fancybox(
{ 
"frameWidth" : 800,
"frameHeight" : 600
});

может быть, где-то ещё надо исправить? пока фэнсибокс не робит

[Octane]

$("a.gallery2").livequery('click', function() {
$.fancybox(
{ 
"margin-top":-5,
"padding" : 15, 
"imageScale" : false,
"zoomOpacity" : false,
"zoomSpeedIn" : 1000,
"zoomSpeedOut" : 1000,
"zoomSpeedChange" : 1000, 
"frameWidth" : 850,	
"frameHeight" : 880, 
"overlayShow" : true, 
"overlayOpacity" : 0.8,	
"hideOnContentClick" : false, 
"centerOnScroll" : false
});
});

Ну и как он узнает, какое изображение показать, где href?

Плагин livequery не нужен, в новых версиях jQuery встроен этот функционал

[l@pteff]

Octane,
спасибо что откликнулись я Вас наверное уже достал своей тупостью
Подправил код так прописав href к нужному php-скрипту:

$("a.gallery2").live('click', function() {
$.fancybox ({
"href" : '../modal_description/auto/auto_1.php',
"margin-top":-5,
"padding" : 15,
"imageScale" : false, 
"zoomOpacity" : false,	
"zoomSpeedIn" : 1000,	
"zoomSpeedOut" : 1000,
"zoomSpeedChange" : 1000,  
"frameWidth" : 850,	
"frameHeight" : 880, 
"overlayShow" : true, 
"overlayOpacity" : 0.8,	 
"hideOnContentClick" : false, 
"centerOnScroll" : false
});
});

Переход по href происходит но не открывается в модальном окне. Подскажите пжл что здесь нужно исправить?

[Octane]

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>…</title>
	<link rel="stylesheet" href="http://jscore.ru/fancybox/jquery.fancybox-1.3.4.css">
</head>
<body>
	<script src="http://code.jquery.com/jquery.js"></script>
	<script src="http://jscore.ru/fancybox/jquery.fancybox-1.3.4.js"></script>
	<script>
		$("a.gallery2").live("click", function (event) {

			event.preventDefault();

			$.fancybox({
				href: this.href,
				marginTop: -5,
				padding: 15,
				imageScale: false, 
				zoomOpacity: false,	
				zoomSpeedIn: 1000,	
				zoomSpeedOut: 1000,
				zoomSpeedChange: 1000,  
				frameWidth: 850,	
				frameHeight: 880, 
				overlayShow: true, 
				overlayOpacity: 0.8,	 
				hideOnContentClick: false, 
				centerOnScroll: false
			});

		});
	</script>
	<ul>
		<li><a class="gallery2" href="http://farm5.static.flickr.com/4058/4252054277_f0fa91e026.jpg">img 1</a></li>
		<li><a class="gallery2" href="http://farm3.static.flickr.com/2647/3867677191_04d8d52b1a.jpg">img 2</a></li>
		<li><a class="gallery2" href="http://farm3.static.flickr.com/2775/4110967360_661cd9d99e.jpg">img 3</a></li>
		<li><a class="gallery2" href="http://farm3.static.flickr.com/2591/4135665747_3091966c91.jpg">img 4</a></li>
	</ul>
</body>
</html>