jquery slider

miranda121 · September 16, 2011 at 10:23 AM

Boa tarde, estou a fazer um website muito simples onde o meu cliente pediu uma galeria parecida com esta "http://philipandrews.org/" eu como nao sou especialista em javascript pedia se me podessem enviar daqueles tuturiais com algo parecido...

Obrigado

Helder Miranda

bruno1234 · September 16, 2011 at 06:46 PM

Podes pesquisar na net por galerias de imagens em jQuery.

Encontras imensos exemplos.

cra2sh · September 16, 2011 at 07:03 PM

É isto que queres, só tens que adaptar.

http://tympanus.net/codrops/2010/07/29/thumbnails-navigation-gallery/

taviroquai · September 16, 2011 at 07:17 PM

Eu acho que com 10 linhas de CSS + 10 de HTML + 10 de Javascript (sem contar com a framework) consegue-se fazer uma coisa dessas... assim só de cabeça... mas posso estar enganado 😉

miranda121 · September 16, 2011 at 09:25 PM

Obrigado pela ajuda... o exemplo dado pelo cra2sh ajudou muito, so tive que adaptar ao que necessitava... Obrigado a todos os outros.

Mais uma coisa, sabem como posso fazer aquelas animações de abertura de site? eu ainda nao pesquisei muito sobre jquery admito tempo que perder mais tempo investigando esta area

yoda · September 16, 2011 at 10:30 PM

Mais uma coisa, sabem como posso fazer aquelas animações de abertura de site? eu ainda nao pesquisei muito sobre jquery admito tempo que perder mais tempo investigando esta area

É só fazer uso dos cookies (caso necessário), uma div posicionada em cima de tudo e um pouco de javascript.

cra2sh · September 17, 2011 at 07:55 PM

Obrigado pela ajuda... o exemplo dado pelo cra2sh ajudou muito, so tive que adaptar ao que necessitava... Obrigado a todos os outros.

Mais uma coisa, sabem como posso fazer aquelas animações de abertura de site? eu ainda nao pesquisei muito sobre jquery admito tempo que perder mais tempo investigando esta area

Aqui tens apenas o código com o efeito de abertura

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<title>Demo</title>

<style>
html
{
overflow-y:hidden;
}

#main img#preview
{
position:absolute;
left:0px;
top:0px;
width:100%;
}

#overlay
{
width:100%;
height:100%;
position:fixed;
top:0px;
left:0px;
opacity:0.3;
}

#loading
{
position:fixed;
top:10px;
right:10px;
}
</style>
</head>
<body>
<div id="main">
	<img src="http://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/4.jpg" alt="" id="preview" style="display:none;"/>
	<div id="overlay"></div>
    	<div id="loading"><h1>Loading...</h1></div>
</div>
</body>
<script type="text/javascript">
$(function()
{
var $loader = $('#loading');
var $currImage 	= $('#main').children('img:first');

$('<img>').load(function()
{
	$loader.fadeOut(1000);
	$currImage.fadeIn(3000);
}).attr('src', $currImage.attr('src'));
});
</script>
</html>

miranda121 · September 17, 2011 at 11:06 PM

Muito obrigado por esse LOAD ficou espectacular. onde voces encontram essas coisas? foste tu mesmo que fizeste? excelente trabalho em ajudar os outros entao...

ja agora que me esta dar uma branca, isso por acaso sabia fazer. era ao passar o mouse em cima da div ela deslizava para baixo aumentando a altura dela....

cra2sh · September 17, 2011 at 11:25 PM

Muito obrigado por esse LOAD ficou espectacular. onde voces encontram essas coisas? foste tu mesmo que fizeste? excelente trabalho em ajudar os outros entao...

ja agora que me esta dar uma branca, isso por acaso sabia fazer. era ao passar o mouse em cima da div ela deslizava para baixo aumentando a altura dela....

Esse por acaso já estava feito a partir do site que te indiquei o exemplo, apenas filtrei todo o código que não necessitas.

"era ao passar o mouse em cima da div ela deslizava para baixo aumentando a altura dela...." não percebi, só se te estiveres a referir ao seguinte código.

html
{
        overflow-y:hidden;
}

miranda121 · September 18, 2011 at 12:03 AM

Eu antes fazia o seguinte. tinha uma div no top, com largura 100% e altura 25px por exemplo ao passar o mouse por cima tinha algo em javascript que aumentava a div para altura de 100px por exemplo mas nao me lembro com fazia :S bloquiei mesmo

PROBLEMA JA RESOLVIDO, ja me lembrei... obrigado por toda a ajuda na mesma

Sign In

jquery slider

Recommended Posts

miranda121

bruno1234

cra2sh

taviroquai

miranda121

yoda

cra2sh

miranda121

cra2sh

miranda121

Create an account or sign in to comment

Create an account

Sign in

Home

Activity

Revista PROGRAMAR

Important Information