Zoom de imagens slideshow baseado em jquery

Olá amigos Mult-focos, neste post vamos aprender como adicionar uma galeria de imagens em seu blog. O Zoom de imagens slideshow baseado em jquery é uma galeria de imagens que realiza sobreposição de uma maneira atraente e fornece um suave fade out às imagens. Esta galeria 3D permite que você flutue por suas fotos facilmente, ampliado-as com uma animação da Apple-like. Para visualizar basta acionar o botão demo abaixo e clicar na primeira foto.

DEMO  

Como adicionar em seu blog. 

I – Vá ao painel do Blogger->clique em modelo->Editar HTML->use Ctrl+F e localize a tag

]]></b:skin>

acima dela copie e cole o código abaixo.

	#myGallery {
	width: 100%;
	height: 400px;
	}
	#myGallery img {
	border: 2px solid #52697E;
	}
	a.loading {
	background: url(https://lh4.googleusercontent.com/-FgewHldZpgk/Usba9fOf2gI/AAAAAAAAC3s/KaBLR1Ng4IE/s32-no/preloader-01.gif) no-repeat center;
	}
	.spacegallery {
	position: relative;
	overflow: hidden;
	}
	.spacegallery img {
	position: absolute;
	left: 50%;
	}
	.spacegallery a {
	position: absolute;
	z-index: 1000;
	display: block;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	}

view raw ZDISFCJ hosted with ❤ by GitHub

II – Agora procure pela tag

</head>

acima dela copie e cole o código abaixo.

	<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
	<script src='https://sites.google.com/site/multfocosjavascript/zoom-de-imagem-slideshow-feito-com-jquery/Zoomimagem.js' type='text/javascript'/>
	<script src='https://sites.google.com/site/multfocosjavascript/zoom-de-imagem-slideshow-feito-com-jquery/Zoomimagemutil.js' type='text/javascript'/>
	<script src='https://sites.google.com/site/multfocosjavascript/zoom-de-imagem-slideshow-feito-com-jquery/Zoomimagemspcegall.js' type='text/javascript'/>
	<script type='text/javascript'>
	//<![CDATA[
	(function($){
	var initLayout = function() {
	var hash = window.location.hash.replace('#', '');
	var currentTab = $('ul.navigationTabs a')
	.bind('click', showTab)
	.filter('a[rel=' + hash + ']');
	if (currentTab.size() == 0) {
	currentTab = $('ul.navigationTabs a:first');
	}
	showTab.apply(currentTab.get(0));
	$('#myGallery').spacegallery({loadingClass: 'loading'});
	};
	var showTab = function(e) {
	var tabIndex = $('ul.navigationTabs a')
	.removeClass('active')
	.index(this);
	$(this)
	.addClass('active')
	.blur();
	$('div.tab')
	.hide()
	.eq(tabIndex)
	.show();
	};
	EYE.register(initLayout, 'init');
	})(jQuery)
	//]]>
	</script>

view raw ZDISFCJ JS hosted with ❤ by GitHub

III – Por último copie o código abaixo em um bloco de notas insira suas imagens e depois é só adicionar um gadget, bem se não sabe aprenda AQUI.

	<div class="spacegallery" id="myGallery">
	<img src="Image URL"/>
	<img src="Image URL"/>
	<img src="Image URL"/>
	<img src="Image URL"/>
	<img src="Image URL"/>
	<img src="Image URL"/>
	</div>

view raw ZDISFCJ GJ hosted with ❤ by GitHub

Isto é tudo.

    Créditos http://www.eyecon.ro/Adaptado por MAIRINK OEMES