• Страница 1 из 2
  • 1
  • 2
  • »
Форум » Веб-разработка » HTML + CSS — коды » Скрипт увеличения изображения для uCoz
Скрипт увеличения изображения для uCoz
Kosten
Воскресенье, 04 Октября 2015 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44342
Награды: 70
Скрипт который увеличивает любые изображение на сайте вы возможно видели на многих площадках. И вот я решил выложить один замечательный Скрипт увеличения изображения для uCoz если честно я как то и не задумывался о нём но многие его ищут и хотят установить себе на сайт. Данный скрипт есть в интернете во многих вариантах и это один из них и думаю я постепенно для вас выложу ещё варианты.



Так вот я нашёл его и убрал немного лишнего и сторонние ссылки , но не беспокойтесь он остался так же работоспособным.
Ну теперь давайте установим его !
Для установки в первую очередь скачайте архив с нашего сайта и распакуйте его, затем загрузите папку highslide в корень вашего сайта (Файловый менеджер) корень.
Следующим шагом мы установим скрипт в верхнюю часть сайта:

Код
<script type="text/javascript" src="/highslide/highslide.js"></script>
<link rel="stylesheet" type="text/css" href="/highslide/highslide.css" />
<script type="text/javascript">
// override Highslide settings here
// instead of editing the highslide.js file
hs.graphicsDir = '/highslide/graphics/';
</script>


Затем нам остаётся настроить само изображения и для этого вам нужно пройти в вид материала того модуля где у вас выводится изображения и находим тот код который выводит у вас изображения .

Обычно это выглядит примерно так:

Код
<img src="$IMG_URL1$" width="460" height="200" alt="" />


И нам его всего лишь нужно подредактировать а точнее добавить ссылку для увеличения .
И делается это вот так :

Код
<a href="$IMG_URL1$" class="highslide" onclick="return hs.expand(this)"> <img src="$IMG_URL1$" width="460" height="200" alt="" /></a>


И теперь при наведение на картинку у вас появится значок Zoom и вы можете увеличивать изображения клика по изображению и так же уменьшать его.
Прикрепления: 8253223.jpg (27.6 Kb)
Страна: (RU)
ZruBkul
Пятница, 16 Октября 2015 | Сообщение 2
Оффлайн
Пользователи
Сообщений:31
Награды: 0
Старо и актуально.
Страна: (RU)
Kosten
Пятница, 16 Октября 2015 | Сообщение 3
Оффлайн
Администраторы
Сообщений:44342
Награды: 70
Цитата ZruBkul ()
Старо и актуально.

Не удивительно, так как нового нет.
Страна: (RU)
Kolinkor
Пятница, 16 Октября 2015 | Сообщение 4
Оффлайн
Vip
Сообщений:306
Награды: 1
А вы что не знаете, что он еще и настраивается, возможно этот уже настроен, а так нужно его и подводить по дизайну, делать светлое к примеру окно, где будет увеличение или темное.
Страна: (RU)
Kosten
Пятница, 16 Октября 2015 | Сообщение 5
Оффлайн
Администраторы
Сообщений:44342
Награды: 70
Brung, уже есть настроен, он подходит на светлый и на темный дизайн, и можете посмотреть здесь он прописан.

Прикрепления: 4596148.jpg (14.9 Kb)
Страна: (RU)
Kolinkor
Пятница, 16 Октября 2015 | Сообщение 6
Оффлайн
Vip
Сообщений:306
Награды: 1
Kosten, классно сделан, и видно что рекламы нет.
Страна: (RU)
Kosten
Пятница, 16 Октября 2015 | Сообщение 7
Оффлайн
Администраторы
Сообщений:44342
Награды: 70
Brung, точно не скажу, кто делал, возможно ЛехаРусс, так как с его сайта брал. А на счет рекламы, вообще не понимаю, зачем ее ставить. Это для того, чтоб пользователь скачал и установил скрипт, а потом искал эту ссылку чтоб убрать, нет это не мое.
Страна: (RU)
Kolinkor
Пятница, 16 Октября 2015 | Сообщение 8
Оффлайн
Vip
Сообщений:306
Награды: 1
Потом попробую установить, там же есть эффект затемнение.
Страна: (RU)
Kosten
Пятница, 16 Октября 2015 | Сообщение 9
Оффлайн
Администраторы
Сообщений:44342
Награды: 70
Brung, да есть и не хило смориться, чисто изображение на темном оттенке, просто визуализация меняется на раз лучше.
Страна: (RU)
Kolinkor
Пятница, 16 Октября 2015 | Сообщение 10
Оффлайн
Vip
Сообщений:306
Награды: 1
Спасибо, все понятно.
Страна: (RU)
danshin95
Четверг, 21 Апреля 2016 | Сообщение 11
Оффлайн
Пользователи
Сообщений:1
Награды: 0
а как скачать то
Страна: (RU)
Kosten
Четверг, 21 Апреля 2016 | Сообщение 12
Оффлайн
Администраторы
Сообщений:44342
Награды: 70
danshin95, если вы скачать хотите и закинуть себе в корень сайта, то вот прочтите мануал по этой теме.

А скачать вам нужно этот архив поместить файловый менкджер, 2 ссылки и третья на папку.
Страна: (RU)
Kosten
Четверг, 21 Апреля 2016 | Сообщение 13
Оффлайн
Администраторы
Сообщений:44342
Награды: 70
Также можно использовать с прозрачностью фона, что сами настроите.

Код
<script type="text/javascript" src="highslide/highslide.js"></script>
<link rel="stylesheet" type="text/css" href="highslide/highslide.css" />
<script type="text/javascript">
hs.registerOverlay({
html: '<div class="closebutton" onclick="return hs.close(this)" title="Закрыть"></div>',
position: 'top right',
fade: 2  
});
hs.graphicsDir = 'highslide/graphics/';
hs.dimmingOpacity = 0.7; //прозрачность фона
hs.wrapperClassName = 'borderless';
</script>


Если решили только одну картинку изображение увеличить, это может быть в статье любой, то после все установки, можно поставить такой код.

Код
<a href="image_big.jpg" title="Увеличить" class="highslide" onclick="return hs.expand(this)">
<img alt=" " src="image_big.jpg" width="160" height="107"/></a>
Страна: (RU)
workman
Четверг, 21 Апреля 2016 | Сообщение 14
Оффлайн
Проверенные
Сообщений:1716
Награды: 9
Как по моему так просто грузанутый JS. Зачем вешать столько много если можно по моемому можно одним?
Страна: (RU)
Kosten
Четверг, 21 Апреля 2016 | Сообщение 15
Оффлайн
Администраторы
Сообщений:44342
Награды: 70
workman, кому как нравиться, раньше стояло у меня это увеличение, также есть некоторый вид материала под файлы или новости, где подключил его, и нормально.
Страна: (RU)
Форум » Веб-разработка » HTML + CSS — коды » Скрипт увеличения изображения для uCoz
  • Страница 1 из 2
  • 1
  • 2
  • »
Поиск: