Вопрос по совместной работе fancybox и livequery
Здравствуйте, для применения эффекта 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 к картинкам добавляемым аяксом, мб есть другие способы? заранее благодарен |
Фансибокс придется показывать самостоятельно, как-то так:
$("a.gallery2").live("click", function () {
$.fancybox({href: this.href});
});
не проверял |
Вот пример что все работает
http://learn.javascript.ru/play/lZTl4 href="modal_description/auto/auto_1.php" У вас не работает так как, в href у ссылки должен быть путь к изображение которое fancybox должен открыть, а у вас как я вижу стоит ссылка на PHP скрипт. |
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 - по умолчанию)
});
Посмотрите плиз, где нужно исправить код |
$.fancybox, а не $("…").fancybox |
исправил, там где настройки класса 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
});
может быть, где-то ещё надо исправить? пока фэнсибокс не робит:( |
Цитата:
Плагин livequery не нужен, в новых версиях jQuery встроен этот функционал |
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 происходит но не открывается в модальном окне. Подскажите пжл что здесь нужно исправить? |
<!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>
|
| Часовой пояс GMT +3, время: 08:13. |