Регистрация
Вход через соцсети
Восстановление пароля

Как настроить вывод отдельных изображений с помощью lightbox

Новый топик
02.10.2012, 15:13
Ответить | Цитировать
Gvenv_nk
Наталья Комарова
Gvenv_nk

Зарегистрирован:
2011-11-07
Сообщений: 20

Здравствуйте! Проблема у меня, наверное, совершенно дурацкая и смешная для грамотного специалиста, но я, увы, пока только чайник, изо всех сил стремящийся к светлому будущему. Короче, суть вопроса в следующем.
Подключила на сайте внешнюю фотогалерею (jquery.lightbox-0.5) на базе стандартного компонента. Очень помогли ваши уроки - большое спасибо, все отлично заработало. А вот с отдельными изображениями на "простых страницах" - проблема. Они у меня тупо выводятся по ссылке с маленького изображения на большое. Перелопатила весь инет, перечитала переписку на вашем форуме, но так и не нашла ответа на вопрос, куда (в шаблон компонента "простая страница" или еще куда-нибудь?! А если компонент - не "простая страница", а, например, "Статьи простые" и т.п.?)внедрить соответствующий скрипт и как он должен выглядеть.
Пыталась на локальном компе, на денвере, претворить в жизнь несколько рекомендаций (как-то: подключала файл prototype и библиотеку scriptaculous, вносила изменения в файл function.php и проч.)- сами понимаете, безрезультатно.
Буду рада вашему совету или ссылке на какой-нибудь правильный обучающий материал.невинный
02.10.2012, 17:20
Ответить | Цитировать
Heidel

Зарегистрирован:
2012-06-27
Сообщений: 65

