|
|
02.10.2012, 15:13
|
|
Gvenv_nk
Наталья Комарова
Зарегистрирован:
2011-11-07
Сообщений: 43
|
Здравствуйте! Проблема у меня, наверное, совершенно дурацкая и смешная для грамотного специалиста, но я, увы, пока только чайник, изо всех сил стремящийся к светлому будущему. Короче, суть вопроса в следующем.
Подключила на сайте внешнюю фотогалерею (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
Сообщений: 70
|
Цитата:А вот с отдельными изображениями на "простых страницах" - проблема.
Нужно просто через селекторы jQuery описать условия применения lightbox для всех img внутри div, окружающего ваш контент.
директор в ph-ph.ru
|
|
|
03.10.2012, 08:49
|
|
Gvenv_nk
Наталья Комарова
Зарегистрирован:
2011-11-07
Сообщений: 43
|
Щас буду пробовать. О результатах отчитаюсь!
Наталья Комарова
|
|
|
03.10.2012, 11:36
|
|
Gvenv_nk
Наталья Комарова
Зарегистрирован:
2011-11-07
Сообщений: 43
|
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
Панасин Александр
Зарегистрирован:
2011-04-05
Сообщений: 1037
|
Как же в верхних постах много слов и мало помощи.
<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)
Модуль "Почтовые уведомления" – настройка email уведомлений на вашем сайте без программирования. Бесплатно. http://netcat.ru/products/CatStore/solution_242.html
|
|
|
05.10.2012, 22:56
|
|
Гость
Гость
|
Огромное спасибо, Вы мне очень помогли. Лайтбокс я уже и раньше подключила, в разделе с компонентом "Фотогалепея" картинки выводились, как положено, а вот переписать отдельные ссылки на простых страницах никак не получалось. Теперь все работает.
Творческих Вам успехов!!!
|
