Quantcast
Channel: Forum Pasja Informatyki - Najnowsze pytania bez odpowiedzi
Viewing all articles
Browse latest Browse all 21996

FadeIn i FadeOut w galerii

$
0
0

Witam napisałem dziś galerie ze zdjęciami i zastanawiam się jak dodać Efekt FadeIn i Fade Out dla całego obiektu przy włączaniu i wyłączaniu jak i przy zmianie zdjęć

var zdjencie = 0;

function wlacz(nrzdj)
{
	zdjencie = nrzdj;
	if (zdjencie>5) zdjencie=1;
	else if (zdjencie<1) zdjencie=5;
	
	document.getElementById("galeria").innerHTML = '<div id="gallery"><span onclick="wylacz()">X</span><div id="MainGallery"></div><div id="pointers"><i class="icon-angle-left" onclick="wlacz(zdjencie-1)"></i><i class="icon-angle-right" onclick="wlacz(zdjencie+1)"></i></div></div>';
	
	var plik = '<img src="Graphics/Wallpapers/Wallpaper' + zdjencie + '.png" />';
	document.getElementById("MainGallery").innerHTML = plik;
	$("#MainGallery").fadeIn(500);
}

function wylacz()
{
	document.getElementById("galeria").innerHTML = '';
}
#gallery{
			width: 100%;
			height: 100%;
			background-image: url("../Graphics/Gallery.png");
			z-index: 75;
			position: fixed;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			opacity: 1;
		}
		
			#gallery span{
				font-size: 50px;
				margin-left: 98%;
				transition-duration: 1s;
			}
			
				#gallery span:hover{
					cursor: pointer;
					color: #00B0FF;
					transition-duration: 2s;
				}
		
			#MainGallery {
				background-color: #FFF;
				width: 1000px;
				padding: 20px;
				padding-bottom: 50px;
				border: 3px solid black;
				margin: auto;
				border-radius: 5px;
			}
			
				#MainGallery img{
					height: 563px;
					width: 1000px;
					opacity: 1;
				}
				
			#pointers{
				z-index: 100; 
				color: #000000;
				position: fixed;
				font-size: 50px;
				width: 1000px;
				left: 50%;
				top: 40%;
				transform: translate(-50%, -50%);
			}	
			
				#pointers i:first-child{
					margin-right: 86%;
				}
				
				#pointers i{
					padding-bottom: 250px;
					padding-top: 250px;
					opacity: 0.2;
					transition-duration: 0.5s;
				}
				
					#pointers i:hover{
						cursor: pointer;
						color: #00B0FF;
						opacity: 1;
						transition-duration:1s;
					}

 


Viewing all articles
Browse latest Browse all 21996

Latest Images

Trending Articles