In search of a responsive gallery

Question

I'm looking to building a website for my photography, something responsive and clean. After some hours of searching Google, I cam across this website: nathanelson

I thought it is absolutely perfect, but unfortunately I would have to purcahse a hosting package from the hosting provider aPhotofolio, but I already purchased a hosting package from Godaddy.

So my question, does anyone know of any responsive photo gallery I could insert into a normal HTML document?

Zeke

Ian Hazzard · Answer 1 · 2014-10-25T13:32:15.613

A float:left layout is a great responsive layout. Use it something like this:

.flex-c {
    display: block;
    height: 450px;
    width: auto;
}

.flex-i {
    height: 100px;
    width: 100px;
    float:left;
    margin: 0 10px 10px 0;
   -webkit-animation: slide 1s forwards;
 -webkit-animation-delay: 1s;
 animation: slide 1s forwards;
 transform: translateX(-100%);
 width: 100px;
 height: 100px;
}

.wrap {
    display: inline-block;
}

@-webkit-keyframes slide {
  0% {
        background:rgba(0,0,0,0.5)
  transform: translateX(-100%)
 }
 
 100% {
        background:gray;
  transform: translateX(100%)
 }
}
@keyframes slide {
  0% {
        background:rgba(0,0,0,0.5)
  transform: translateX(-100%)
 }
 
 100% {
        background:gray;
  transform: translateX(100%)
 }
}

<div class="wrap">
    <div class="flex-c">
        <div class="flex-i"></div>
        <div class="flex-i"></div>
        <div class="flex-i"></div>
        <div class="flex-i"></div>
        <div class="flex-i"></div>
        <div class="flex-i"></div>
        <div class="flex-i"></div>
        <div class="flex-i"></div>
        <div class="flex-i"></div>
        <div class="flex-i"></div>
        <div class="flex-i"></div>
        <div class="flex-i"></div>
        <div class="flex-i"></div>
        <div class="flex-i"></div>
        <div class="flex-i"></div>
    </div>
</div>

Does this help?

EDIT

The code snippet now has a fade-in effect.

In terms of having the large thumbnails positioned that like, how would I get them to load like the example website above? — Zeke, Oct 24 '14 at 22:11
Yes, I'm actually trying to replicate the design, but with my own information and what not. — Zeke, Oct 24 '14 at 22:26

score -1 · Answer 2 · answered Oct 24 '14 at 22:31

-1

Does it have to be HTML code because if I was doing it I would use something like WordPress and get a portfolio theme, I am sure I have seen a theme which is very similar. This would be an easy way to do it with GoDaddy.

answered Oct 24 '14 at 22:31

Sam Collins

443
5
13

there are quite a few free ones available and it will be alot easier but what you have so far looks good. WordPress should work properly on GoDaddy and you have loads of plugins ect you can use – Sam Collins Oct 24 '14 at 23:45
Thanks, I'm not the greatest coder in the world so that's a compliment :D I'll check out some wordpress themes then, but I was under the impression that it wouldn't work. – Zeke Oct 25 '14 at 01:47

In search of a responsive gallery

2 Answers2

EDIT