Youtube Lightbox Gallery
Postado por: Pedro Rogério em
Nesse novo experimento resolvi criar uma galeria com os vídeos de um usuário qualquer do youtube com o efeito de polaroid criado só com CSS3, que ao você clicar no thumbnail ele abre seu respectivo vídeo em um lightbox. Mas atenção, devido a utilização de propriedades avançadas do CSS essa galeria só vai funcionar corretamente em browsers modernos (WebKit e Firefox).
Como é o funcionamento dessa galeria: Eu leio o feed RSS do usuário no Youtube, transformo o mesmo em um JSON através do plugin jGFeed, após percorro esse JSON através das informações que eu quero, como a URL do vídeo e sua respectiva descrição.
Os thumbnails de cada vídeo são mostrados diretamente do Youtube, e utilizo o plugin jYoutube para fazer isso.
O restante das funções são aquelas que você acaba utilizando no seu dia-a-dia.
Caso você queira testar com seu usuário do Youtube ou qualquer outro, baixe aqui o fonte, abra o arquivo lib.js e procure pela seguinte função:
gallery('googlechrome', 20);
Aqui googlechrome é o nome de usuário e 20 é o número de vídeos que serão mostrados. Altere a seu gosto. Sugestões para melhoras no código são sempre bem vindas.
Sobre Pedro Rogério
Pedro Rogério é desenvolvedor web por paixão, não saberia fazer melhor outra coisa. Além de escrever para o CSS no Lanche também escreve para o Pinceladas da Web, blog com assuntos gerais sobre desenvolvimento web.
Muito bom Pedro!
Estava me “embananando” para criar o JSON do YouTube,
Estava fazendo por PHP – file_get_contents, e lendo o XML,
Muito bom, valeu Pedro!
Excelente post!
De muito utilidade!!!
Valeu Pedro!
Ficou muito foda!
Só faltou css transition no firefox 5…
Valeu
galeria show …. o primeiro video é mto f… mto bom!
parabéns pela galeria!
Legal! Manda isso pro http://www.chromeexperiments.com/
Bom dia,
Posso usar seu codigo e design para modificar e fazer um Portfolio? Ou seja esse código é Open source?
Com os melhores cumprimentos, ROdrigo
Rodrigo,
Fique á vontade, use onde quiser. Depois só coloca o link aqui pra gente ver como ficou. Abraços.
OK, vou começar a estudar o código agora mas não sei quando estará completo.
Olá Pedro, têm muitas coisas que não vemos em sala de aula e são pessoas como você que nos tiram de grandes sufocos. Mas então, estou precisando de uma “alimentação” dessa para o index de um site estático, onde o mesmo receberá atualizações das redes sociais (blog, twitter, flickr, facebook, youtube e tal). Pergunto: você tem alguma publicação de como colocar os “Últimos Posts” do blog (Plataforma WP) no site? Ainda estou vasculhando teu site/blog e divulgando no twitter as matérias que mais me identifico. Valeu
Deixo aqui 2 links que podem lhe ajudar:
http://www.corvidworks.com/articles/wordpress-content-on-other-pages
http://www.wpbeginner.com/wp-tutorials/how-to-display-recent-posts-in-wordpress/
Vlw pela dica. Colocar a cabeça pra funcionar aqui.
Brother muito bom….
Tem varios por ai que faz a mesma coisa, mais o diferencial desse que o torna perfeito é que não prescisa de mysql+php
[...] um post anterior, mostrei aqui como era possível criar um lightbox com vídeos do Youtube. Dessa vez, vou mostrar aqui um exemplo com vídeos do [...]