ImageFlow, galeria em Javascript para criar a sua Coverflow

Início » Galerias, Javascript » ImageFlow, galeria em Javascript para criar a sua Coverflow
47 Comentários - 14/11/2008

imageflow1 ImageFlow, galeria em Javascript para criar a sua Coverflow

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

Tag(s): , , , , , , , , , , , , , , , , , , , , , , ,

Assuntos relacionados:

47 comentários

  1. Olá estou com problemas na hora da instalação desse script, não tenho muita intimidade com scripts q utilizam arquivos para o seu funcionament, gostaria se possivel de uma explicação mais abranjente sobre a instalação desse script, pois sou leigo em javascript e gostaria de tambem poder me agregar a essa tecnologia msm sabendo apenas HTML, obrigado. e parabenizo o site pois eh o unico que aachei com um script similar ao MooFlow e que tambem não consegui instalar! ^^

    Responder ↓

  3. Derek, voce baixou o exemplo ??? se voce usa o exemplo como base tem q funcionar, para q funciona voce tem q chamar os archivos .js, tendo q colocar o link dentro do

    Talvel nao funciona, porque os link estao errados…

    Responder ↓

  4. Estou com um pequeno problema sobre mostrar as imagens no imageflow, mas quando voce dá um click na foto ela abre normal. Oq devo tentar fazer? Alquem pode me ajudar, pois não tenho muita esperiencia com isso. obrigado!

    Responder ↓

  7. Olá Alyen. Coloquei a linha — — no index do meu site, bem no header, coloquei o comando 1.

    2.

    3.
    Loading images
    4.

    5.

    6.

    7.

    8.

    9.

    10.

    11.

    12.

    13.

    14.

    15.

    16.

    17.
    — na página pra brir a abertura, fazendo as modificações nos urls das imagens, mas não funcionou. Alguma idéia?

    Responder ↓

  8. Oi… Não estou conseguindo que fique branca a sombra, consegui puxar todo o exemplo e pegar as dicas também num site internacional, mas nao fica branquinha… Pode me dar uma forcinha. Obrigada

    Responder ↓

  10. oi… eu de novo! só pra explicar melhor ainda, o fundo fica branco, mas a sombra fica escura. Saberia me dizer onde arrumar isto. Aguardo e agradeço muito se puder me ajudar.

    Responder ↓

  13. como faço para definir a foto que fica no centro? pois a “demo” mostra que começa da esquerda para a direita, tem alguma maneira de começar centralizado?

    Responder ↓

  16. Olá, já baixei o imageflow e está funcionando direitinho.

    Porém queria saber se é possivel colocar em cada imagem do imageflow um lightbox.
    SE FOR POSSÍVEL, PODERIA ME AJUDAR COM O SCRIPT?

    Responder ↓

  21. eu baixei o exemplo mas quando executo o arquivo index.html ele num mostra as imagens, testei no firefox e no ie, e eu num mudei nada do download, até tentei o download de uma versão mais recente, oque poderia ser?

    Responder ↓

  23. Kra, faz o seguinte: nas suas imagens vc seta o caminho, e no arquivo javascript. imageflow.js vc muda a linha

    imagePath: ‘img’ , neste caso para o diretório de onde se encontra as imagens.

    vc precisa deixar corretamente o path da imagem e o endereço para que funcione.

    Grande abraço

    Responder ↓

  25. Olá. Super legal essa dica!!

    Visualizo toda a estrutura mas:
    - Imagens não aparecem.
    - Tentei resetá-las e reeditar o caminho direto no código também não funciona.
    - Tentei editá-las no DW no modo split, também não deu, só aparece um fundo preto com o título Image flow.
    - Tentei alterar todos os arquivos de imagens pelos meus e também não deu, conferi os caminhos e destinos, ok.

    Segui os passos acima: 1- inserir script na tag head ok 2 – inserir css ok 3- inserir div html ok

    Feito o download da pasta unica com todos os arquivos, abri direto o index.html no dw, Os caminhos estão certos e as imagens não aparecem. Segui os passos descritos no post: 1- inserir script na tag head ok 2 – inserir css ok 3- inserir div html ok e depois
    reiniciei o index.html e tentei todos os passos que citei.
    Porque não aparecem as imagens?

    Muito obrigado.

    Responder ↓
  28. Pingback: jCoverflip – Customizable jQuery Plugin CoverFlow | AlyenStudio

  29. Ola pessoal, tambem tive muitos problemas em fazer roda essa tecnologia, mas por fim vi que tinha uns arquivos .php, entao coloquei toda pasta dentro do meu servidor local (easyphp) e funcionou perfeitamente.
    Valeuu galera :D boa sorte.

    Responder ↓

  30. Bom… primeiramente gostaria de dizer que para poder visualizar as imagens localmente é preciso ter isntalado um servidor, aconselho o xampp
    Porque ter isntalado um servidor?
    Porque ele usa “engines” em .php e precisa de um server local com suporte php para testar, outro dia eu baixei, descompactei e tentei abrir e nao apareciam as imagens, hoje quando realmente tive que ocupar definitivamente coloquei no htdcs do xampp rodei no browser como localhost/exemplo e funcionou…

    E agora vem a minha questão: Como mudar a sombra do reflexo? Como não conheço muito bem ainda as funções JS dos JQuerys por a pouco tempo ter começado a usar, gostaria de saber onde que eu coloco isso?
    http://finnrudolph.de/ImageFlow/Examples#Reflection_background_color

    Responder ↓

Deixe um Comentário

O seu endereço de email não será publicado Campos obrigatórios são marcados *

*

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Aviso: Todo e qualquer texto publicado na internet através deste sistema não reflete, necessariamente, a opinião deste site ou do(s) seu(s) autor(es). Os comentários publicados através deste sistema são de exclusiva e integral responsabilidade e autoria dos leitores que dele fizerem uso. O autor deste site reserva-se, desde já, o direito de excluir comentários e textos que julgar ofensivos, difamatórios, caluniosos, preconceituosos ou de alguma forma prejudiciais a terceiros. Textos de caráter promocional ou inseridos no sistema sem a devida identificação do seu autor (nome completo e endereço válido de email) também poderão ser excluídos.