visualizador de fotos

[Tiago.fra 0]

Preciso de um tutorial urgente de como fazer um visualizador de fotos igual a deste site, mais sem usar nenhum tipo de banco de dados.

 

http://www.christiesgreatestates.com/properties/view_73141/

 

Pois encontrei muito exemplo em Jquery inclusive, porém apenas de slides, ou seja fotos passando sozinhas, preciso igualzinho a deste site.

 

Os feras que entendem e puderem ajudar, eu agradeço muito!

 

Abraço!

[angelorubin 142]

Bom dia,

 

Da para fazer destas duas formas a seguir:

 

Com XHTML/CSS - Slide XHTML/CSS

 

Com JavaScript(jQuery) - Slide jQuery

 

Espero que ajude.

[Evandro Oliveira 331]

Não entendi a parte do banco de dados.

 

Quanto a alteração das imagens, é super simples e javascript puro:

 

<img id="grande" src="fotos/identificador/grandes/primeira.jpg" alt="foto indisponível" title="legenda">
<ul id="lista">
   <li><img src="fotos/identificador/pequenas/primeira.jpg" alt="miniatura de foto" title="legenda"></li>
   <li><img src="fotos/identificador/pequenas/segunda.jpg" alt="miniatura de foto" title="legenda"></li>
   <li><img src="fotos/identificador/pequenas/terceira.jpg" alt="miniatura de foto" title="legenda"></li>
   <li><img src="fotos/identificador/pequenas/quarta.jpg" alt="miniatura de foto" title="legenda"></li>
</ul>

 

function slideTo(pic){
    pic.onclick = function(){
        var bigPic = document.getElementById('grande');
        bigPic.src = pic.src.replace('pequenas', 'grandes');
        bigPic.title = pic.title;
    }
}

window.onload = function(){
    var imgs = document.getElementById('lista').getElementsByTagName('img');
    for(var i = 0, ln = imgs.length; i < ln; i++) slideTo(imgs.item(i));
}