Добрый вечер уважаемые и неуважаемые мною товарищи и господа соответственно.
Я представляю Вам очередной, чудеснейший скрипт (буржуйский) просмотра увеличенного изображения картинки при наведении на неё мышки.
В работе скрипта использованы фотографии волков (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>
Итак начинаем разбор самого кода...что куда и откуда.
-
src="jquery.min.js" - закачиваем себе на сайт этот скрипт, скачиваем не текстом, а файлом!
-
src="featuredimagezoomer.js" - этот скрипт тоже скачиваем.
-
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' - перекрестие.
-
$('#image1') в теле <head> и img id="image1" - это так называемый позывной вашего изображения...я извиняюсь за такие подробности и простоту повествования, но не всеже у нас в сети продвинутые пользователи или программисты, а потому сей монускрипт должен быть понятен каждому простому гражданину.
- zoomrange: [3, 10] - 3,10 это увеличение которое вы можете себе установить для прокрутки изображения колесом мышки. от 3 х до 10 раз, изменяем по своему усмотрению. Если вам не нужно увеличение колесом мыша, но нужен определённый размер увеличения, то ставим например [5, 5]. Если вам нужен просмотр оригинального изображения, то пишем zoomrange: undefined, .
-
magnifiersize: [300,300] - размер окна в котором вы и ваши пользователи будут просматривать прекрасные изображения, меняем по своему усмотрению с 300pix на нужное
-
magnifierpos: 'right' - отображение картинки относительно начального, по умолчанию стоит - right - что значит справа,
left - и будет слева.
-
largeimage: 'pei.JPG' - эта картинка большого размера, тоесть оригинал который будем смотреть. В теле <head> ставится ссылка на большую картинку.
-
$('#image3').addimagezoom() - ну а здесь например вообще нифига не написано, а потому просмотр картинки будет производится в окне 200х200 пикселей и оригинального размера, не забываем про пункт 5, где можем поменять увеличение на нужное нам.
- В теле <body> находим вот это - img id="image1", подробнее в пункте 4.
- border="0" - решаем, нужен ли вам бордюр (окаёмочка) вокруг картинки. При 0 - не нужен.
- src="pei 1.JPG" - картинка показанная первоначально, можно сжать истинную картинку, что бы не грузить вашего пользователя понапрасну, если он не захочет смотреть их. Но вот беда...один фиг мышом то по изображению провёл и всё...оно уже грузится к просмотру. При этом крутится колёсико spinningred.gif описанное в пункте 3. Если у вас на сайте на одной странице бедет много картинок, то стоит сжать. Навёл мыша - получи изображение.
- style="width:300px;height:225px" - где написана соответственно ширина и высота картинки представленной к просмотру. Пишем как нам нужно, хоть 100х100px.
- Ангоязычно-буржуйский оригинал этого прекрасного скрипта можем увидеть открыв один из скриптов в п.1 и п.2 , имею ввиду ссылку на сайт где я это откопал, разжевал для вас.
- Буржуи они ведь хитрые и немного противные, любят понапутать и замутить ( если в мутную воду закинуть мутную удочку, то можно поймать мутную рыбу ), не то что серая сестра, простая и понятная. Ездит себе по странам и всё в подробностях нам рассказывает. А ещё она делает прекрасные мульфильмы.
- В тело <head> вставляем $('#image100').addimagezoom() }) - независимо от количества картинок.
- В самом начале страницы HTML есть вот это - color=#818181, offX=5, offY=5, для общего развития поясню, там цвет серый обрамления и его размер. Но если Вы уже и туда залезли, то я вам совершенно не нужен.
Пишем не стесняясь в коментах, понравился вам скрипт или нет, тем более там писать то можно без регистрации.
|
