Yazar Ol Yazar Girişi
Yazar Girişi
E-Posta Adresi
Şifre
Şifremi Unuttum
Asp.Net .Net MVC PHP & MySQL C# PhotoShop CSS jQuery AlgoritmA MsSQL Server HTML Ruby
- Kategoriler -
Türkçe
English
German
Tüm Kategoriler
Jquery ve Css ile Resim Galerisi Oluşturma

Merhaba arkadaşlar,

Jquery ve Css ile aşağıdaki gibi resim galerisi yapmayı anlatacağım.

Jquery kodumuz;


	
	$(document).ready(function () {
		
		
		$('div.kucukresim-item').mouseenter(function(e) {

			
			x = e.pageX - $(this).offset().left;
			y = e.pageY - $(this).offset().top;

			
			$(this).css('z-index','15')
			.children("div.tips")
			.css({'top': y + 10,'left': x + 20,'display':'block'});
			
		}).mousemove(function(e) {
			
					
			x = e.pageX - $(this).offset().left;
			y = e.pageY - $(this).offset().top;
			
			
			$(this).children("div.tips").css({'top': y + 10,'left': x + 20});
			
		}).mouseleave(function() {
			
			
			$(this).css('z-index','1')
			.children("div.tips")
			.animate({"opacity": "hide"}, "fast");
		});

	});

css kodumuz.

.kucukresim-item {
	position: relative;
	float: left;
	margin: 5px;
}

.kucukresim-item:hover {
	background-color: #CCC
}

.kucukresim-item a { 
	display: block; 
}

.kucukresim-item img.kucukresim {
	border:3px solid #ccc;	
}
		
.tips {
	display: none;
	position: absolute;
	padding: 5px 0 0 5px;
}

	.tips span.cerceve {
	position: absolute;
	top: 0px;
	left: 0px;
	display: block;
	width: 610px;
	height: 410px;
	background-image: url(images/cerceve.png);
	background-repeat: no-repeat;
	}
	#resimleralan {
	height: 300px;
	width: 420px;
	margin-top: 50px;
	margin-right: auto;
	margin-left: auto;
}

html kodumuz;

<div id="resimleralan">	
			
	<div class="kucukresim-item">
		<a href="#"><img src="images/k1.jpg" class="kucukresim"/></a>
		<div class="tips">
			<img src="images/b1.jpg" alt="" width="600" height="400" />
			<span class="cerceve"></span>
		</div> 
	</div> 
					
	<div class="kucukresim-item">
		<a href="#"><img src="images/k2.jpg" class="kucukresim"/></a>
		<div class="tips">
			<img src="images/b2.jpg" alt="" width="600" height="400" />
			<span class="cerceve"></span>
		</div> 
</div> 
	
	<div class="kucukresim-item">
		<a href="#"><img src="images/k3.jpg" class="kucukresim"/></a>
		<div class="tips">
			<img src="images/b3.jpg" alt="" width="600" height="400" />
		  <span class="cerceve"></span>
		</div> 
	</div> 		
    
    
    
    	<div class="kucukresim-item">
		<a href="#"><img src="images/k2.jpg" class="kucukresim"/></a>
		<div class="tips">
			<img src="images/b2.jpg" alt="" width="600" height="400" />
			<span class="cerceve"></span>
		</div> 
	</div> 
					
	<div class="kucukresim-item">
		<a href="#"><img src="images/k3.jpg" class="kucukresim"/></a>
		<div class="tips">
			<img src="images/b3.jpg" alt="" width="600" height="400" />
			<span class="cerceve"></span>
		</div> 
</div> 
	
	<div class="kucukresim-item">
		<a href="#"><img src="images/k2.jpg" class="kucukresim"/></a>
		<div class="tips">
			<img src="images/b2.jpg" alt="" width="600" height="400" />
		  <span class="cerceve"></span>
		</div> 
	</div> 	
    
    
    
    	<div class="kucukresim-item">
		<a href="#"><img src="images/k1.jpg" class="kucukresim"/></a>
		<div class="tips">
			<img src="images/b1.jpg" alt="" width="600" height="400" />
			<span class="cerceve"></span>
		</div> 
	</div> 
					
	<div class="kucukresim-item">
		<a href="#"><img src="images/k2.jpg" class="kucukresim"/></a>
		<div class="tips">
			<img src="images/b2.jpg" alt="" width="600" height="400" />
			<span class="cerceve"></span>
		</div> 
</div> 
	
  <div class="kucukresim-item">
	  <a href="#"><img src="images/k3.jpg" class="kucukresim"/></a>
	  <div class="tips">
			<img src="images/b3.jpg" alt="" width="600" height="400" />
		  <span class="cerceve"></span>
		</div> 
	</div> 	
    

Jquery ve Css İle Hazırlanan Resim Galerisini İndirmek İçin Tıklayınız.

Sosyal Hesabında Paylaş

3551 görüntüleme

Yorumlar
Adınız Soyadınız
Mail Adresiniz
Doğrulama Kodu

Bildiklerimiz.Net Bildiklerimizi paylaşıyoruz, bilmediklerimizi öğreniyoruz. biz bunları yapıyoruz ya siz...

© 2021 Bildiklerimiz Tüm hakları saklıdır.
bir Bildiklerimiz.Net projesidir.