Uma galeria impressionante

"  ... familiarizado com o Jquery, mas eu acho que MooTool também tem alguns plugins bons, e seus efeitos são muito impressionar. Smooth JonDesign's Gallery (JdGallery) é um deles. Não é apenas um bom controle deslizante e carrossel para o site, mas também uma galeria completa. "



"  Neste post, quero introduzir este plugin MooTool para todos vocês. Com este plugin, você pode configurar uma galeria completa sem o uso de Flash, como antes".

Veja-o screenshot:






"  E vê-lo em ação no demonstração ao vivo 
Imagens são organizados em categorias, o nome das categorias são exibidas no canto superior direito da galeria. Quando você clica no nome de uma categoria, ele vai para baixo e mostrar-lhe as imagens em conter. Você pode navegar e escolher a imagem que você deseja mostrar. Ou você não pode fazer nada e deixar as imagens de slides auto ..."


"  Agora, vou mostrar como podemos aplicar este script para o nosso site ou blogger a fazer uma galeria:..."


1, Download este script aqui  

 
2, descompacte e você verá 3 pastas e alguns arquivos HTML para demonstração. Nome do 3 pastas são: CSS, imagens e scripts.  

Upload todos os arquivos na pasta de scripts e jd.gallery.css arquivo na pasta do CSS para um host. O melhor é o código do Google


3, você pode inserir o código abaixo direto para o Blogger arquivo de modelo, mas é mais fácil se você inserir um widget em JavaScript e HTML /. Eu ouvi pessoas denúncia é difícil de encontrar e editar no Blogger template (formato XML), por isso será fácil se você só trabalha com um widget.
Assim, adicionando uma HTML / JavaScript e cole este código em primeiro widget de conteúdo:
 

<link rel="stylesheet" href="url..../jd.gallery.css" type="text/css" media="screen" charset="utf-8" />
<script src="url.../mootools-1.2.1-core-yc.js" type="text/javascript"> </ script>
<script src="url..../mootools-1.2-more.js" type="text/javascript"> </ script>
<script src="url..../jd.gallery.js" type="text/javascript"> </ script>
<script src="url..../jd.gallery.set.js" type="text/javascript"> </ script>
<script src="url..../jd.gallery.transitions.js" type="text/javascript"> </ script>


Ok, os arquivos são básicos javascript para plugins JdGallery. Outros arquivos serão adicionados para a função especial, por exemplo: zoom da imagem, ou Forward / Back navegação ...



4, Adição de imagens para a galeria como a estrutura abaixo

<div id="myGallerySet">
<div id="gallery1" class="galleryElement">
<h2>Categoria 1</ h2>
<div class="imageElement">
<h3> Item 1 Title </ h3>
<p> Descrição do Item 1 </ p>
title="Open <a href="#" Image" class="open"> </ a>
<img src = "link para a imagem de 1"Class =" full "/>
<img src = " link para a imagem em miniatura 1"Class =" thumbnail "" />
</ div>
<div class="imageElement">
<h3> Item 2 Title </ h3>
<p> Descrição do Item 2 </ p>
title="Open <a href="#" Image" class="open"> </ a>
<img src = " link para a imagem 2"Class =" full "/>
<img src = " link para a imagem 2 em miniatura"Class =" thumbnail "" />
</ div>
</ div>
<div id="gallery1" class="galleryElement">
<h2> Categoria 1 </ h2>
<div class="imageElement">
<h3> Item 1 Title </ h3>
<p> Descrição do Item 1 </ p>
title="Open <a href="#" Image" class="open"> </ a>
<img src = "link para a imagem de 1"Class =" full "/>
<img src = " link para a imagem em miniatura 1"Class =" thumbnail "" />
</ div>
<div class="imageElement">
<h3> Item 2 Title </ h3>
<p> Descrição do Item 2 </ p>
title="Open <a href="#" Image" class="open"> </ a>
<img src = " link para a imagem 2"Class =" full "/>
<img src = " link para a imagem 2 em miniatura"Class =" thumbnail "" />
</ div>
</ div>
......................... 

</ div>

