чтение rss ленты

Fantazystudio.ru

Добро пожаловать на сайт о вебдизайне Fantazystudio.ru! У нас Вы сможете: скачать стили, шрифты, psd исходники, иконки, смайлики, кисти, узоры, экшены, шаблоны для фото, фоторамки, уроки по Фотошопу и многое другое!..

Увеличенное изображение при помощи скрипта highslide

Сегодня нашел любопытную и интересную вещь, школа наращивания ногтей не когда не знал что у нас в России таковые имеются. Обучение в этом учебном центре сочетает в себя не только теорию, но и практику. А еще там очень много хороших преподавателей которые являются мастерами по наращиванию ногтей.

СКИДКИ 50% ДО 01 МАЯ,

Скачиваем скрипт highslide с официального сайта highslide.com

В нашем случае нам понадобятся только такие файлы и папка: graphics, highslide.js, highslide.css, highslide-ie6.css.

Суем эти файлы в папку js относительно страницы сайта.
Открываем в редакторе файл вашей страницы, например, index.html и между
<head></head> 

пишем:
<script type="text/javascript" src="js/highslide.js"></script>
 <link rel="stylesheet" type="text/css" href="js/highslide.css" />
 <script type="text/javascript">
 hs.graphicsDir = 'js/graphics/';
 hs.wrapperClassName = 'wide-border';
 </script>


Дальше, предположим, в теле документа у нас есть картинка slide.jpg, написанная в виде
<img src="img/slide.jpg">
. И тут есть 2 варианта, как можно сделать увеличение изображения при нажатии:

1. Увеличение этой самой картинки с уменьшенного вида. То есть уменьшаем картинку средствами html или css и при нажатии загружаем ее же в оригинальном виде. Выглядит это так:
<a href="img/slide.jpg" onclick="return hs.expand(this)"><img src="img/slide.jpg" width="40" height="80"></a>


2. Увеличение уменьшенного изображения с другим файлом. То есть уже имеется уменьшенная картинка slide.jpg, при нажатии загружаем другую slide2.jpg. Выглядит это так:
<a href="img/slide2.jpg" onclick="return hs.expand(this)"><img src="img/slide.jpg"></a>


Если нужно убрать рамку, то надо редактировать class в файле highslide.css. Если нужно убрать ссылку на сайт производителя и ненужные надписи, то надо исправить и удалить несколько в файле highslide.js.

Как убрать рамку?

в файле highslide.css вместо класса
.highslide img {
 border: 2px solid silver;
 }

напишите
.highslide img {
 border: 0px;
 }


чтобы убрать копирайт не нужно удалять ссылку как таковую-будет правильней в .js документе поставить false вместо true
showCredits : false-won’t show the copyright


в оригинальном файле highslide.js удалите следующие строчки:
36 creditsText : ‘Powered by Highslide JS‘,
37 creditsTitle : ‘Go to the Highslide JS homepage’,
60 creditsHref : ‘http://highslide.com/',
1417 href: hs.creditsHref,
1420 innerHTML: hs.lang.creditsText,
1421 title: hs.lang.creditsTitle

Я использовал версию скрипта 4.1.8.
 
Поделиться интересной новостью со своими друзьями

Прямая ссылка на новость
BB-code ссылка на новость
HTML ссылка на новость
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.


Другие новости по теме:
  • Просмотров: 723
  • Комментариев: 0

Добавление комментария

Ваше Имя: *
Ваш E-Mail: *
Текст:
Введите два слова, показанных на изображении:
Вопрос:
Кто ты? (Человек либо Бот)
Ответ:*

Fantazystudio.ru

  • Яндекс.Метрика