ImageFlow, galeria em Javascript para criar a sua Coverflow

• Publicado dia 14 de novembro de 2008 | Cateogoria: Galerias, Javascript | Autor: Alyen
• | 5.380 leituras.
• | 37 comentários

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

• Tag(s): ao, aspecto, chamar, demo, div, etiqueta, galeria, garante, ImageFlow, imagens, indo, Javascript, loading images, lt, MooFlow, nossa, script, uma