No código acima, cada imagem é coberta pelo código:

 
<div class="imageElement">
<h3>Título</ h3>
<p>Item Descrição</ p>
title="Open <a href="#" Image" class="open"> </ a>
<img src = "link para a imagem"Class =" full "/>
<img src = " link para a imagem em miniatura"Class =" thumbnail "" />
</ div>

 
link para a imagem e link para a imagem em miniatura pode ser o mesmo se você não quiser redimensionar a imagem em miniatura.
A imagem acima são os elementos abrangidos na categoria como estrutura:
 
<div id="gallery" class="galleryElement">
<h2>Nome da Categoria</ h2>
<div class="imageElement">
     ......................
</ div>
<div class="imageElement">
      ...................
</ div>

</ div>

 
E as categorias são cobertos em um elemento com id = myGalleryset como abaixo:

<div id="myGallerySet">
<div id="gallery1" class="galleryElement">
   
.....................
</ div>
<div id="gallery2" class="galleryElement">
   ................
</ div>
......................... 

</ div>


Muito simples e fácil. Você pode adicionar mais um elemento para as imagens e as categorias que desejar, como a estrutura eu mostrei acima.


6, para fazê-lo funcionar, precisamos adicionar este código no final do widget de conteúdo:

<script type="text/javascript">
startGallery function () (
myGallerySet var = gallerySet novo ($ ( 'myGallerySet'), (
cronometrado: true
});
}
window.addEvent ( 'startGallery domready');
</ script> 

 
Salvar widget e ver o resultado.
 

"  Este post é muito simples. Eu apenas quero apresentar a vocês um plugin MooTool eo básico para configurar uma galeria. Este plugin tem muitas opções e eu não posso escrever tudo aqui porque ele vai ser tão longa. Se você quiser saber mais, você pode ver na este site"
"  I hope you like it  !"

 fonte e créditos:

Smooth JonDesign Galeria de Fotos - Uma galeria impressionante em MooTool

Quarta-feira, 10 março, 2010 / / 2 comretweetentários / / nhamngahanh / / Categoria: Ajax , blogger //

Tradução do inglês para o portuguêsMostrar romanização

Smooth JonDesign Galeria de Fotos - Uma galeria impressionante em MooTool

Posted: 10 Mar 2010 09:25 AM PST
Estou familiarizado com o Jquery, mas eu acho que MooTool também tem alguns plugins bons, e seus efeitos são muito impressionar. Smooth JonDesign's Gallery (JdGallery) é um deles. Não é apenas um bom controle deslizante e carrossel para o site, mas também uma galeria completa. Neste post, quero introduzir este plugin MooTool para todos vocês. Com este plugin, você pode configurar uma galeria completa sem o uso de Flash, como antes. Veja-o screenshot:





E vê-lo em ação na demonstração ao vivo Imagens são organizados em categorias, o nome das categorias são exibidas no canto superior direito da galeria. Quando você clica no nome de uma categoria, ele vai para baixo e mostrar-lhe as imagens em conter. Você pode navegar e escolher a imagem que você deseja mostrar. Ou você não pode fazer nada e deixar as imagens de slides auto ... Agora, vou mostrar como podemos aplicar este script para o nosso site ou blogger a fazer uma galeria:
1, o download deste script aqui 2, descompacte e você verá 3 pastas e alguns arquivos HTML para demonstração. Nome do 3 pastas são: CSS, imagens e scripts. Upload todos os arquivos na pasta de scripts e jd.gallery.css arquivo na pasta do CSS para um host. O melhor é o código do Google 3, você pode inserir o código abaixo direto para o Blogger arquivo de modelo, mas é mais fácil se você inserir um widget em JavaScript e HTML /. Eu ouvi pessoas denúncia é difícil de encontrar e editar no Blogger template (formato XML), por isso será fácil se você só trabalha com um widget.
Assim, adicionando uma HTML / JavaScript e cole este código em primeiro widget de conteúdo:
<link rel="stylesheet" href="url..../jd.gallery.css" type="text/css" media="screen" charset="utf-8" />
        <script src="url.../mootools-1.2.1-core-yc.js" type="text/javascript"> </ script>
        <script src="url..../mootools-1.2-more.js" type="text/javascript"> </ script>
        <script src="url..../jd.gallery.js" type="text/javascript"> </ script> <script src="url..../jd.gallery.set.js" type="text/javascript"> </ script>
<script src="url..../jd.gallery.transitions.js" type="text/javascript"> </ script>


Ok, os arquivos são básicos javascript para plugins JdGallery. Outros arquivos serão adicionados para a função especial, por exemplo: zoom da imagem, ou Forward / Back navegação ... 4, Adição de imagens para a galeria como a estrutura abaixo

<div id="myGallerySet">
  <div id="gallery1" class="galleryElement">
    <h2> Categoria 1 </ h2>
    <div class="imageElement">
      <h3> Item 1 Title </ h3>
      <p> Descrição do Item 1 </ p>
      title="Open <a href="#" Image" class="open"> </ a>
      <img src="LINK a imagem 1" class="full" />
      <img src="LINK a 1 imagem em thumbnail" class="thumbnail" />
    </ div>
    <div class="imageElement">
      <h3> Item 2 Title </ h3>
      <p> Descrição do Item 2 </ p>
      title="Open <a href="#" Image" class="open"> </ a>
      <img src="LINK a imagem 2" class="full" />
      <img src="LINK a imagem 2 em thumbnail" class="thumbnail" />
    </ div>
  </ div>
  <div id="gallery1" class="galleryElement">
    <h2> Categoria 1 </ h2>
    <div class="imageElement">
      <h3> Item 1 Title </ h3>
      <p> Descrição do Item 1 </ p>
      title="Open <a href="#" Image" class="open"> </ a>
      <img src="LINK a imagem 1" class="full" />
      <img src="LINK a 1 imagem em thumbnail" class="thumbnail" />
    </ div>
    <div class="imageElement">
      <h3> Item 2 Title </ h3>
      <p> Descrição do Item 2 </ p>
      title="Open <a href="#" Image" class="open"> </ a>
      <img src="LINK a imagem 2" class="full" />
      <img src="LINK a imagem 2 em thumbnail" class="thumbnail" />
    </ div>
  </ div> .........................
</ div>
No código acima, cada imagem é coberta pelo código:
<div class="imageElement">
      <h3> Título </ h3>
      <p> Item Descrição </ p>
      title="Open <a href="#" Image" class="open"> </ a>
      <img src="LINK para Image" class="full" />
      <img src="LINK a imagem em thumbnail" class="thumbnail" />
    </ div>
link para a imagem e link para a imagem em miniatura pode ser o mesmo se você não quiser redimensionar a imagem em miniatura.
A imagem acima são os elementos abrangidos na categoria como estrutura: <div id="gallery" class="galleryElement">
    Categoria <h2> nome </ h2>
    <div class="imageElement">
     ......................
    </ div>
    <div class="imageElement">
      ...................
    </ div>

  </ div> E as categorias são cobertos em um elemento com id = myGalleryset como abaixo:
<div id="myGallerySet">
  <div id="gallery1" class="galleryElement">
    .....................
  </ div>
  <div id="gallery2" class="galleryElement">
   ................
   </ div> .........................
</ div> Muito simples e fácil. Você pode adicionar mais um elemento para as imagens e as categorias que desejar, como a estrutura eu mostrei acima. 6, para fazê-lo funcionar, precisamos adicionar este código no final do widget de conteúdo:

<script type="text/javascript"> startGallery function () ( myGallerySet var = gallerySet novo ($ ( 'myGallerySet'), ( cronometrado: true )); ) window.addEvent ( 'startGallery domready'); </ script>
Salvar widget e ver o resultado.
Este post é muito simples. Eu apenas quero apresentar a vocês um plugin MooTool eo básico para configurar uma galeria. Este plugin tem muitas opções e eu não posso escrever tudo aqui porque ele vai ser tão longa. Se você quiser saber mais, você pode ver neste site
I hope you like it!

http://dicasdeaaamorrr.blogspot.com