Album de fotos com javascript – simples aplicação de esconde mostra

Boas!!

apenas para deixar registrado mesmo..

Album de fotos, baseado em um escode/mostra, com a propriedade display.

Fiz em javascript puro, em poucos minutos. Foi mais dificil achar as imagens, e mais trabalhoso redimensionar elas, do que fazer o código js.. hehe

Enfim, online:

Demonstração

script usado:

<script type="text/javascript"> type="text/javascript">
function id( el ){
  return document.getElementById( el );
}
function hide_all(){
  var els = id('content').getElementsByTagName('ul');
  
  for( var i=0; i<els.length; i++ )
  {    
    els[i].style.display = 'none';
  }
}
/* http://www.javascriptkit.com/jsref/event.shtml */
function disablelink( e ){
  var evt = window.event || e
  if (evt.preventDefault) //supports preventDefault?
    evt.preventDefault()
  else //IE browser
    return false
}
function palco( src ){
  id('palco').innerHTML = '<img src="'+src+'" alt="" />';
}
window.onload = function(){
  hide_all();
  var as = id('lista').getElementsByTagName('a');
  for( var i=0; i<as.length; i++ )
  {
    as[i].onclick = function( e ){
      hide_all();
      var id_el = this.href.split('#')
           
      id( id_el[1] ).style.display = 'block';    
      return disablelink( e );
    }
  }
  var as = id('content').getElementsByTagName('a');
  for( var i=0; i<as.length; i++ )
  {
    as[i].onclick = function( e ){
      palco( this.href )  
      return disablelink( e );
    }
  }
}
</script>