бесплатные прокси листы
подписка на RSS форум webanet
web.a.net
Loading
Страница 1 из 11
форум webanet » Помоги себе сам компьютеры и интернет » uCoz решение проблем » Эффект LightBox на uCoz (fancyBox v2.0.5 красивый эффект к картинкам на сайтах uCoz)
Эффект LightBox на uCoz
webanet Дата: Пятница, 07.09.2012, 03:02 | Сообщение # 1
Генералиссимус
Группа: Администраторы
Сообщений: 170
Статус: 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" target="_blank" title="Нажмите, для просмотра в полном размере..."><img alt="альтернативное название картинки" style="margin:0;padding:0;border:0;" src="http://webanetlabs.net/_fr/3/2106898.jpg"></a>


где

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

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

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

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

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

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

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

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


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

© web.A.net 2007-2017
Версия PDA