Понедельник, 2017-11-20, 2:49 PM
Игры и программы без установки Portable
Главная Регистрация Вход
Приветствую Вас, Гость · RSS
[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
Страница 1 из 11
ФОРУМ портала DM_55 » САЙТЫ, WEB-ДИЗАЙН, СКРИПТЫ, КОМПЬЮТЕРЫ » СКРИПТЫ ДЛЯ uCoZ » Выезжающая увеличивающаяся картинка на uCoz
Выезжающая увеличивающаяся картинка на uCoz
DM_55Дата: Понедельник, 2009-03-09, 1:49 PM | Сообщение # 1
=сайт админ=
Группа: Администраторы
Сообщений: 292
Репутация: 5555
Статус: Offline
Как сделать красивое увеличение картинки при нажатии? Легко и просто...
Можно установить практически в любом модуле. Мы разберем, для примера, модуль новостей. И так:

1. Для начала скачиваем архив (внизу первого примера). Далее в настройках новостей сайта добавляем дополнительное поле (Главная » Новости сайта » Настройки модуля). В моем примере, это доп. поле № 1.
В замене стандартных надписей переименовываем его в нужное, а именно "Ссылка на изображение" (Главная » Замена стандартных надписей и выбираете - Форма добавления модуля "Новости сайта").
Затем в шаблонах "Вид материалов новостей" и "Страница материала и комментариев к нему" ставим следующий код перед $MESSAGE$ :

Code
<?if($OTHER1$)?><center><a href="$OTHER1$" class="highslide" onclick="return hs.expand(this, {captionId: 'caption1'})"><img src="$OTHER1$" border=0 width=200 style="border:none;"></a></center><br><?endif?>

Если у вас другой номер доп. поля то его изменяем в коде $OTHER1$ на свой.
2. После этого в корне сайта создаем директорию highslide. Кидаем туда файл highslide.css и highslide.js из архива. Потом открываем уже залитый на сайт файл highslide.js и находим в нем это :

Code
creditsText : 'текст надписи на картинке',
creditsHref : 'адрес вашего сайта',
creditsTitle : 'комментарий к надписи',

И заменяете на свои... И сохраняем.
В эту же директорию загружаем папку graphics со всеми файлами, которые внутри. В итоге должен получиться путь /highslide/graphics/

3. Теперь в шаблонах "Страницы сайта", "Архив Материалов новостей" и "Вид материала" и "Страница материала и комментариев к нему" между "head"........"/head" пишем :

Code
<style type="text/css" media="all">
@import url(highslide/highslide.css);
</style>
<script type="text/javascript" src="highslide/highslide.js"></script>
<script type="text/javascript">
hs.graphicsDir = 'highslide/graphics/';
</script>

P.S. В управление "Вид материала", нужно ставить просто в самом начале, так как там нет "head"........"/head"
Все готово! Радуемся своей крутизне

Доступно только для пользователей

Показал и научил меня этой фишке админ с сайта:
http://kapter.ucoz.ru/

-= ПРИМЕР =-

================== ВАРИАНТ 2 ==================

после /НЕАD>
вставляем:

Code
<style type="text/css" media="all">       
@import url(http://vidoc.com.ua/templates/anrysys/css/engine.css);       
</style>       
<script type="text/javascript" src="http://vidoc.com.ua/engine/ajax/js_edit.js"></script>       
<script type="text/javascript" src="http://vidoc.com.ua/engine/classes/highslide/highslide.js"></script>       
<script type="text/javascript">       
       hs.graphicsDir = 'http://vidoc.com.ua/engine/classes/highslide/graphics/';       
       hs.outlineType = 'rounded-white';       
       hs.numberOfImagesToPreload = 0;       
       hs.showCredits = false;       
       hs.loadingText = 'Загрузка...';       
       hs.fullExpandTitle = 'Развернуть до полного размера';       
       hs.restoreTitle = 'Кликните для закрытия картинки, нажмите и удерживайте для перемещения';       
       hs.focusTitle = 'Сфокусировать';       
       hs.loadingTitle = 'Нажмите для отмены';       
</script>

всё теперь как будите ставить рисунок вставляйте такой скрипт:

Code
<div align="center"><div><a href="ССЫЛКА НА БОЛЬШОЙ РИС" class="highslide" onclick="return hs.expand(this, {captionId: 'caption1'})"><img src="ССЫЛКА НА СТАНДАРТНЫЙ РИС" style="border: none;" alt='НАЗВАНИЕ' /></a></div></div>     

<b>  

================== ВАРИАНТ 3 ==================

в этом способе необходимо каждый раз добавлять КОД для картинки

после /НЕАD>
вставляем:

Code
<style type="text/css" media="all">        
@import url(http://vidoc.com.ua/templates/anrysys/css/engine.css);        
</style>        
<script type="text/javascript" src="http://vidoc.com.ua/engine/ajax/js_edit.js"></script>        
<script type="text/javascript" src="http://vidoc.com.ua/engine/classes/highslide/highslide.js"></script>        
<script type="text/javascript">        
        hs.graphicsDir = 'http://vidoc.com.ua/engine/classes/highslide/graphics/';        
        hs.outlineType = 'rounded-white';        
        hs.numberOfImagesToPreload = 0;        
        hs.showCredits = false;        
        hs.loadingText = 'Загрузка...';        
        hs.fullExpandTitle = 'Развернуть до полного размера';        
        hs.restoreTitle = 'Кликните для закрытия картинки, нажмите и удерживайте для перемещения';        
        hs.focusTitle = 'Сфокусировать';        
        hs.loadingTitle = 'Нажмите для отмены';        
</script>

При добавлении рисунка вставлять код:

Code
<div align="center"><div><a href="ССЫЛКА НА БОЛЬШОЙ РИС" class="highslide" onclick="return hs.expand(this, {captionId: 'caption1'})"><img src="ССЫЛКА НА СТАНДАРТНЫЙ РИС" style="border: none;" alt='НАЗВАНИЕ' /></a></div></div>
 
ФОРУМ портала DM_55 » САЙТЫ, WEB-ДИЗАЙН, СКРИПТЫ, КОМПЬЮТЕРЫ » СКРИПТЫ ДЛЯ uCoZ » Выезжающая увеличивающаяся картинка на uCoz
Страница 1 из 11
Поиск:

Хостинг от uCoz