-->
Понедельник, 26.06.2017, 04:41

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

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

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

Скрипт просмотра увеличенного изображения картинки при наведении на неё мышки.

Добрый вечер уважаемые и неуважаемые мною товарищи и господа соответственно.

Я представляю Вам очередной, чудеснейший скрипт (буржуйский) просмотра увеличенного изображения картинки при наведении на неё мышки.

В работе скрипта использованы фотографии волков (1024х768), которые Вы сможете посмотреть в увеличенном размере, детально увидев все прелести этого животного, которое в отличии от руководства ООО "М.." обладает прекрасным характером. Он, волк, жрёт столько, сколько ему надо, не обжираясь людской крови до умопомрачения и нажравшись сам оставляет остатки пищи ( у нас заработанной кровью и потом - зарплаты ) своим подопечным.

Пример этого поразительного скрипта вы можете видеть ниже.


По некоторым соображениям на увиденном Вами выше смотрим одного волка и самую простенькую версию скрипта, а вот полный пакет смотрим ЗДЕСЬ прим. если не дадут денюжков к концу этой недели то обязательно покажу работу скрипта в полную силу - поверьте на слово, это просто завораживающее зрелище.

Как и раньше копируем нижеприведённый код в тело Вашей html страницы, что воткуть в тело <bodi> или <head> увидете сами.


<html>
<head>
<style type="text/css">

.magnifyarea{ /* CSS to add shadow to magnified image. Optional */
box-shadow: 5px 5px 7px #818181;
-webkit-box-shadow: 5px 5px 7px #818181;
-moz-box-shadow: 5px 5px 7px #818181;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=5, offY=5, positive=true);
background: white;
}

</style>

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

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

<script type="text/javascript">

jQuery(document).ready(function($){

$('#image1').addimagezoom({
zoomrange: [3, 10],
magnifiersize: [300,300],
magnifierpos: 'right',
largeimage: 'pei.JPG' //<-- No comma after last option!
})

$('#image2').addimagezoom({
zoomrange: undefined,
magnifiersize: [500,300],
magnifierpos: 'right',
largeimage: 'pei.JPG' //<-- No comma after last option!
})

$('#image3').addimagezoom()

})

</script>
</head>

<body>

<p><img id="image1" border="0" src="pei 1.JPG" style="width:300px;height:225px" /><p>

<p><img id="image2" border="0" src="pei 2.JPG" style="width:300px;height:225px" /><p>

<p><img id="image3" border="0" src="pei 3.JPG" style="width:300px;height:225px" /><p>

</body>
</html>


Итак начинаем разбор самого кода...что куда и откуда.

  1. src="jquery.min.js" - закачиваем себе на сайт этот скрипт, скачиваем не текстом, а файлом!
  2. src="featuredimagezoomer.js" - этот скрипт тоже скачиваем.
  3. spinningred.gif - эту картинку скачиваем, но обязательно название её должно быть как написано ранее. Изменить картинку и другое вы можете открыв скрипт featuredimagezoomer.js с помощью ...короче смотрим статьи ранее, а мне уже писать то и лень. Это будет в теле скрипта( loadinggif: 'spinningred.gif', //full path or URL to "loading" gif
    magnifycursor: 'crosshair', //Value for CSS's 'cursor' attribute, added to original image loadinggif ) - где мы видим лежит Ваша картинка, а также - magnifycursor: 'crosshair' - перекрестие.
  4. $('#image1') в теле <head> и img id="image1" - это так называемый позывной вашего изображения...я извиняюсь за такие подробности и простоту повествования, но не всеже у нас в сети продвинутые пользователи или программисты, а потому сей монускрипт должен быть понятен каждому простому гражданину.
  5. zoomrange: [3, 10] - 3,10 это увеличение которое вы можете себе установить для прокрутки изображения колесом мышки. от 3 х до 10 раз, изменяем по своему усмотрению. Если вам не нужно увеличение колесом мыша, но нужен определённый размер увеличения, то ставим например [5, 5]. Если вам нужен просмотр оригинального изображения, то пишем zoomrange: undefined, .
  6. magnifiersize: [300,300] - размер окна в котором вы и ваши пользователи будут просматривать прекрасные изображения, меняем по своему усмотрению с 300pix на нужное
  7. magnifierpos: 'right' - отображение картинки относительно начального, по умолчанию стоит - right - что значит справа, left - и будет слева.
  8. largeimage: 'pei.JPG' - эта картинка большого размера, тоесть оригинал который будем смотреть. В теле <head> ставится ссылка на большую картинку.
  9. $('#image3').addimagezoom() - ну а здесь например вообще нифига не написано, а потому просмотр картинки будет производится в окне 200х200 пикселей и оригинального размера, не забываем про пункт 5, где можем поменять увеличение на нужное нам.
  10. В теле  <body> находим вот это - img id="image1", подробнее в пункте 4.
  11. border="0" - решаем, нужен ли вам бордюр (окаёмочка) вокруг картинки. При 0 - не нужен.
  12. src="pei 1.JPG" - картинка показанная первоначально, можно сжать истинную картинку, что бы не грузить вашего пользователя понапрасну, если он не захочет смотреть их. Но вот беда...один фиг мышом то по изображению провёл и всё...оно уже грузится к просмотру. При этом крутится колёсико spinningred.gif описанное в пункте 3. Если у вас на сайте на одной странице бедет много картинок, то стоит сжать. Навёл мыша - получи изображение.
  13. style="width:300px;height:225px" - где написана соответственно ширина и высота картинки представленной к просмотру. Пишем как нам нужно, хоть 100х100px.
  14. Ангоязычно-буржуйский оригинал этого прекрасного скрипта можем увидеть открыв один из скриптов в п.1 и п.2 , имею ввиду ссылку на сайт где я это откопал, разжевал для вас.
  15. Буржуи они ведь хитрые и немного противные, любят понапутать и замутить ( если в мутную воду закинуть мутную удочку, то можно поймать мутную рыбу ), не то что серая сестра, простая и понятная. Ездит себе по странам и всё в подробностях нам рассказывает. А ещё она делает прекрасные мульфильмы.
  16. В тело <head> вставляем $('#image100').addimagezoom() }) - независимо от количества картинок.
  17. В самом начале страницы HTML есть вот это - color=#818181, offX=5, offY=5, для общего развития поясню, там цвет серый обрамления и его размер. Но если Вы уже и туда залезли, то я вам совершенно не нужен.

Пишем не стесняясь в коментах, понравился вам скрипт или нет, тем более там писать то можно без регистрации.

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

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

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

Форма входа

Логин:
Пароль:

Поиск

Друзья сайта

Статистика


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

Наш опрос

Откуда произошел человек?
Всего ответов: 176

Мини-чат