Efekt zoomowania zdjęcia w jQuery

Napiszemy skrypt do zoomowania zdjęcia w jQuery. Wykorzystamy właściwość css background-size. Będziemy ją modyfikować po kliknięciu na przycisk zoom in. Najpierw wstawmy kod html (2 przyciski i obrazek).

<div class="picture"></div> 
<button class="zoom">Zoom In</button>
<button class="zoomout">Zoom Out</button>

.picture {
	margin: 30px;
	width: 300px;
	height: 180px;
	background-image: url('flowers.jpg');
	background-repeat:no-repeat;
	background-position: 50% 50%;
	background-size: 300px 180px;
	
	-webkit-transition: all 2.5s ease-in-out;
	-moz-transition: all 2.5s ease-in-out;
	-ms-transition: all 2.5s ease-in-out;
	-o-transition: all 2.5s ease-in-out;
	transition: all 2.5s ease-in-out
}
.picture.zoom {
	background-size: 1200px 720px !important; 
}

var picture = $('.picture:eq(0)'), picture_bg_size = picture.css('background-size');

$('.zoom:eq(0)').on('click', function() { 
	if (!picture.hasClass('zoom'))
	{
		picture.addClass('zoom');
	} 
});

$('.zoomout:eq(0)').on('click', function() {
	picture.removeClass('zoom');
	picture.css('background-size', picture_bg_size);
});