Возможности увеличить картинку, изображение с помощью языков 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;
}
Итог:
У нас получился скрипт, по выводу одного изображения, работающий с одной картинкой, прекрасно работающий во всех браузерах. Думаю, что найдутся мысли, как его можно применить в деле!
Спасибо за внимание, надеюсь данный материал поможет Вам в решении определенных задач!