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 ImageFlow, o primeiro que faremos será realizar o chamar o script, Copiamos e colamos o seguinte código dentro de nossa etiqueta < head >

<script src="js/imageflow.js" type="text/javascript"><!--mce:0--></script>

agregamos um pouco de estilo

<!--
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;
}
-->

Por ultimo a estrutura de nossa galeria

<div id="imageflow">
<div id="loading">
        <strong>Loading images</strong>
        <img src="loading.gif" alt="loading" width="208" height="13" /></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="scrollbar"></div>
</div>

Fonte: Xyberneticos