Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Marcos Fonseca

Slide nao passa sozinho

Por , em Javascript

Recommended Posts

Marcos Fonseca    0

Marcos Fonseca
Postado 

<html>
<head>
<link href="http://www.shiguenori.com/material/jquery.galleria/galleria.css" rel="stylesheet" type="text/css" media="screen">
<script type="text/javascript" src="http://www.shiguenori.com/jquery/jquery.js"></script>

<script type="text/javascript" src="http://www.shiguenori.com/material/jquery.galleria/jquery.galleria.pack.js"></script>
<script type="text/javascript">

jQuery(function($) {

	$('.gallery_demo_unstyled').addClass('gallery_demo'); // adds new class name to maintain degradability

	$('ul.gallery_demo').galleria({
		history   : true, // activates the history object for bookmarking, back-button etc.
		clickNext : true, // helper for making the image clickable
		insert    : '#main_image', // the containing selector for our main image
		onImage   : function(image,caption,thumb) { // let's add some image effects for demonstration purposes

			// fade in the image & caption
			if(! ($.browser.mozilla && navigator.appVersion.indexOf("Win")!=-1) ) { // FF/Win fades large images terribly slow
				image.css('display','none').fadeIn(1000);
			}
			caption.css('display','none').fadeIn(1000);

			// fetch the thumbnail container
			var _li = thumb.parents('li');

			// fade out inactive thumbnail
			_li.siblings().children('img.selected').fadeTo(500,0.3);

			// fade in active thumbnail
			thumb.fadeTo('fast',1).addClass('selected');

			// add a title for the clickable image
			image.attr('title','Next image >>');
		},
		onThumb : function(thumb) { // thumbnail effects goes here

			// fetch the thumbnail container
			var _li = thumb.parents('li');

			// if thumbnail is active, fade all the way.
			var _fadeTo = _li.is('.active') ? '1' : '0.3';

			// fade in the thumbnail when finnished loading
			thumb.css({display:'none',opacity:_fadeTo}).fadeIn(1500);

			// hover effects
			thumb.hover(
				function() { thumb.fadeTo('fast',1); },
				function() { _li.not('.active').children('img').fadeTo('fast',0.3); } // don't fade out if the parent is active
			)
		}
	});
});

</script>
<style media="screen,projection" type="text/css">

/* BEGIN DEMO STYLE */
*{margin:0;padding:0}
body{padding:20px;background:#fff;text-align:center;background:#fff;color:#bba;font:80%/140% georgia,serif;}
h1,h2{font:bold 80% 'helvetica neue',sans-serif;letter-spacing:3px;text-transform:uppercase;}
a{color:#348;text-decoration:none;outline:none;}
a:hover{color:#67a;}
.caption{color:red; text-align:center; position:absolute; margin-top:-50px;}
.demo{position:relative;margin-top:2em;}
.gallery_demo{width:702px;margin:0 auto;}
.gallery_demo li{width:68px;height:50px;border:3px double #111;margin: 0 2px;background:#000;}
.gallery_demo li div{left:240px}
.gallery_demo li div .caption{font:italic 0.7em/1.4 georgia,serif;}

#main_image{margin:0 auto 60px auto;height:438px;width:700px;background:black;}
#main_image img{margin-bottom:10px;}

.nav{padding-top:15px;clear:both;font:80% 'helvetica neue',sans-serif;letter-spacing:3px;text-transform:uppercase;}

.info{text-align:left;width:700px;margin:30px auto;border-top:1px dotted #221;padding-top:30px;}
.info p{margin-top:1.6em;}

   </style>

</head>
<body>
<div class="demo">
<div id="main_image"></div>

<ul class="gallery_demo_unstyled">


	<li><img src="http://www.shiguenori.com/material/jquery.galleria/img/stones.jpg" alt="Flowing Rock" title="Flowing Rock Caption"></li>
	<li><img src="http://www.shiguenori.com/material/jquery.galleria/img/flowing-rock.jpg" alt="Stones" title="Stones - from Apple images"></li>

</ul>


</div>
</body>
</html>

 

Pessoal para ver a galeria funcionando é só copiar e salvar como html, agradeço desde já.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Ted k'    126

Ted k'
Postado

Veja lá no final da página como um usuário resolveu:

http://blog.shiguenori.com/2009/03/10/jquery-galleria/#comment-2570

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito