A power full alternative to load pictures and descriptions about the photo is a Popeye, a jQuery plug-in. Popeye work inline floating across the content. The XHTML code is simple and W3 valid.

To load this plug-in you may before load too jQuery after include too Popeye Javascript file, and to run it use the code bellow into HEAD tag:

$(document).ready(function () {
	$('.popeye').popeye();
});

Take a look in DEMO page and in Download page, two links bellow:

Demo page
Download page

A ideia do resize na verdade é meio que criar uma mascara, uma area de visualização da imagem, assim ao passar o mouse sobre a imagem mostraria a tag <img> por completo, assim como segue o conceito abaixo:

O Codigo para a inserção da imagem já com o efeito de resize é bem simples e não joge muito do que temos hoje em webStandard:

<a href=”#”><img src=”image.jpg”  alt=”my image” /></a>

Veja o exemplo rodando ok na Demo page.

O estágio default em css para as imagens pequenas, thumbnails, é algo em torno do código abaixo, podendo, é claro, ser alterado de acordo com a necessidade do projeto:

ul#thumbs a{
    display:block;
    float:left;
    width:100px;
    height:100px;
    line-height:100px;
    overflow:hidden;
    position:relative;
    z-index:1;       
}
ul#thumbs a img{
    float:left;
    position:absolute;
    top:-20px;
    left:-50px;   
}

Usando posicionamento absoluto podemos então criar o nosso ‘fake crop’ na imagem, cada imagem deve ter um estilo proprio para o crop e mudando o posicionamento em top e left de acordo com a necessidade.

ul#thumbs a img{
    float:left;
    position:absolute;
    top:-20px;
    left:-50px;   
}
ul#thumbs li#image1 a img{
    top:-28px;
    left:-55px;   
}   
ul#thumbs li#image2 a img{
    top:-18px;
    left:-48px;   
}   
ul#thumbs li#image3 a img{
    top:-21px;
    left:-30px;   
}

e Finalmente para ativar o resize colocamos o codigo hover que vai fazer a imagem aparece toda:

ul#thumbs a:hover{
    overflow:visible;
    z-index:1000;
    border:none;       
}

Bom proveito a todos e qualquer dúvida não deixem de ler o post original que segue o link abaixo:

Link: Resize holover image with CSS

Como em um passe de mágica, ou um pouco menos lento que isso, espalharam-se pela internet os danados, e facilitadores, CSS Grids ou melhores nomeados de CSS Frameworks. No inicio desse processo todo eu comecei testando o 960Grid System e o Blue Print, muito bons mesmo, cada um nas suas especialidades. Hoje rodando pelos blogs da vida para animar a começar criar, o que foi dificil, encontrei um post muito interessante sobre os diversos tipos de CSS Frameworks encontrados pela rede.

No site Hidden Pixels .com encontrei uma lista bem completa para com os mais conhecidos frameworks de CSS da net, vale a pena baixar alguns testar e usar essa facilidade para montar layouts em XHTML.

Link: CSS Frameworks

Sempre, sempre jQuery, declaradamente meu framework preferido. Nomeado de Kwicks o sample foi todo desenvolvido em jQuery, mais um plugin muito r0x e muito simples mesmo de utilizar, um salve para Jeremy Martin.

Usando de um menu simples feito em lista (ul):

<ul class="kwicks" > 
     <li id="kwick1"></li> 
     <li id="kwick2"></li> 
     <li id="kwick3"></li> 
     <li id="kwick4"></li> 
</ul>

O estilo voce faz como preferir respeitando as config abaixo:

.kwicks li{ 
     float: left; 
     width: 125px; 
     height: 100px; 
     margin-right: 5px; 
}

e por fim so ativar o plugin na classe ‘Kwicks’ colocada na tag ‘ul’:

$().ready(function() {
    $(’.kwicks’).kwicks({
        max : 205,
        spacing : 5
    });
});

Para funcionar perfeitamente, claro, deve importar o js do jQuery e outro do Kwicks:

Kwicks uncompressed
Kwicks packed

Espero que gostem, bem simples mas com um resultado muito expressivo, como diz o próprio slogan do jQuery: "escreva menos e faça mais".  Cya.

Link: Kwicks for jQuery

Quem trabalha com web hoje em dia, com Coding principalmente, encontra em diversos sites fontes muito interessantes de jQuery. Esse danado, que amo (lol), não serve somente para dar uma vida, animadinha, no site, ele vai muito além.

Com jQuery você pode validar forms em realTime usando efeitos de fade ou slide nas suas mensagens, pode fazer seus campos de texto ou tags como H1 serem editáveis com projetos em Ajax e muito mais, fora as animações é claro.

No site “Web Dev Lounge” encontrei um tuto muito legal para iniciantes nessa biblioteca de JavaScript, fácil dimais de utilizar e muito bom para expandir. Link abaixo.

Link: jQuery for Dummies on Web Dev Lounge

Quem não tem problemas e mais problemas ao desevolver um projeto web para o IE 6? Qualquer um já passou por isso e é um sufoco, assumo. Uma versao simples de um PNG fix para o Internet Explorer 6 é o “Unit PNG Fix”, somente dois 2kb de javascript e bem eficiente. Suporta autosize nas imagens, diferente de outras versoes de fix para esse problema. Abaixo link do site e download.

Link: Unit PNG Fix Site

Parece hilário falarmos de cross browse hoje em dia com tantas diferenças que conseguimos encontrar na interpretação do codigo XHTML e CSS. Dia após dia me deparo com outros ‘problemas’, identifico soluções - mas que são sempre paleativas. Encontrei hoje de manhã uma referência em um dos meus feeds para o site do Anthony Short e diretamente em um post com nome muito interessante e chamativo: How to get Cross Browser Compatibility Every Time. O engraçado que dessa vez não é somente um monte de ‘achismos’, existe uma lógica muito boa no texto, vale a pena conferir e ver se você anda fazendo tudo certinho ou erradinho por ai eheh.

Link original: How to get Cross Browser Compatibility Every Time

Cada dia que passa fico mais impressionado com os poderes do jQuery. Hoje pesquisando mais sobre o infeliz encontrei algo muito interessante, um menu dropdown com multiplas opções, colunas e sub opções. Complicado de imaginar isso sem ver funcionando. O addict do jQuery tem 47k, incluindo a biblioteca base e ainda é XHTML válido.

Acesse o link do post original no labs do Gíva para fazer download do Dropdown. Link e print abaixo:

Link: http://www.givainc.com/labs/mcdropdown_jquery_plugin.htm

Olá novamente. Hoje a tarde me deparei com um grande amigo atualizando seu blog, que prefiro não dizer qual era ou o nome do programa, e fiquei indignado com a burocracia - se é que se pode chamar assim - para adicionar ou editar um post. Fiquei por alguns minutos convencendo o infeliz do amigo a trocar para o WordPress até que deu certo.

No site do Lynda.com tem uma série de video aulas sobre a nova versão do WordPress (2.5.1) para iniciantes e mesmo para os mais familiarizados com a versão anterior. Alguns videos, os mais básicos, são free. Link segue abaixo para interessados. Luv XHTML, Luv WordPress.

Link: Lynda WordPress Training

Até mesmo para a criação web, que parece ser uma coisa muito “eu-pc-cliente”, existe as tão buscadas BOAS MANEIRAS. O uso abusivo de DIVs e IDs, Classes e mais classes por XHTML Coders inexperientes faz o pablinho aqui ficar com gosto de sangue na boca de tanta raiva ehehe. O XHTML é o standard do stardand da web, deve ser um codigo inteligente, reutilizavel e uniforme, sendo esse último o mais importante.

Para tanto, Alen Grakalic escreveu um artigo já faz um bom tempo falando sobre a utilização adequada do heading, pois não existe certo ou errado na web, existe funcional ou não. Essas tags são basicamente utilizadas para se por titulos e hieraquizar – espero que essa palavra exista – os textos na sua página.

Como exemplo podemos fazer uma ordenação da seguinte forma:

H1 – TITULO DO SITE
H2 – TITULO DO POST
H3 – SUB-TITULO DO POST
H4 – RESUMO BREVE DO POST

Atéééééééé o H6, o último existente de acordo com a W3C. O artigo do Alen Grakalic no CSSGLOBE.com ficou muito legal, pequeno mas esclarecedor. Segue o link do post original abaixo.

Link: How to use heading in HTML