O site hongkiat.com preparou para você uma boa lista dos melhores plugins em jQuery para fazer a sua galeria de imagem onde podemos encontrar os recursos que você precisa para criar uma galeria ou um slider no seu site.

Supersized

Programa demonstrativo | Baixar
Gigante é um plugin jQuery slidehow fullscreen. Ele suporta imagens com o ciclismo preloading de imagem com efeito de transição.

Galleria

Programa demonstrativo | Baixar
Galleria é uma galeria de imagens escrito em javascript jQuery. Ele carrega as imagens uma a uma, de uma lista não-ordenada e exibe miniaturas quando cada imagem é carregada.

CU3ER Image Slider

Programa demonstrativo | Baixar
um controle deslizante de imagem, inicialmente concebido para criar transições entre slides 3D, acabou por ser uma solução conveniente e multifuncionais que podem ser aplicados em diversas áreas de construção de sites, desde slider conteúdo a característica deslizante e imagem e banner rotator.

jQuery lightbox

Programa demonstrativo | Baixar
plugin jQuery lightbox é simples, elegante, discreto, sem necessidade de marcação extra e é usado para sobrepor imagens na página atual com o poder ea flexibilidade do seletor do jQuery.

Gallerific

Programa demonstrativo | Baixar
Galleriffic é um plugin jQuery que fornece uma rica experiência pós-back livre otimizado para lidar com grandes volumes de fotografias.

Easy Slider

Programa demonstrativo | Baixar
Easy Slider é um plugin jQuery, você pode configurar suas próprias opções e é fácil de implementar.

Slider S3: jQuery Image Gallery

Programa demonstrativo | Baixar
Slider S3 é um plugin jQuery com efeitos agradáveis e com auto-imagem mudando.

Tudo o Slider

Programa demonstrativo | Baixar
AnythingSlider é um plugin jQuery com um monte de recursos (slides pode ser qualquer coisa, abas de navegação são construídos e adicionados dinamicamente …).

Coin Slider

Programa demonstrativo | Baixar
Coin Slider é um slider imagem jQuery com efeitos únicos.

Ciclo

Programa demonstrativo | Baixar
O jQuery Cycle Plugin é um plugin de slideshow que suporta muitos tipos diferentes de efeitos de transição.

Slider Conteúdo em Destaque

Programa demonstrativo | Baixar

Horinaja Plugin

Programa demonstrativo | Baixar
Horinaja está pronto para usar aplicação de slides, você também pode usar a roda do mouse para navegar entre os slides.

Transitions jqFancy

Programa demonstrativo | Baixar
jqFancyTransitions plugin jQuery é fácil de usar para visualizar suas fotos como slideshow com efeitos de transição fantasia.

jQueryGlobe – Plugin jQuery

Programa demonstrativo | Baixar

Looped Slider

Demo | Download

Nivo Slider

Programa demonstrativo | Baixar
Nivo Slider é um plugin jQuery de novo com excelentes recursos: 9 efeitos de transição original, teclado de navegação simples e limpa.

Piecemaker Galeria XML

Programa demonstrativo | Baixar
Piecemaker é uma fonte aberta 3D Flash galeria rotator imagem.

Pretty Photo

Programa demonstrativo | Baixar
prettyPhoto é um clone jQuery lightbox base. Não só as imagens ele suporta, mas também adicionar suporte para vídeos, flash, YouTube, iFrames.

Slide Deck

Programa demonstrativo | Baixar
Slide Deck é um fácil de implementar com um grande projeto.

Thickbox

Programa demonstrativo | Baixar
ThickBox é escrito em JavaScript. Sua função é mostrar uma única imagem, várias imagens, conteúdo inline, iframed conteúdo ou conteúdo servido através de AJAX em um modal híbrida.

Simples Slide

Programa demonstrativo | Baixar
Simples Slide é um plugin jQuery slideshow. É fácil de usar, pequeno e flexível.

Yoxview

Programa demonstrativo | Baixar
YoxView é uma imagem livre e visualizador de vídeos para websites. Ele é escrito em JavaScript usando jQuery e está disponível como um plugin do jQuery.

Abaixo você pode ver uma imagem so efeito, mais para ver melhor por favor visite o DEMO (em ingles).

Agora vamos ver o código.

HTML

<div class='img' id='img-1'>
	<div class='mask'></div>
	<img src='image/01.jpg' />
</div>
<div class='img' id='img-2'>
	<div class='mask'></div>
	<img src='image/07.jpg' />
