dez 112012
 

Em um de nossos projetos precisávamos de uma galeria de fotos em formato de mosaico.

Até aí tudo bem, o css resolve bem se, e somente se, os thums forem todos do mesmo tamanho. Porém, o design estilo azulejo não nos agradou nem um pouco, além do que com os thumbs do mesmo tamanho a qualidade da imagem dos thumbs acabou ficando prejudicada, ou pelo corte ou pela distorção…nenhuma agradou.

Chegamos ao segundo ponto, com os thumbs em tamanhos variados o visual ficou muito mais agradável, porém o css não deu conta, sempre a coisa acabava alinhada em algum ponto com muitos espaços vazios.

A solução foi das mais simples:

Jquery e um plugin específico.

Dos que testamos selecionamos dois para compartilhar, são os mais simples, rápidos e com licença free.

Masonry:

Excelente, simples e direto:

masonry

 

 

 

 

Isotope:

O mesmo do anterior, com mais opções, portanto um bocadinho mais complexo:

isotope

 

 

 

 

 

Em breve divulgamos os arquivos da galeria.

 

 

  34 Responses to “Jquery galeria de fotos em mosaicos animados”

  1. I’m curious to find out what blog platform you’re utilizing?
    I’m having some minor security problems with my latest site and I’d like to find
    something more safeguarded. Do you have any recommendations?

  2. Международная компания бк пари матч в сфере игорного бизнеса более 20 лет. Бренду доверяют игроки по всему миру. Каждый день онлайн площадка делает все, чтобы игроку было интересно. Площадка предлагает свою линию для ставок, а также предоставляет весь спектр казино-продуктов. Игрок может сыграть в виртуальное казино, классические и современные аппараты, либо игры собственной разработки.

  3. I’ve learn several good stuff here. Certainly value bookmarking for
    revisiting. I surprise how much attempt you place to make one of these wonderful informative site.

  4. Please let me know if you’re looking for a writer for your
    blog. You have some really good articles and I think
    I would be a good asset. If you ever want to take some of the
    load off, I’d really like to write some articles
    for your blog in exchange for a link back to mine. Please shoot
    me an email if interested. Regards!

  5. An outstanding share! I have just forwarded this onto a co-worker who has been doing a little research on this.
    And he in fact bought me lunch because I stumbled upon it for him…
    lol. So let me reword this…. Thanks for the meal!!
    But yeah, thanx for spending some time to talk about this topic here on your web site.

  6. Hey there would you mind stating which blog platform you’re working
    with? I’m going to start my own blog in the near future
    but I’m having a tough time choosing between BlogEngine/Wordpress/B2evolution and Drupal.
    The reason I ask is because your design and style seems different then most blogs and I’m looking for something completely unique.
    P.S Apologies for getting off-topic but I had to ask!

  7. Every weekend i used to visit this web page, as i wish for enjoyment, as this this web site conations genuinely fastidious funny information too.

  8. This site was… how do I say it? Relevant!! Finally I have found something that helped me.
    Thank you!

  9. Ahaa, its good discussion on the topic of this piece of writing here at this weblog,
    I have read all that, so now me also commenting at this place.

  10. Pretty nice post. I just stumbled upon your blog and wanted to say
    that I’ve truly enjoyed browsing your blog posts.
    After all I will be subscribing to your feed and I hope you write
    again soon!

  11. I don’t even know how I ended up here, but I thought this post was great.
    I do not know who you are but definitely you are going to a famous blogger if you aren’t already 😉 Cheers!

  12. Just wish to say your article is as amazing. The clearness in your post is just nice and i can assume
    you are an expert on this subject. Fine with your permission let
    me to grab your RSS feed to keep up to date with forthcoming post.

    Thanks a million and please continue the rewarding work.

  13. You made some decent points there. I checked on the web for
    additional information about the issue and found most individuals will go along with your views on this
    website.

  14. Hi there, after reading this remarkable post i am also delighted
    to share my know-how here with colleagues.

  15. After looking into a number of the blog articles on your blog,
    I really like your way of writing a blog.
    I book marked it to my bookmark site list and will be checking back in the
    near future. Please check out my web site as well
    and let me know how you feel.

  16. This site was… how do you say it? Relevant!! Finally I have found something that helped me.
    Thanks a lot!

  17. Hello, Neat post. There is a problem with your website in web explorer,
    would check this? IE nonetheless is the marketplace chief and a good
    component to people will leave out your great writing because of this problem.

  18. Amazing blog! Do you have any tips for aspiring writers?
    I’m hoping to start my own website soon but I’m a little lost on everything.
    Would you suggest starting with a free platform like WordPress or go for a paid option? There
    are so many options out there that I’m totally overwhelmed ..
    Any suggestions? Cheers!

  19. We’re a group of volunteers and opening a new scheme in our community.
    Your site offered us with valuable info to
    work on. You’ve done a formidable job and our entire community will be grateful to you.

  20. Right now it sounds like BlogEngine is the preferred blogging platform available right now.
    (from what I’ve read) Is that what you are using on your blog?

  21. obviously like your web site however you
    need to test the spelling on several of your
    posts. A number of them are rife with spelling issues and I find it very bothersome to tell the truth however I’ll
    surely come again again.

  22. Hi there, just became aware of your blog through
    Google, and found that it’s truly informative.
    I am going to watch out for brussels. I will
    be grateful if you continue this in future. Numerous people will be benefited from your
    writing. Cheers!

  23. generic viagra online for sale https://abcrxmed.com/ generic viagra
    cost

  24. canadian pharmacy viagra https://edabcrx.com/ generic viagra names

  25. cheap generic viagra online pharmacy https://fmedrx.com/ paypal viagra australia

  26. Hi there, I enjoy reading through your article.
    I like to write a little comment to support you.
    online pharmacy https://pharmaciescegs.com/ online pharmacy

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(required)

(required)