Ver Demos -  Baixar o Script – Uso e Info Jquery Fade In.Fade Out

Fonte visual-blast

Se você esta cansado de usar sempre os mesmos efeitos de lightbox no conteúdo de seus artigos ou em certas seções em particular, jQuery Popeye será uma alternativa peculiar. O jQuery Popeye foi inspirada nos tradicionais lightbox, basicamente não pretende obter os mesmos resultados. Tem características muito particulares, e é realmente muito atraente. jQuery Popeye poderá ser útil para montar galerias de imagens em seção realmente reduzidas, ampliar conteúdo de nossos post adicionando muitas imagens sem danar o desenho de nosso blog ou site, adicionar quantidade de imagens mediante Caixas de lightbox e não de forma individual, permite adicionar uma pequena descrição a cada imagem na parte inferior de nossa caixa utilizando o atributo ALT e variar um pouco o efeito, já que em vez de lightbox se assemelham mas aos pop-up.

Demo – jQuery.popeye demo (987) – Articulo Original jQuery.popeye – an inline lightbox alternative

Para que funcione corretamente precisaremos baixar as seguintes librerias. jquery.popeye-0.2.1.js (incluida no pack original), ademais deveremos descarregar jquery.easing.1.3.js junto com jquery-1.2.6.js (Incluidas na minha demo). Uma vez com os arquivos deveremos realizar o links correspondente desde nosso arquivo.

Copiando e colando o seguinte código dentro de nossa etiqueta:

<script type="text/javascript" src="lib/jquery-1.2.6.js"></script>
<script type="text/javascript" src="lib/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="lib/jquery.popeye-0.2.1.js"></script>

<script type="text/javascript">
<!--//<![CDATA[

$(document).ready(function () {
var options1 = {
easing:     'easeInOutCirc'
}
var options2 = {
direction:  'right',
duration:   230
}

$('#popeye1').popeye(options1);
$('#popeye2').popeye(options2);
});

//]]>-->
</script>

Tambien deveremos adicionar os links das folhas de estilo.

<link rel="stylesheet" type="text/css" href="css/jquery.popeye.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/styling.css" media="screen" />

Por ultimo: Começamos a montar nossas Caixas com as imagenes

<h2>Demo 1 - Popeye (Float:Left)</h2>
<!-- [EXEMPLO DEMO 1 ] begin -->
<div id="popeye1" class="popeye popeye-hasjs next">
<ul>
<li><a href="images/1large.jpg"><img src="images/1small.jpg" alt="Descripcion: Demo de Popeye jQuery, testado por www.alyenstudio.com. Adicionar descrição utilizando o atributo (ALT)" /></a></li>
<li><a href="images/2large.jpg"><img src="images/2small.jpg" alt="Descripcion: Demo de Popeye jQuery, testado por www.alyenstudio.com. Adicionar descrição utilizando o atributo (ALT)" /></a></li>
<li><a href="images/3large.jpg"><img src="images/3small.jpg" alt="Descripcion: Demo de Popeye jQuery, testado por www.alyenstudio.com. Adicionar descrição utilizando o atributo (ALT)" /></a></li>
</ul>
</div>
<!-- [FIN EXEMPLO DEMO 1] end -->
<div style="clear:both;">
<h2>Demo 2 - Popeye (Float:Right)</h2>
<!-- [EXEMPLO DEMO 2 ] begin -->
<div id="popeye2" class="popeye">
<ul>
<li><a href="images/1large.jpg"><img src="images/1small.jpg" alt="Descripcion: Demo de Popeye jQuery, testado por www.alyenstudio.com. Adicionar descrição utilizando o atributo (ALT)" /></a></li>
<li><a href="images/2large.jpg"><img src="images/2small.jpg" alt="Descripcion: Demo de Popeye jQuery, testado por www.alyenstudio.com. Adicionar descrição utilizando o atributo (ALT)" /></a>
</li><li><a href="images/3large.jpg"><img src="images/3small.jpg" alt="Demo de Popeye jQuery, testado por www.alyenstudio.com. Adicionar descrição utilizando o atributo (ALT)" /></a></li>
</ul>
</div>
</div>		 <!-- [FIM EXEMPLO DEMO 2] end -->