</div>
<div class='img' id='img-3'>
	<div class='mask' id='mask-1'></div>
	<div class='mask' id='mask-2'></div>
	<img src='image/05.jpg' />
</div>
<div class='img' id='img-4'>
	<div class='mask'></div>
	<img src='image/04.jpg' />
</div>
<div class='img' id='img-5'>
	<div class='mask'></div>
	<mg src='image/06.jpg' />
</div>
<div class='img' id='img-6'>
	<div class='mask'></div>
	<img src='image/08.jpg' />
</div>

CSS

.img{
	float:left;
	-webkit-transition-duration: 0.5s;
	}
.img img{
	padding:10px;
	border:1px solid #fff;
}
.img:hover{
	-webkit-transform:scale(0.8);
	-webkit-box-shadow:0px 0px 30px #ccc;
}
.img .mask{
	width: 100%;
	background-color: rgb(0, 0, 0);
	position: absolute;
	height: 100%;
	opacity:0.6;
	cursor:pointer;
	-webkit-transition-duration: 0.5s;
}
#img-1:hover .mask{
	height:0%;
}
#img-2:hover .mask{
	height:0%;
	margin-top:130px;
}
#img-3 #mask-1 {
	width:50%;
}
#img-3 #mask-2{
	width:50%;
	margin-left:211px;
}
#img-3:hover #mask-1{
	width:0%;
}
#img-3:hover #mask-2{
	margin-left:430px;
	width:0%;
}
#img-4:hover .mask{
	margin-left:219px;
	margin-top:135px;
	height:0%;
	width:0%;
}
#img-5:hover .mask{
	margin-left:219px;
	margin-top:135px;
	height:0%;
	width:0%;
	-webkit-transform: rotateX(360deg);
}
#img-6:hover .mask{
	margin-left:219px;
	margin-top:135px;
	height:0%;
	width:0%;
	-webkit-transform: rotateZ(750deg);
}

Para visualizar o original visite o DEMO (em ingles). Espero que vocês gostem dessas effects, não esqueça de deixar o seu comentário.

Isto além de demonstrar que têm um duro caminho por diante, são conscientes de onde está o negócio e que seu antigo navegador está relentizando a ampliação da Internet. Com estas e outras medidas, cedo poderemos desfrutar de uma Internet mais rica.

Aqui está a magia com apenas 4 linhas (3lines css, html 1line):

code

Se você quiser exibir uma dica de um link, basta adicionar o tooltip “classe” para o link e escrever seu Tooltip texto em uma tag span dentro da marca – que é ele.

Programa demonstrativo

Como editar CSS com o Firebug

Com o Firebug, dá pra editar CSS sem ser clicando nas propriedades.

É possível editá-lo como o HTML.

Vá na aba CSS, escolha o arquivo e clique em editar.

Vivendo e aprendendo.

PS: a WebDeveloper Toolbar faz a mesma coisa, aperte Ctrl+Shift+E.

PPS: Depois de editar, copie o código e cole no arquivo.

via pedromenezes.com

Se pode mudar a extensão “.jpg” por qualquer outra que se este usando.

RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^images/.*\.jpg$ /images/default.jpg [L]

Visto em 10+ Mod_Rewrite Rules You Should Know » »

Digg e os usuários de IE6

Para saber o por que dos usuários ainda utilizarem IE6, o Digg fez uma enquete em seu site, e a maior parte das respostas, cerca de 68% dos usuários de IE6 disse que eles não podem atualizar seu browser. O maior motivo é que ele é utilizado no trabalho e o usuário não possui privilégios o suficiente para atualizá-lo.

Mas a pesquisa também mostra que eles são usuários conscientes que lêem notícias, interagem, geram conteúdo.

Google e Youtube

O Youtube mostra simplesmente que deixará de desenvolver para o Internet Explorer 6 e pronto. Mas o que eles quiseram dizer com esse “deixar”? Será que amanhã os vídeos deixarão de funcionar no IE6? Seria interessante, mas por enquanto eles convidam os usuários a atualizarem seus browsers de forma pacífica.

E como anda a utilização dos browsers no Brasil? Veja abaixo as estatísticas que achei no site StatCounter:

Source: StatCounter Global Stats – Browser Version Market Share

via pinceladasdaweb.com.br

Ver Demo – Baixar – Mas Info CSS Hover Effect

jQuery Tools

Ver demos  jQuery Tools – Baixar - Via xyberneticos.com

Ver Demo – Baixar – Mas Info News ticker with jQuery and ten lines of code