Articles

Our Services

Membuat album foto dengan jquery dan css

Didalam penyampian informasi khususnya di bagian menu yang menampilkan gambar seperti gallery atau foto biasanya akan terlihat lebih indah ketika kita memasukan unsur jquery di dalamnya, tutorial kali ini di tujukan kepada pembuatan interface awal untuk koleksi album foto di website anda. Perhatikan gambar di bawah ini yang menampilkan image awal albun yang akan kita buat nanti:

Jadi pada saat kursor mouse di arahkan di salah satu image akan ada efek image foto lain di belakan image yang ada di sampul depan, perlu di ingat kwalitas foto yang akan kita buat juga mempengaruhi kwalitas gambar, jadi perhatikan kwalitas gambar yang akan saudara buatkan album. baiklah berikut ini langkah - langkah dalam pembuatannya

html

<body>

<div id="page_wrap">
  <div id="text"> Google Plus Album Photo</div>
  <div class="photo_stack">
<img id="photo1" src="photos/1.jpg" >
<img  id="photo2" src="photos/2.jpg" >
<img  id="photo3" class="current"  src="photos/3.jpg" > </div>
  <div class="single_photo">
    <ul id="pics">
      <li><a href="#pic1" title="Photo"><img src="photos/3.jpg" alt="picture"></a></li>
    </ul>
  </div>
</div>
</body>

CSS

#page_wrap {
	border: 1px solid #DDDDDD; // Add a grey border around the photos
	width: 700px;
	height:400px;
	margin-left: auto;//center the content
	margin-right: auto;
	margin-top:150px;

}

.image_stack img {// image properties for the photos in the stack
	border: none;
	text-decoration: none;
	position: absolute;
	margin-left:0px;
	width: 158px;
	height: 158px;
}

.image_stack {
	width: 400px;
	position: absolute;
	margin:60px 10px 10px ;
}
.image_stack img {// Image white frame/border
	position: absolute;
	border: 4px solid #FFF;
	box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
	-webkit-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
	z-index: 9999;
	/* Firefox */
	-moz-transition: all 0.2s ease;
	/* WebKit  e.g chrome , safari*/
	-webkit-transition: all 0.2s ease;
	/* Opera */
	-o-transition: all 0.2s ease;
	/* Standard  */
	transition: all 0.2s ease;
}

java script

$(document).ready(function() {//when page is fully loaded
$(".image_stack").delegate('img', 'mouseenter', function() {
//detect if cursor is hovering on an image which has a div with class name 'current
		if ($(this).hasClass('current')) {
		//attach the css class rotate1 , rotate2 and rotate3 to each image in the stack to rotate the images
 to specific degrees
			var $parent = $(this).parent();
$parent.find('img#photo1').addClass('rotate1');
$parent.find('img#photo2').addClass('rotate2');
$parent.find('img#photo3').addClass('rotate3');
$parent.find('img#photo1').css("left","150px");//reposition the last and first photo
$parent.find('img#photo3').css("left","50px");

		}
	})
	.delegate('img', 'mouseleave', function() {//if user removes curser on image
//remote all class previously added to give the photos it's initial position
		$('img#photo1').removeClass('rotate1');
			$('img#photo2').removeClass('rotate2');
			$('img#photo3').removeClass('rotate3');
			$('img#photo1').css("left","");
$('img#photo3').css("left","");

	});;
});




Perlu di perhatikan disini hanya untuk menampilkan beberapa variasi foto album di awal sehingga di butuhkan 
beberapa inovasi bagi anda untuk dapat mengedit image yang terdapat di dalam album tersebut, untuk dapat
 mendownload versi elngkap coding di atas bisa mengdownload disini

Kunjungi www.prowebpro.com untuk menambah wawasan anda.

Share |