ImageFlow, galeria em Javascript para criar a sua Coverflow

Publicado por Alyen

imageflow

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

Temas
47 Comments
  • Derek
    Posted at 20:03h, 14 dezembro

    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! ^^

  • Derek
    Posted at 20:04h, 14 dezembro

    usei o procedimento de colar o javascript na frente da tag certo mas os outros códigos, não sei onde coloca-los.. se puderem me ajudar obrigado

  • Alyen
    Posted at 10:19h, 15 dezembro

    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…

  • Gabriel
    Posted at 12:51h, 07 janeiro

    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!

  • Luiz
    Posted at 00:01h, 08 janeiro

    Desculpem a ignorância, mas este script somente funcinona em servidores com suporte a PHP?
    Agradeço antecipadamente a resposta.

  • Alyen
    Posted at 18:51h, 12 janeiro

    Gabriel olha os link das img talvez nao esta bem os link…

    ——————————————-

    Luiz isso é HTML entao funciona en qualquer host

  • Garcia Jr.
    Posted at 18:35h, 21 janeiro

    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?

  • paula
    Posted at 21:45h, 03 fevereiro

    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

    • Alyen
      Posted at 09:35h, 04 fevereiro

      Paula voce tento mudar no css ?

      • paula
        Posted at 20:33h, 09 fevereiro

        Pois é, tentei sim, não querendo te atrapalhar, voce teria o css em branco para me enviar? Aguardo, muito obrigada e parabéns pelo eu trabalho… lindissimo!!!!!!

  • paula
    Posted at 21:49h, 03 fevereiro

    Só pra esclarecer melhor… Foi neste site aqui ohhh…. http://finnrudolph.de/ImageFlow/Examples#Transparent_reflections

  • paula
    Posted at 14:07h, 10 fevereiro

    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.

    • Alyen
      Posted at 16:45h, 10 fevereiro

      Qual sombra voce fala ?

      • paula
        Posted at 19:53h, 16 fevereiro

        Não é sombra, é o reflexo que fica cinza e escuro. Poderia me dar um toque quando responder? Muito obrigada.

  • Alyen
    Posted at 11:53h, 01 abril

    hum isso era so voce mudar no css…

  • Alexandre Broggio
    Posted at 04:38h, 13 abril

    Bem legal pra exibir o portfolio ^_^

  • Alexson
    Posted at 05:50h, 02 maio

    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?

  • Alan Redecopa
    Posted at 17:22h, 06 junho

    Galera, muito boa essa galeria, estão de parabéns!!

    Abraços…

  • killer
    Posted at 16:05h, 09 junho

    Essa fonte desse site da pra enxergar nada!!!
    fundo preto com fonte cinza escura é osso…

    • Alyen
      Posted at 19:17h, 09 junho

      você é o primeiro que reclama… pode deixar que quando eu mude o theme coloco a fonte de otra cor.

      • kika
        Posted at 21:48h, 01 fevereiro

        Alyen.. vc poderia me ajudar com aquele esuqema de usar o lightbox junto com o imageflow…eu tentei e não consigo ele diz que o lightbox não esta definido

  • ELVIRA
    Posted at 03:03h, 18 agosto

    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?

  • Elvira
    Posted at 00:02h, 09 setembro

    Olá, estou tentando entrar em contato mas não estou tendo retorno…..????

  • Murillo
    Posted at 14:35h, 15 setembro

    Cara só funciona com php?

  • Luiz
    Posted at 17:53h, 08 fevereiro

    Estou tentando colocar links nas imagens e não estou conseguindo. Alguem poderia me ajudar?

  • Rafael
    Posted at 01:33h, 16 abril

    Tem como mudar o reflexo para um fundo branco?

    Obrigado

  • eduardo daroche
    Posted at 08:39h, 14 setembro

    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?

  • Geraldo Mendes
    Posted at 01:18h, 22 setembro

    Também estou com o problema acima, relatado pelo eduardo!

  • Alexandre Mattos
    Posted at 14:32h, 16 novembro

    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

  • Franklin
    Posted at 18:28h, 18 novembro

    Pow alguem poderia me ajudar?
    nao consigo fazer aparecer as imagens da galeria =/

  • View
    Posted at 02:41h, 09 março

    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.

  • View
    Posted at 03:44h, 09 março

    Tô há uma cara tentando fazer aparecer as imagens, não vejo lógica para não aparecerem. Seria top poder utilizar o script.

  • Alyen
    Posted at 10:29h, 11 março

    Pessoal pq você não copiao o codigo do exemplo ?

    https://www.alyenstudio.com/demos/imageflow/

    é so dar control+u para ver o codigo no FF e depois copiar o codigo e pegar no DW por exemplo.

  • jCoverflip – Customizable jQuery Plugin CoverFlow | AlyenStudio
    Posted at 11:13h, 11 março

    […] s1.parentNode.insertBefore(s, s1); })(); TweetShareEmailjCoverflip é um plugin jQuery para criar facilmente interfaces coverflow-like que pode exibir imagens ou qualquer outro conteúdo. O conteúdo pode ser […]

  • Raione Alves
    Posted at 02:01h, 04 abril

    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 😀 boa sorte.

  • leo2505
    Posted at 15:45h, 28 julho

    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

  • Ricardo Fernandes
    Posted at 19:04h, 19 março

    Olá !
    como faço para reduzir as imagens e o tamanho da DIV ?
    Obrigado !

Post A Comment