бесплатные списки прокси
[ Обновленные темы · Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
форум webanet » Помоги себе сам компьютеры и интернет » uCoz решение проблем » Эффект LightBox на uCoz (fancyBox v2.0.5 красивый эффект к картинкам на сайтах uCoz)
Эффект LightBox на uCoz
webanet Дата: Пятница, 2012-09-07, 03:02 | Сообщение # 1
Генералиссимус
Группа: Администраторы
Сообщений: 195
Статус: Offline
На uCoz внедрили использование эффекта для изображений fancyBox v2.0.5 он же ulightbox (название юкоза)
В коде всех сайтов системы по умолчанию появились рабочий скрипт fancyBox v2.0.5 и стили оформления

Код
<link href="http://sх.ucoz.net/src/ulightbox/ulightbox.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://sх.ucoz.net/src/ulightbox/ulightbox.js"></script>

Где х - это номер сервера с которого подгружаются стили и скрипт, он всегда совпадает с сервером, на котором находится сайт. Если вы хотите установить эффекты для изображений LightBox или FancyBox, вы можете получить конфликт кода из-за встроенного эффекта на uCoz

Как применять эффект для увеличения изображения в строенном оформленном окне

По умолчанию эффект применяется автоматически на форуме или в материалах к изображениям прикрепленным к материалам или к сообщениям на форуме, встроенным с помощью спец.кода
Код
$IMAGEх$
при условии, что изображение размерами превышает установленный лимит, по умолчанию он выставлен 500х500

В панели управления есть одна единственная настройка, с помощью которой можно применить эффект в категориях фотоальбома

Цитата
Использовать функцию "LightBox" в категориях:
При нажатии на демо-картинку откроется красивое окошко без перехода на другую страницу.

Если поставить галочку и применить настройку, то на страницах категорий можно лицезреть увеличенные картинки, нажав на превьюшку. Довольно бесполезная функция

Для того чтобы задать эффект увеличения по клику в оформленном окне любому изображению, нужно прописать изображение ссылкой, и задать если нужно картинку превью и картинку в полном размере

Код изображений

Код
<a href="http://webanetlabs.net/_fr/3/3882473.jpg" class="ulightbox" title="Нажмите, для просмотра в полном размере..."><img alt="альтернативное название картинки" style="margin:0;padding:0;border:0;" src="http://webanetlabs.net/_fr/3/2106898.jpg"></a>


где

class="ulightbox" - обязательный элемент для работы эффекта увеличения

- обязательный элемент для открытия в новом окне. В нашем случае - это увеличенное изображение

/_fr/3/3882473.jpg - это увеличенная всплывающая картинка

/_fr/3/2106898.jpg - это картинка превью (та, которую видят пользователи до клика)

Сморим полученный результат в действии. Для демонстрации были выбраны разные картинки. При нажатии на превью откроется другая более крупная

Демонстрация эффекта увеличения картинки по клику
Прикрепления: 2106898.jpg(11.3 Kb) · 3882473.jpg(32.3 Kb)
 
blood Дата: Суббота, 2014-06-07, 00:40 | Сообщение # 2
Рядовой
Группа: Пользователи
Сообщений: 3
Статус: Offline
здравствуйте , подскажите пожалуйста ,при добавлении изображений я хочу использовать этот метод ,но возник вопрос можно ли прописывать TITLE для уменьшенного изображения и для оригинального ?
 
webanet Дата: Суббота, 2014-06-07, 01:58 | Сообщение # 3
Генералиссимус
Группа: Администраторы
Сообщений: 195
Статус: Offline
blood
Цитата
я хочу использовать этот метод ,но возник вопрос можно ли прописывать TITLE для уменьшенного изображения и для оригинального ?
для данного метода характерно то, что прописать титл можно только один раз. если вы пропишете титл и к уменьшенной и к полной будете видеть только один титл и относиться он будет к превью
 
blood Дата: Суббота, 2014-06-07, 14:02 | Сообщение # 4
Рядовой
Группа: Пользователи
Сообщений: 3
Статус: Offline
спасибо ..

я читал разные статьи про продвижение сайтов ,везде пишут ,чтобы обязательно были у изображений TITLE и ALT, что это нужно для поисковых роботов и тд... ,а в этом случае куда прописывать название изображения , к превью ?
 
webanet Дата: Суббота, 2014-06-07, 19:43 | Сообщение # 5
Генералиссимус
Группа: Администраторы
Сообщений: 195
Статус: Offline
blood, в этой конструкции есть все что нужно. обратите внимание на выделенное красным

Цитата
<a href="/_fr/3/3882473.jpg" class="ulightbox" title="Нажмите, для просмотра в полном размере..."><img alt="альтернативное название картинки" style="margin:0;padding:0;border:0;" src="/_fr/3/2106898.jpg"></a>


все больше ничего лепить не надо. этого вполне достаточно
 
blood Дата: Суббота, 2014-06-07, 20:37 | Сообщение # 6
Рядовой
Группа: Пользователи
Сообщений: 3
Статус: Offline
webanet, большое спасибо за помощь )))
 
Хозяин-Тайги Дата: Среда, 2014-10-29, 17:30 | Сообщение # 7
Рядовой
Группа: Пользователи
Сообщений: 1
Статус: Offline
Интересный эффект, но я, как то не понял а, как же сделать синие всплывающее окошко? этим же, скриптом? или как то, иначе это делается?
 
webanet Дата: Суббота, 2016-01-02, 15:30 | Сообщение # 8
Генералиссимус
Группа: Администраторы
Сообщений: 195
Статус: Offline
photosimf, две картинки. одна превью маленькая может быть. а вторая большая. но можно и одну
 
форум webanet » Помоги себе сам компьютеры и интернет » uCoz решение проблем » Эффект LightBox на uCoz (fancyBox v2.0.5 красивый эффект к картинкам на сайтах uCoz)
  • Страница 1 из 1
  • 1
Поиск: