Linha de comando.com - Tecnologia, Informação, Dicas e muito mais. » Galeria de Fotos http://www.linhadecomando.com quem sabe eu possa te ajudar! Thu, 02 Feb 2012 09:42:53 +0000 en hourly 1 http://wordpress.org/?v=3.3 SMOOTH GALLERY: Galeria de Fotos – Exemplos http://www.linhadecomando.com/galeria-de-fotos/smooth-gallery-galeria-de-fotos-exemplos http://www.linhadecomando.com/galeria-de-fotos/smooth-gallery-galeria-de-fotos-exemplos#comments Sun, 21 Jun 2009 22:22:36 +0000 Tiago http://www.linhadecomando.com/?p=360    – Galeria de Fotos sem Miniaturas

   – Galeria de Fotos com Miniaturas

]]> http://www.linhadecomando.com/galeria-de-fotos/smooth-gallery-galeria-de-fotos-exemplos/feed 0 SMOOTH GALLERY: Galeria de Fotos http://www.linhadecomando.com/galeria-de-fotos/smooth-gallery-galeria-de-fotos http://www.linhadecomando.com/galeria-de-fotos/smooth-gallery-galeria-de-fotos#comments Sun, 21 Jun 2009 21:58:28 +0000 Tiago http://www.linhadecomando.com/?p=357 Vamos falar neste post de mais um tipo de galeria de fotos e slideshow, é o SMOOTH GALLERY. Ele utiliza o framework JavaScript MooTools.

1. Primeira coisa a se fazer é baixar os códigos.

- SMOOTH GALLERY – para este post vamos utilizar a versão 1.11 do MooTools.

Clique aqui para acessar a seção de downloads do site oficial.

Na imagem, abaixo, você poderá localizar mais fácil onde baixar o arquivo.

Smooth Gallery

2. Após baixar o arquivo, vamos descompactá-lo em um diretório de sua escolha. Veja na figura os arquivos que estavam compactados.

Conteúdo do Arquivo

3. Crie uma pasta chamada galeria_fotos dentro do seu Servidor Web Apache (windows). Do arquivo descompactado vamos copiar as pastas “css” e “scripts” para dentro da pasta galeria_fotos. Na pasta “scripts” vamos manter, somente, os arquivos jd.gallery.js e mootools.v1.11.js.

Pastas

4. Crie um arquivo de nome index.html e faça a chamada destes scripts dentro das tags <head></head> do seu código HTML.

Inclusão do código dentro da tag <HEAD>

5. Entre as tags <body> </body> acrescente o seguinte código.

Tag <body>

O código acima não exibe as miniaturas, devido o parâmetro showCarousel estar como false. Vale lembrar que para as imagens serem exibidas deve-se criar uma pasta chamada “galeria” e acrescentar as fotos como mostra nas tags <img>.

Explicando melhor os códigos dentro das tags:

  • Tag <h3> – definir o título.
  • Tag <p>  - definir a descrição (legenda) da imagem.
  • Tag <a> – definir o link para que quando clicar na imagem abrir uma nova página – de preferência uma página que condiz com a imagem.
  • Primeira Tag <img> – definir o caminho da imagem no seu tamanho real.
  • Segunda Tag <img> – definir o caminho da miniatura da imagem. Só será válido se dentro do código for habilitado o parâmetro showCarousel. O tamanho padrão das miniaturas são 100px (largura) e 75px (altura).
]]> http://www.linhadecomando.com/galeria-de-fotos/smooth-gallery-galeria-de-fotos/feed 0 CSS: Galeria de Fotos http://www.linhadecomando.com/css/css-galeria-de-fotos http://www.linhadecomando.com/css/css-galeria-de-fotos#comments Fri, 20 Feb 2009 12:41:43 +0000 Tiago http://www.linhadecomando.com/?p=208 Formatando uma galeria de fotos utilizando CSS.

Resultado final:

Arquivo CSS

div.imagem
{
  margin: 2px;
  border: 1px solid #000000;
  height: auto;
  width: auto;
  float: left; /* alinhamento a esquerda */
  text-align: center; /* texto da legenda alinhado no centro */
  font-family: Arial;
  font-size: 12px;
}
/* formatação das imagens */
div.imagem img
{
  display: inline; /* exibição das imagens alinhadas */
  margin: 3px;
  border: 1px solid #ffffff;
}
/* uma borda será exibida quando passar o mouse sobre a imagem */
div.imagem a:hover img {border: 1px solid #000000}
/* formataçao do texto que servirá como legenda para as imagens */
div.legenda
{
  text-align: center;
  font-weight: normal;
  width: 130px; /* define o tamanho da área em que será exibida a legenda -
			se o valor for menor que a quantidade de caracteres, 
			ocorre uma quebra de linha */
  margin: 2px;
}

Arquivo HTML

<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>CSS - Galeria de Fotos</title>
   <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
<!--
******************************************
*** Tamanho das imagens: 130 x 90px.
***
******************************************
-->
<div class="imagem">
   <a href="#" target="_blank">
      <img src="imagem/imagem1.jpg" alt="Imagem 1" width="130" height="90" /></a>
      <div class="legenda">Decrição: Imagem 1</div>
</div>
<div class="imagem">
   <a href="#" target="_blank">
      <img src="imagem/imagem2.jpg" alt="Imagem 2" width="130" height="90" /></a>
      <div class="legenda">Decrição: Imagem 2</div>
</div>
<div class="imagem">
   <a href="#" target="_blank">
      <img src="imagem/imagem3.jpg" alt="Imagem 3" width="130" height="90" /></a>
      <div class="legenda">Decrição: Imagem 3</div>
</div>
</body>
</html>
]]> http://www.linhadecomando.com/css/css-galeria-de-fotos/feed 4 Dhonishow: Recursos Avançados http://www.linhadecomando.com/galeria-de-fotos/dhonishow-recursos-avancados http://www.linhadecomando.com/galeria-de-fotos/dhonishow-recursos-avancados#comments Wed, 28 Jan 2009 18:03:47 +0000 Tiago http://www.linhadecomando.com/?p=155 continuando… eu dividi o post pois estava ficando muito extenso.

Este post será focado nos itens a mais, disponíveis, para configurar o dhonishow.

Recursos Avançados

» Alterando o tamanho do div, da imagem a ser exibida e da barra de navegação:

Para alterar estes parâmetros deve-se editar o arquivo dhonishow.css. Localize as linhas abaixo e mude os valores de witdh (largura) e height (altura).

.dhonishow {
    width: 293px;
}           
.dhonishow-image {
    width: 293px; 
    height: 384px;
}     
.dhonishow-navi {  
    width: 293px;
}

» Tipos de transições:

parâmetros:  effect_appear, effect_blind, effect_slide, effect_horizontal

Exemplo:

<div class=”dhonishow effect_appear“>

» Alterar a duração da transição:

parâmetro: duration_n (n = o valor em segundos) 

Exemplo:

<div class=”dhonishow duration_3“>

» Quantidade de segundos para cada foto aparecer:

parâmetro: autoplay_n (n = o valor em segundos) 

Exemplo:

<div class=”dhonishow autoplay_5“>                               

» Ocultando coisas:

parâmetros: hide_paging, hide_alt (título da imagem), hide_navigation

Exemplo:

<div class=”dhonishow hide_paging“>

Resultado final:

]]> http://www.linhadecomando.com/galeria-de-fotos/dhonishow-recursos-avancados/feed 0 Dhonishow: Criando uma Galeria de Fotos http://www.linhadecomando.com/galeria-de-fotos/criando-uma-galeria-de-fotos-com-dhonishow http://www.linhadecomando.com/galeria-de-fotos/criando-uma-galeria-de-fotos-com-dhonishow#comments Wed, 28 Jan 2009 17:37:01 +0000 Tiago http://www.linhadecomando.com/?p=132 DhoniShow é um javascript criado para você desenvolver galeria de fotos com transição e aplicar em sites.

1. Primeira coisa a se fazer é baixar os códigos javascripts necessários para o funcionamento.

- Dhonishow – versão atualizada: http://lifedraft.de/projekte/dhonishow/

Frameworks necessários:
- Prototype: http://prototypejs.org/
- Script.aculo.us: http://script.aculo.us

2. Após baixar os arquivos, vamos organizar a estrutura de pasta, para ficar mais organizado. Crie uma pasta “site” e as subpastas “js” / “css” / “img”.

site (raiz www)
              |——-js
              |——-css
              |——-img

3. Copie para dentro da pasta “js” os arquivos: dhonishow.js, prototype.js (arquivo foi renomeado), effects.js e scriptaculous.js e para dentro da pasta “css” o arquivo: dhonishow.css.

4. Agora, faça a chamada destes scripts dentro das tags <head></head> do seu código HTML.

Deverá ficar assim:

<head>
<link rel=”stylesheet” href=”css/dhonishow.css” type=”text/css” media=”screen” />
<script src=”js/prototype.js” type=”text/javascript”></script>
<script src=”js/effects.js” type=”text/javascript”></script>
<script src=”js/scriptaculous.js” type=”text/javascript”></script>
<script src=”js/dhonishow.js” type=”text/javascript”></script>
</head>

 

5. Veja como é fácil criar uma galeria de fotos com efeitos surpreendentes. Basta colocar as suas imagens dentro da tag <div>. Esta tag deverá conter uma classe de nome “dhonishow”. 

obs. as imagens devem estar dentro da pasta “img”.

<div class=”dhonishow”>
<img src=”img/img1.jpg” alt=”Imagem 1″ />
<img src=”img/img2.jpg” alt=”Imagem 2″ />
<img src=”img/img3.jpg” alt=”Imagem 3″ />
<img src=”img/img4.jpg” alt=”Imagem 4″ />
</div>

 

6. Para visualizar os botões de navegação, deve-se copiar a pasta “dhoni_img”, que está junto com o pacote de download do dhonishow, para o diretório onde está localizado o seu arquivo index.html.

obs. se você quiser alterar o nome desta pasta ou até mesmo colocá-la em outro lugar, deve-se alterar os dados no arquivo dhonishow.css

.dhonishow-navi .dhonishow-next-picture {
margin-right: 15px;
background: url(../dhoni_img/next.gif) no-repeat;
}
.dhonishow-previous-picture {
background: url(../dhoni_img/previous.gif) no-repeat;
}
.dhonishow-next-picture:hover {
background: url(../dhoni_img/next_hover.gif) no-repeat;
}
.dhonishow-previous-picture:hover {
background: url(../dhoni_img/previous_hover.gif) no-repeat;
}

]]> http://www.linhadecomando.com/galeria-de-fotos/criando-uma-galeria-de-fotos-com-dhonishow/feed 0