Some pointers needed on how to program a photo gallery website

Discussion in 'Web Design and Development' started by simsaladimbamba, Mar 28, 2014.

Most Liked Posts
  1. simsaladimbamba, Mar 28, 2014

    simsaladimbamba Guest

    simsaladimbamba

    Joined:
    Nov 28, 2010
    Location:
    located
    #1
    Hello.

    It has been a long time since I made a website, probably 15 or so years, when all I had to do was using some HTML tags and maybe a script or two.

    Nowadays there are more options and many look quite good as a result when creating a photo gallery website.

    I know about those jQuery gallery templates and probably am able to decipher it once I lay my hands on one, but I have some questions first on how to format such a site.

    I embed two screenshots of what my website might look like, with crude examples of spacing and size and all that shizzle.

    The site shall look like this, when one has selected a gallery to view:
    [​IMG]​
    In the old times, I would have done it via frames, but I guess, that is not needed anymore.
    A top frame for the page name,
    another frame below for the navigation (the yellow bar)
    and another frame below for the content, which would be divided into a left and right frame (see second image) for navigational purposes,
    and then a frame below the content for the rest (contact, about, share (?), ...).
    The second frame from the top would have included an image of the navigation and I would have used an image map to embed the links.

    Is all that still needed? Should I divide the image into several to not use image maps? I do not want to use a regular font and do not want to look the font different on another device.

    As for the second image:
    [​IMG]​
    Once one has selected to view an image larger than in thumbnail view, I guess I can use such jQuery template, but what if I want to still have the thumbnails available somewhere for one to click on? I liked the idea of them being on the left, maybe in a scrollable frame (which adds a bit of interaction, but can be quite turning off to the visitor), but most gallery templates put them on the bottom, which is okay too, and one would not need the two frames in the third frame.

    Sorry for all the frames, as that is how my mind is still set up, but with all the dynamic stuff nowadays, frames seem to be mostly gone, except when rigid.

    Anyway, if anyone would be please so kind to give me some pointers on where to go from here, it would be fabulous.

    Thanks in advance,

    simsaladimbamba
     
    share
    + Quote Reply
  2. 960design, Mar 28, 2014

    960design macrumors 68000

    Joined:
    Apr 17, 2012
    Location:
    Destin, FL
    #2
    Could you post some code examples. The arguably fastest way to get a gallery up is download wordpress and find a theme that matches your need. If you want to do something pure custom, then I certainly wouldn't use frames.

    I'd build the page using CSS and HTML5. I'd sketch a quick skeleton and build from that. There are so many ways to accomplish what you are asking I'm not sure of what the 'specific' best to do it would be. I do know that using frames is one of the worst way.
     
    share
    + Quote Reply
  3. simsaladimbamba, Mar 28, 2014

    simsaladimbamba thread starter Guest

    simsaladimbamba

    Joined:
    Nov 28, 2010
    Location:
    located
    #3
    Thanks for the reply.

    I am so out of touch with coding a website, since I haven't done that in more than a decade, I cannot show you code examples.

    What I want to accomplish is a simple gallery, which probably can be solved with any of the jQuery gallery templates out there and seamless graphic links.

    In the two screenshots I provided, I would like the part called "PHOTOS" and the part called "Sets" be links to "one or two level(s) up" pages, which I would have done with image maps that decade ago.
    Nowadays it is probably easier I suppose, with maybe creating one graphic for each page and dividing that graphic up and put them beside each other, earlier done with tables, nowadays probably done with DIV? Can that be seamless?

    I have a domain with Strato, would Wordpress work with that?
     
    share
    + Quote Reply
  4. simsaladimbamba, Mar 28, 2014

    simsaladimbamba thread starter Guest

    simsaladimbamba

    Joined:
    Nov 28, 2010
    Location:
    located
    #4
    Of course it works with that, why don't you research it before asking stupid questions, blabbering idiot?
     
    share
    + Quote Reply
  5. olup, Mar 28, 2014

    olup macrumors 6502

    Joined:
    Oct 11, 2011
    #5
    What you could do with HTML5 and CSS is the following:

    you have a container that wraps up the entire thing, both the thumbnails and the actual gallery image. The thumbnails consist of a list with links to the actual image from the thumbnail, so that they remain accessible without javascript. You float that thumbnail list to the left and give it whatever width you like and apply some right margin, so it's not bumping right next to the actual gallery image container.

    Code:
    <style>
#content-container {
background:green;
margin:0 auto;
width:960px;
}
.thumbnails {
background:gold;
float:left;
margin-right:50px;
width:300px;
}
#image-container {
background:dodgerblue;
float:right;
width:600px;
}
.clearfix:before,.clearfix:after {
display:table;
content:'' ";
}
.clearfix:after {
clear:both;

}
</style>
<section id="content-container" class="clearfix">
<ul class="thumbnails">
<li><a href="image1.jpg"><img src="thumbnail1.jpg"></a></li>
<li><a href="image2.jpg"><img src="thumbnail2.jpg"></a></li>
<li><a href="image3.jpg"><img src="thumbnail3.jpg"></a></li>
</ul>
<section id="image-container"></section>
</section>
    This is just a very rough idea on how you could proceed.
    The image-container remains empty, since you add those images via javascript/jquery.
     
    share
    + Quote Reply
(You must log in or sign up to post here.)

Share This Page