Slideshow Mootools

Escrito por Gonçalo Martins

Nos dias que correm recorrer a flash para criar slideshows, ou outros efeitos começa a tornar-se cada vez mais banal. No entanto para websites que tenham já carregado uma Framework Javascript (a maioria) torna-se em muitos casos uma perda de tempo e performance no site utilizar flash para criar por exemplo um slideshow.

Utilizar flash é ainda um erro quando se pretende optimizar por exemplo uma front page, onde se quer que os artigos apareçam automaticamente, fazendo simplesmente umas queries à base de dados. É nestes casos que o javascript/css se tornam um forte aliado. Conseguindo efeitos mais leves de carregar.

Neste exemplo vou apresentar um slideshow que já tinha aqui no disco à algum tempo, o slideshow utiliza o o script criado pelo site creativeponey, script este que só funciona em Mootools 1.11.

Mas, embora ainda muito utilizado, o mootools 1.11 está a morrer e devido a isso talvez seja bom implementar o seguinte exemplo utilizando mootools 1.2.

HTML:

javascript
(...)
<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/compatmootools.js"></script>
<script type="text/javascript" src="js/slider.js"></script>
<script type="text/javascript" >
window.addEvent('load', function () {
slidingtabs = new SlidingTabs('feature_buttons', 'slider_wrap');
            
            $('previous').addEvent('click', slidingtabs.previous.bind(slidingtabs));
 
            $('next').addEvent('click', slidingtabs.next.bind(slidingtabs));
 
        });
 
</script>
    
<link rel="stylesheet" href="style.css" type="text/css" media="screen" /> 
</head>
<body>
<div id="feature_wrap">
<div id="feature_title">weblouca slide</div>
<a title="Previous" id="previous">anterior</a><a title="Next" id="next">proximo</a>
    <div id="slider_wrap">
        <div id="slider">
                            <div><a href="link"  class="feature"><img src='img1.jpg' alt='img1' /></a></div>
                            <div><a href="link"  class="feature"><img src='img2.jpg' alt='img2' /></a></div>
                            <div><a href="link"  class="feature"><img src='img3.jpg' alt='img3' /></a></div>
                            <div><a href="link" class="feature"><img src="img4.jpg" alt="img4"/></a></div>
                            <div><a href="link" class="feature"><img src="img5.jpg" alt="img5"/></a></div>
        </div>
    </div> 
            <ul id="feature_buttons">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            </ul>
</body>

_{Nota:
Neste exemplo utilizo o Mootools 1.2 e faço o load da layer de compatibilidade com o Mootools 1.11:

<script type="text/javascript" src="/js/mootools.js"></script> //Mootools 1.2
<script type="text/javascript" src="/js/compatmootools.js"></script> //layer de compatibilidade!!!

Pode optar por fazer unicamente load do mootools 1.11:

<script type="text/javascript" src="/js/mootools111.js"></script>}

Gostou deste Artigo?

Subscreva o feed RSS ou reguiste-se na Newsletter do WebLouca, agora!

Tags:

Slideshow Mootools, flash, slideshow, mootools, javascript, frameworks

Categoria:

Se preferir, pode ainda deixar um comentário

PATROCINADORES

ARTIGOS RELACIONADOS

Trackback(0)

TrackBack URI for this entry



joel Outubro 22, 2008 http://www.somnacaixa.com	Muito legal esse slide kara


Pedro Outubro 23, 2008	Olá gonçalo muito bacana esse slideshow seu slide foi reproduzido aqui: www.mateussouza.web44.net/?p=327


Rodrigo Novembro 02, 2008	Excelente slideshow... muito bom trabalho!


Filipao Novembro 03, 2008	Manera esse slide ai amigo, continua...


Fabio Novembro 12, 2008	Muito bom este slideshow... obrigado por partilhares


evandro Dezembro 05, 2008	tem como deixar passando automaticamente sem ter que dar click


GoncaloM Dezembro 08, 2008 http://weblouca.com	Olá evandro, terá que fazer download do seguinte ficheiro: http://weblouca.com/testrun/autoslidingtabs.js Realizar o load dele, no seu HTML. Modificar ainda o restante código para: window.addEvent('load', function () { autoslidingtabs = new AutoSlidingTabs('feature_buttons', 'slider_wrap', {autoSlideDelay: 5}); $('previous').addEvent('click', autoslidingtabs.previous.bind(autoslidingtabs)); $('next').addEvent('click', autoslidingtabs.next.bind(autoslidingtabs)); autoslidingtabs.addEvent('change', function(event) { //event.cancel = true; }); }); Explicação: autoSlideDelay - tempo em segundos //event.cancel = true; -retire o // e verifique o que acontece ;)


evandro Dezembro 19, 2008	Muito obrigado! vou aplicar no meu site.


Sergio Julho 21, 2009	Muito interessante, bacana mesmo!!!


Diego Julho 30, 2009 http://NUnes	Olá Gonçalo! Ótimo tutorial, mas, gostaria de saber o passo-a-passo de como inserir o autoslidingtabs.js onde entra as modificações do código no .js e no html. Desde já, muito obrigado!


YMA Setembro 21, 2009	Muito bom parabéns! Só tem um probleminha o código para passar as imagens automáticamente está com algumas icompatibilidades nos navegadores Opera e Netscape e faz com que o script todo não funcione. Ainda não descobri o que é... você saberia dizer? obrigado!


Davi Batista Dezembro 31, 2009 http://www.galerasmix.com	ola, parabens adorei!!! implementei a passagem de imagens automaticamente, funfou perfeitamente para mim no mozilla e no ie ... agora gostaria se saber se tem uma nova versão ou algo que permita incluir textos ... igual aqueles da jovem pan fm ... sabe lah no rodape da imagem tem uma frase, é possivel ? obrigado abraços


Souza Janeiro 11, 2010	Tudo bom? Muito bom este post, porém preciso pegar as imagens do banco tem como postar ulgum exemplo usando esta forma, obrigado.


Vinidog Março 14, 2010 http://www.viniciusdepaula.com	Grande tuto!!! ;-)