Уроки Увеличение картинки на JavaScript и CSS
3 декабря 2012
6034
увеличение картинки на javascript и CSS

Увеличение картинки на JavaScript и CSS

Сложность Рубрика JavaScript Браузеры
Демонстрация » Скачать »

Возможности увеличить картинку, изображение с помощью языков css и javascript, огромное множество, ну мне бы хотелось в этом уроке показать один полезный прием, если кому то потребуется увеличить одну картинку, а не абсолютно все, как в полноценной галереи.

 

Допустим, аналогично нашему сегодняшнему уроку, мне нужно увеличить только показательную картинку, которая находится после кнопочек посмотреть демо и скачать исходники, чтобы при наведении на нее менялся курсор и затем при нажатии выводилась картинка заданного размера.

 

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

 

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

К недостаткам можно отнести потерю качества разрешения изображения при уменьшении или при увеличении картинки, то есть, если у Вас картинка маленькая, то при увеличении она будет плохого качества разрешения, если же большая, то получится очень сжатая, что дает плохие показатели при показе миниатюр в разрешении.

 

Теперь перейдем непосредственно к самому коду данного скрипта:

 

Файл index.php

 

Между тегами head подключаем сначала style.css - отвечает за стили данного скрипта и jquery.tools.mins.js.

Пишем код javascript, который отвечает за выполнение сценария увеличения и уменьшений картинки.

Сначала прописываем идентификатор, который будет выполнять связь между изображением и данным скриптом $("#test"), затем код влияющий на увеличение изображения с помощью функции onBeforeLoad() на 450 пикселей, потом уменьшаем изображение с помощью функции onBeforeClose() до 150 пикселей. Данные параметры размера изображения Вы можете задавать сами с учетом совпадения миниатюры изображения со стилями миниатюры тега img, который будет рассмотрен в стиле style.css.

 

<head>
<link rel="stylesheet" type="text/css"  href="style.css"/>
<script src="jquery.tools.mins.js"  type="text/javascript"></script>
<script>
$(function() {

$("#test").expose({
maskId:'mask',
onBeforeLoad: function() {
this.getExposed().animate({width: 450});
        },

onBeforeClose: function() {
this.getExposed().animate({width: 150});
}

}).click(function()  {
$(this).expose().load();
});

});
</script>
</head>

 

Далее прописываем и выводим саму картинку с классом и id.

 

<img src='test.jpg' id='test' class='zoom'>

 

Сначала указываем путь к картинке src, затем прописываем идентификатор, который имеет связь с $("#test"), в конце указываем класс стиля, который отвечает за первоначальную ширину картинки и стиль курсора при наводке на нее.

 

Файл  style.css

 

Указываем класс картинки, отвечающий за ширину и стиль курсора.

 

.zoom
{
cursor: move;
width: 150px;
}

 

Итог:

 

У нас получился скрипт, по выводу одного изображения, работающий с одной картинкой, прекрасно работающий во всех браузерах. Думаю, что найдутся мысли, как его можно применить в деле!

 

Спасибо за внимание, надеюсь данный материал поможет Вам в решении определенных задач!





Роман Краутер