Qualquer dúvida é so deixar um comentário.

Ava7 Patterns, outro pratico lugar onde encontrar quantidade de Patterns (Padrões) para seus projetos web. Quantidade de estilos, desenhos, cores. Ava7 Patterns nos oferecerá 600 desenhos ordenados em 150 páginas, onde cada página individual conta com 4 Patterns que poderemos testear de forma online antes de que baixar para o nosso computador. Seguramente encontraremos desenhos para os nossos projetos, e não temam, todas as downloads são totalmente gratuitos.

Link Ava7 Patterns

Fonte webappers

ImageFlow é uma bonita galeria feita em Javascript e a qual por seu aspecto sem dúvida ficaria bem em qualquer projeto online. ImageFlow é muito similar em vários aspectos com MooFlow ainda que conta com algumas diferenças. ImageFlow nos permite navegar entre as imagens utilizando o scroll de nosso mouse ou bem utilizando um sistema de navegação integrado à galeria e o qual moveremos esta vez, de forma manual com nosso mouse. Isto permite ao usuário deslocar entre cada uma das imagens, indo de um lado a outro. Também fizeram muitas melhoras com respeito ao div da galeria, o que garante que o deslocamento produzido por nosso mouse, só se produza ao estar sobre o div que contém à mesma. Sua utilização é sumamente fácil e os efeitos que fazem à galeria são muito agradáveis.

Ver demo – Download demo.

Instalacion:

Baixamos o script ImageFlowe, o primeiro que faremos será realizar o chamar o script, Copiamos e colamos o seguinte código dentro de nossa etiqueta < head >

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

agregamos um pouco de estilo

<style type="text/css">
img {
    position:absolute;
    top:0px;
    border:none;
}
h1 {
    text-align:center;
}
a{
    color:#fff;
}
.none{
    visibility:hidden;
}
.none div{
    display:none;
}
.clear{
    clear:both;
}
#images{
    visibility:hidden;
}
#loading{
    margin-top:50px;
    text-align:center;
    width:100%;
}
#loading img{
    margin-top:10px;
    position:relative;
}
#captions{
    position:relative;
    text-align:center;
    z-index:10000;
}
#scrollbar{
    visibility:hidden;
    position:relative;
    border-bottom:1px solid #b3b3b3;
    z-index:10001;
}
#scrollbar_slider{
    position:absolute;
    margin-top:-7px;
    margin-left:-7px;
    z-index:10002;
    background-image:url(slider.png);
    background-repeat:no-repeat;
    width:14px;
    height:14px;
}
#imageflow{
background-color:#000;
    margin-left:350px;
    text-align:left;
        color: #fff;
}
</style>

Por ultimo a estrutura de nossa galeria

<div id="imageflow">
    <div id="loading">
        <b>Loading images</b><br />
        <img src="loading.gif" width="208" height="13" alt="loading" />
    </div>
    <div id="images">
        <img src="img/img001.png" alt="Image 1" />
        <img src="img/img002.png" alt="Image 2" />
        <img src="img/img003.png" alt="Image 3" />
        <img src="img/img002.png" alt="Image 4" />
        <img src="img/img003.png" alt="Image 5" />
        <img src="img/img001.png" alt="Image 6" />
        <img src="img/img002.png" alt="Image 7" />
        <img src="img/img003.png" alt="Image 8" />
        <img src="img/img002.png" alt="Image 9" />
        <img src="img/img001.png" alt="Image 10" />
    </div>
    <div id="captions"></div>
    <div id="scrollbar">
        <div id="slider"></div>
    </div>
</div>

<div class="clear"></div>

Fonte: Xyberneticos