Комментарии под фотографиями
Добрый день.
Задался целью добавить комментария Facebook API под фото-галлерею на FancyBox или LightBox, идея приходит только одна - генерировать на php отдельные iFrame страницы, но php для меня как луна. Возможно кто-то уже делал подобное или подскажет что-то. Заранее спасибо. |
Для меня наоборот php - земля.
Не пойму как сделать. Скачал примеры по fancybox, сделал как с картинками, но вместо картинки вставляю в ссылку путь к php файлу и передаю параметр image.php?id_image=10 В файле image.php забираю параметр, и вывожу на экран картинку <img src="'.$_GET['id_image'].'.jpg"> Вот в самом простом варианте так. Все выводит, все хорошо, Но проблема в размере окна fancybox. слишком высокие картинки не умещаются в область отведенную для fancybox и появляется полоса прокрутки в окне fancybox. Мне нужно, чтобы высота fancybox была равна высоте картинки + 100 px, для вывода комментариев под картинкой. Как это сделать, ума не приложу. Я думаю понятно объяснил. Вот настройки fancybox:
<script type="text/javascript">
$(document).ready(function(e) {
$("a.gallery2").fancybox(
{
"padding" : 20, // отступ контента от краев окна
"zoomOpacity" : true, // изменение прозрачности контента во время анимации (по умолчанию false)
"zoomSpeedIn" : 500, // скорость анимации в мс при увеличении фото (по умолчанию 0)
"zoomSpeedOut" :800, // скорость анимации в мс при уменьшении фото (по умолчанию 0)
"zoomSpeedChange" : 1000, // скорость анимации в мс при смене фото (по умолчанию 0)
"frameWidth" : screen.width-350, // ширина окна, px (425px - по умолчанию)
"overlayShow" : true, // если true затеняят страницу под всплывающим окном. (по умолчанию true). Цвет задается в jquery.fancybox.css - div#fancy_overlay
"overlayOpacity" : 0.8, // Прозрачность затенения (0.3 по умолчанию)
"hideOnContentClick" :false, // Если TRUE закрывает окно по клику по любой его точке (кроме элементов навигации). Поумолчанию TRUE
"centerOnScroll" : false // Если TRUE окно центрируется на экране, когда пользователь прокручивает страницу
});
});
</script>
вот так вывожу картинки: <a class="gallery2" href="image.php?id=900"><img src="путь до привьюшки"></a> Помогите плиз, бъюсь второй день (( |
В общем мне нужно заставить fancybox растягиваться по высоте в зависимости от того, что у менаходится в php файле. Либо, каким-то, не знаю каким способов передавать в свойство frameHeight значение высоты картинки+100. Высоту кратинки я могу получить в php, либо с помощью javascript (но только после полной загруки картинки). или в ссылке для каждого изображения передавать высоту и получать ее в этом же скрипте, например так:
<a class="gallery2" href="image.php?id=900&height=500"><img src="путь до привьюшки"></a> <a class="gallery2" href="image.php?id=905&height=820"><img src="путь до привьюшки"></a> <a class="gallery2" href="image.php?id=804&height=1250"><img src="путь до привьюшки"></a> Вот как то так. В принципе последний вариант с размером в ссылке я думаю простой и легко реализуемый, но опять же у меня не получается. |
Если делаю только так
$('a.gallery2').click(function () {alert('fff');})
Тогда при нажатии на картинку у меня появляется алерт fff, но не появляется картинка, вообще больше ничего не происходит. Если делаю только так:
$("a.gallery2").fancybox(
{
"padding" : 20, // отступ контента от краев окна
"zoomOpacity" : true, // изменение прозрачности контента во время анимации (по умолчанию false)
"zoomSpeedIn" : 500, // скорость анимации в мс при увеличении фото (по умолчанию 0)
"zoomSpeedOut" :800, // скорость анимации в мс при уменьшении фото (по умолчанию 0)
"zoomSpeedChange" : 1000, // скорость анимации в мс при смене фото (по умолчанию 0)
"frameWidth" : screen.width-350, // ширина окна, px (425px - по умолчанию)
"frameHeight" : 333,
"overlayShow" : true, // если true затеняят страницу под всплывающим окном. (по умолчанию true). Цвет задается в jquery.fancybox.css - div#fancy_overlay
"overlayOpacity" : 0.8, // Прозрачность затенения (0.3 по умолчанию)
"hideOnContentClick" :false, // Если TRUE закрывает окно по клику по любой его точке (кроме элементов навигации). Поумолчанию TRUE
"centerOnScroll" : false // Если TRUE окно центрируется на экране, когда пользователь прокручивает страницу
});
Тогда само собой загружается fancybox и картинка появляется в новом окне. Если делаю все вместе:
$('a.gallery2').click(function () {alert('fff');})
$("a.gallery2").fancybox(
{
"padding" : 20, // отступ контента от краев окна
"zoomOpacity" : true, // изменение прозрачности контента во время анимации (по умолчанию false)
"zoomSpeedIn" : 500, // скорость анимации в мс при увеличении фото (по умолчанию 0)
"zoomSpeedOut" :800, // скорость анимации в мс при уменьшении фото (по умолчанию 0)
"zoomSpeedChange" : 1000, // скорость анимации в мс при смене фото (по умолчанию 0)
"frameWidth" : screen.width-350, // ширина окна, px (425px - по умолчанию)
"frameHeight" : 333,
"overlayShow" : true, // если true затеняят страницу под всплывающим окном. (по умолчанию true). Цвет задается в jquery.fancybox.css - div#fancy_overlay
"overlayOpacity" : 0.8, // Прозрачность затенения (0.3 по умолчанию)
"hideOnContentClick" :false, // Если TRUE закрывает окно по клику по любой его точке (кроме элементов навигации). Поумолчанию TRUE
"centerOnScroll" : false // Если TRUE окно центрируется на экране, когда пользователь прокручивает страницу
});
Тогда алерт не появляется, загружается только картинка в новом окне fancybox. Так как мне из click передать в значение высоты:
$("a.gallery2").fancybox(
{
......
"frameHeight" : значение полученное из click-a,
......
});
Сделать бы как то так например:
$('a.gallery2').click(function () {
var height;
height = 500;
return height;
})
но как мне получить эту функцию без click потом ума не приложу. |
Или может если кто знаком с плагином этим, подскажите как сделать высоту резиновую?
|
И так, пришел к следующему:
function parseGetParams() {var $_GET = {};var link; link= $('a.gallery2').attr("href"); var __GET = link.split("&"); for(var i=0; i<__GET.length; i++) {var getVar = __GET[i].split("=");$_GET[getVar[0]] = typeof(getVar[1])=="undefined" ? "" : getVar[1];}return $_GET;}
function ht()
{
var GETArr = parseGetParams();
s=GETArr['height']*1+350;
return s;
}
$("a.gallery2").fancybox(
{
"padding" : 20, // отступ контента от краев окна
"zoomOpacity" : true, // изменение прозрачности контента во время анимации (по умолчанию false)
"zoomSpeedIn" : 500, // скорость анимации в мс при увеличении фото (по умолчанию 0)
"zoomSpeedOut" :800, // скорость анимации в мс при уменьшении фото (по умолчанию 0)
"zoomSpeedChange" : 1000, // скорость анимации в мс при смене фото (по умолчанию 0)
"frameWidth" : screen.width-350, // ширина окна, px (425px - по умолчанию)
"overlayShow" : true, // если true затеняят страницу под всплывающим окном. (по умолчанию true). Цвет задается в jquery.fancybox.css - div#fancy_overlay
"overlayOpacity" : 0.8, // Прозрачность затенения (0.3 по умолчанию)
"hideOnContentClick" :false, // Если TRUE закрывает окно по клику по любой его точке (кроме элементов навигации). Поумолчанию TRUE
"centerOnScroll" : false, // Если TRUE окно центрируется на экране, когда пользователь прокручивает страницу
"frameHeight" : ht()
});
Теперь осталось две проблемы. 1. в самую первую функцию в link= $('a.gallery2').attr("href"); у меня всегда попадает только адрес первой ссылки. То есть на какую ссылку бы я ни нажал, всегда будет адрес первой ссылки. А мне нужно получить адрес нажатой ссылкит. 2. Ссылки вида: <a class="gallery2" href="/script/jqp.php?id=1&height=550">1</a> Выдают адрес, хоть и самой первой ссылки но все же выдают. А ссылки вида: <a class="gallery2" href="/script/jqp.php?id=1&height=550"><img src="/image.jpg"></a> Выдают ошибку, типа нету адреса. что-то вроде undefinded. Осталось совсем чуть чуть до решения вопроса, помогите пожалуйста. Тут даже вопрос уже не по fancybox, а чистый javascript. |
1. Это потому что скрипт отрабатывает один раз, при загрузке страницы, а не каждый раз при клике на фотке.
Слайдерописатели в основном пишут код для себя и поддерживать или расширять его тяжело, в виду его малой вменяемости. |
| Часовой пояс GMT +3, время: 17:03. |