-->
Пятница, 29.03.2024, 08:33

Пилотажное исследование "Зондаж"

-сделано под браузер "Опера"

Главная » Статьи » Самые лучшие скрипты для сайта » Скрипты для картинок и фотографий

Скрипт просмотра изображений при помощи лупы

Скрипт просмотра изображений при помощи лупы (можно увеличить колесом мышки)

Это полезно когда Вы например, не хотите показывать огромное изображение на своём сайте. А вот посмотреть его с помощью лупы довольнотаки интересно, да и текст почитать внимательно стоит.


Представляю Вам сам код этого скрипта.

<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>

<script type="text/javascript" src="ddpowerzoomer.js"></script>

<script type="text/javascript">

jQuery(document).ready(function($){ //fire on DOM ready
$('img#gallerya').addpowerzoom({magnifiersize:[75,75]})
$('img.gallery').addpowerzoom({powerrange:[2,5]})
})

</script>
</head>

<body>

<img class="gallery" border="0" src="08.jpg" style="width:300px;height:225px">

</body>
</html>


Теперь рассмотрим из чего состоит сам скрипт.

1. Зкачиваем себе на сайт файл jquery.min.js, кстати, сохраните этот файл, он применяется во всех скриптах как ОСНОВА.
2. Закачиваем и этот файл - ddpowerzoomer.js , непосредственно для скрипта Лупа
3. img class="gallery" border="0" src="08.jpg", где src="08.jpg Ваша фотография для увеличения.
4. width:300px;height:225px - ширина и высота соответственно показываемой картинки.
5. addpowerzoom({magnifiersize:[75,75]}) - размер самой лупы, который меняем по своему усмотрению.
6. addpowerzoom({powerrange:[2,5]}) - при прокрутке колесом мыши, изображение увеличивается в данном случае, от 2х до 5 ти раз. Ставим Вам удобные значения.
7.Да вот собственно и весь скрипт, красивый и простой, но это ещё не всё.


Как же попробовать работу скрипта не устанавливая его себе на сайт? прим. человек такая скотина, что он просто физически не может всего знать. И как говорила профессор Ермолаева Елена Иннокентьевна, мой учитель по архитектуре (не сайтов, строительства и проектирования зданий), "мы не заставляем Вас выучить ВСЁ, а вот знать где ЭТО найти Вы научитесь и это главное". Это я к тому, чтобы остудить пыл и ярость господ программистов по поводу нижеизложенного.

Тоесть, сделав как я напишу коротенько ниже, Вы сможете поэксперементировать даже у себя на работе.

Итак, для начала файлы у Вас должны быть видны на компьтере с расширением в конце. Типа - Моя любимая свекровь.avi , avi - это расширение видео.

Если у Вас не видны расширения, то делаем так.
1. Открываем любую папку, далее жмём --- сервис -- свойства папки, как показано на рисунке ниже.

2. В открытом окошке свойства папки выбираем кнопочку ---Вид. Далее снимаем галку вот с этого " скрывать расширения для зарегистрированных типов файлов" и жмём на применить. Картинки показана ниже.

3. Теперь создадим пустую папку, да хоть на рабочем столе. И скопируем туда скачанные файлы (например для этого скрипта) - jquery.min.js -- ddpowerzoomer.js и картинку 08.jpg
4. В любом месте этой папки жмануть на правую кнопку мыши и выбрать - содать текстовый документ, как показано ниже или просто создать блокнот.

5. Открываем пустой текстовый файл, копируем выложенный выше, для сжирания Вами, код скрипта и жмём - вставить в текстовый файл. Текстовый файл должен находиться там же, где и файлы из пункта 3. Нажимаем сохранить и закрывает текстовый файл.
6. Теперь меняем название текстового файла, ну например - мой скрипт...но...в конце прибавляем именно вот так - мой скрипт.html Незабываем поставить точку после слова - мой скрипт.
7. Далее Вам напишут...короче жмите ОК. Опана, а вот и получился интернетовский файл.
8. Открываем его и наслаждаемся просмотром. Изменить и попробовать что-то в коде проще простого.
9. На полученной HTML странице жмём вверху -- вид -- просмотр html кода. Или правой кнопкой и тоже самое.
10. Вносим поправки в код и жмём на сохранить, обновляем страницу и смотрим что получилось.
11. Да, и не надо мнить себя великими программистами, сделали страницу, сделайте копию и эксперементируйте с ней.
12. Приглашайте коллег и изменяя код, вставляя их физиономии, меняя размер картинки и лупы удивляйте их. Они просто обалдеют от Ваших познаний. Да, и новые картинки надо закачивать в туже папку или указывать путь к ней....УСПЕХОВ!!!

Категория: Скрипты для картинок и фотографий | Добавил: researcher (30.05.2010)
Просмотров: 8018 | Рейтинг: 5.0/1 |
Всего комментариев: 0
RSS

Категории каталога

Функциональные скрипты [6]
Скрипты для картинок и фотографий [4]

Форма входа

Поиск

Друзья сайта

Статистика


Онлайн всего: 1
Гостей: 1
Пользователей: 0

Наш опрос

Как сделать мужчину счастливым?
Всего ответов: 65

Мини-чат