В неткате есть встроенный плагин colorbox, аналогичный лайтбоксу.
Для того, чтобы его подключить, нужно
1. С сайта колорбокса http://www.jacklmoore.com/colorbox скачать плагин и выбрать из предложенных вариантов оформления тот, что вам нравится (там пять демо-примеров: example1, example2 и т.д.).
2. Из папки с выбранным вариантом забрать:
-- стили colorbox.css
-- папку images (в ней лежат элементы оформления colorbox'а)
создать в файлах нетката папку и положить их туда.
3. В макете дизайна подключить стили для колорбокса colorbox.css и библиотеку colorbox.js или colorbox-min.js. В 5-ом неткате последняя библиотека подключается по умолчанию, на счет более ранних версий не знаю. Если автоматически не подключается, вам так же сначала нужно будет загрузить её в файлы системы.
4. В компоненте, для которого вы хотите подключить colorbox, либо в префикс списка объектов (если колорбокс вам нужен для списка), либо в Отображении объекта на отдельной странице вставляете код
Код:
<sсript src='<?= $nc_core->SUB_FOLDER.$nc_core->HTTP_ROOT_PATH ?>require/js/jquery.colorbox-min.js' type='text/javasсript'></sсriрt>
<sсript>$(document).ready(function(){ $("a[rel='gallery']").colorbox({photo:true}); });</sсriрt>

5. Кладете изображение в ссылку
Код:
<a href="<?= $f_Image1 ?>" rel='gallery'><img src="<?= $f_Image1 ?>" style="width: 120px; height:90px;" /></a>

в ссылке обязательно должен быть добавлен атрибут, который задает обработку изображения плагином, здесь это rel='gallery'.
Размеры маленького изображения в режиме "предпросмотра" здесь задаются стилями в самом теге изображения style="width: 120px; height:90px;",
если хотите, можете добавить ресайз изображения до нужных вам размеров в поле Действия после добавления объекта, как это реализовано, можно посмотреть в компоненте Мультимедиа --- Простая фотогалерея

Приведенные коды - для 5-го нетката, для более ранних версий они, наверное, будут отличатся.
03.10.2012, 01:19
Ответить | Цитировать
Finar
Ph & Ph

Зарегистрирован:
2008-03-01
Сообщений: 63

Цитата:
А вот с отдельными изображениями на "простых страницах" - проблема.

Нужно просто через селекторы jQuery описать условия применения lightbox для всех img внутри div, окружающего ваш контент.

технический директор, web@finar.ru
03.10.2012, 08:49
Ответить | Цитировать
Gvenv_nk
Наталья Комарова
Gvenv_nk

Зарегистрирован:
2011-11-07
Сообщений: 20

Щас буду пробовать. О результатах отчитаюсь! невинный
03.10.2012, 11:36
Ответить | Цитировать
Gvenv_nk
Наталья Комарова
Gvenv_nk

Зарегистрирован:
2011-11-07
Сообщений: 20

5. Кладете изображение в ссылку
Код:
<a href="<?= $f_Image1 ?>" rel='gallery'><img src="<?= $f_Image1 ?>" style="width: 120px; height:90px;" /></a>


Пока не прокатывает! Вроде все делала по Вашей инструкции. Положила файлы colorbox соответственно в папки js, css и images, в хедере макета дизайна подключила стили и библиотеку colorbox по аналогии с lightbox, который у меня работает для компонента "фотогалерея" (код получился такой):

Код:
<script src='/js/jquery.colorbox-min.js' type='text/javascript'></script>
<script src='/js/jquery.colorbox.js' type='text/javascript' ></script>
<link href='/css/jquery.colorbox.css' type='text/css' rel='stylesheet' />

<script type='text/javascript'>
$(function() {
$('.gallery').colorbox();
});
</script>


Вписала Ваш код в поле "отображение объекта" компонента "Простая страница" (пыталась и в префикс, но результат тот же). Теперь пытаюсь впихнуть свое изображение в ссылку, причем не могу понять, в каком месте кода нужно указать путь к файлу. Пробовала и так, и эдак - не получается, в итоге ссылка вся перекомпоновывается и приобретает вид <a rel=...> и т.п., картинка, соответственно, не выводится вообще.
При этом денвер (я пока мучаю локальную версию) ругается: "Возможно, вы пытаетесь открыть картинку или статический HTML-файл, расположенный в CGI-директории. Этого делать нельзя. Все рисунки (а также другие файлы, за исключениям скриптов) необходимо помещать в www-директорию". Надо ли говорить, что на самом деле файлы лежат у меня в www-директории!
Может быть, коды действительно не работают для других версий неткэта? (у нас 4.7 и еще один сайт, для которого эта проблема тоже актуальна, - на 3.12). Хотя, скорее всего, я опять неправильно путь к файлу указываю или туплю в каком-то другом месте, начиная с макета дизайна?

И еще вопрос: может быть, есть аналогичный способ как-то довести до ума подключенный у меня lightbox, чтобы он работал для простых страниц и других компонентов?
04.10.2012, 22:19
Ответить | Цитировать
Nexwich
Панасин Александр
Nexwich

Зарегистрирован:
2011-04-05
Сообщений: 943

Как же в верхних постах много слов и мало помощи.

<script type='text/javascript'>
$(function() {
$('.gallery').colorbox();
});
</script>

В вашем случаи ссылки открываются только те у которых класс gallery
Если вам необходима еще помощ то свяжитеь по скайпу я помогу.
http://netcat.ru/ordersite/partners/panasin.html

Как установить lightbox?
• скачать http://leandrovieira.com/projects/jquery/lightbox/
• залить файл в деректорию /images/lightbox/js/query.lightbox-0.5.js
• залить файл в деректорию /images/lightbox/css/query.lightbox-0.5.css
• залить изображения в деректорию /images/lightbox/images/
• в header <script type='text/javascript' src='/images/lightbox/js/jquery.lightbox-0.5.js'></script>
<link rel='stylesheet' type='text/css' href='/images/lightbox/css/jquery.lightbox-0.5.css' media='screen'>
<script type='text/javascript'>
$(function() {
$('a.lightBox').lightBox();
});
</script>

• вид ваших ссылок <a class='lightBox' href='image.jpg'><img src='thumb_image.jpg' alt='image_name'></a>

Желательно не хешировать изображения.

и в файле jquery.lightbox-0.5.js измените пути на картинки 30 - 34 строки
/images/lightbox/
Код:

imageLoading: '/images/lightbox/images/lightbox-ico-loading.gif', // (string) Path and the name of the loading icon
imageBtnPrev: '/images/lightbox/images/lightbox-btn-prev.gif', // (string) Path and the name of the prev button image
imageBtnNext: '/images/lightbox/images/lightbox-btn-next.gif', // (string) Path and the name of the next button image
imageBtnClose: '/images/lightbox/images/lightbox-btn-close.gif', // (string) Path and the name of the close btn
imageBlank: '/images/lightbox/images/lightbox-blank.gif', // (string) Path and the name of a blank image (one pixel)


Модуль "Почтовые уведомления" – настройка уведомлений на вашем сайте без программирования. Цена отзыв. Мне очень важно ваше мнение.
05.10.2012, 22:56
Ответить | Цитировать
Гость
Гость

Огромное спасибо, Вы мне очень помогли. Лайтбокс я уже и раньше подключила, в разделе с компонентом "Фотогалепея" картинки выводились, как положено, а вот переписать отдельные ссылки на простых страницах никак не получалось. Теперь все работает.
Творческих Вам успехов!!!круто
198 196 2012-10-05 22:56:38 12638
Описание проекта