Image Gallery Application

MrMaverick · July 9, 2013, 3:37am

Hello again,

I would like some assistance in designing a Javascript based image gallery application. I would prefer Javascript over jQuery simply because it would give me more hands-on experience in how it works. That way I can figure out how to go about it next time around.

However, I don’t know which direction to go about first, and don’t have extensive knowledge of how to put together the HTML, CSS, and JavaScript to make something functional.

I do know that I will have to do the following:

[ul][li]Construct the HTML markup that structures the application. ( I can probably do this on my own )[/li]
[li]Style the HTML markup with CSS that Javascript will later hook into and manipulate for the application. ( Probably will need assistance on this )[/li]
[li]Code the scripts necessary to manipulate the HTML elements of the application via CSS and the DOM, BOM, etc. ( Have only dabbled in; will need assistance on )[/li][/ul]

To help myself get started, I’ve made two diagrams to guide myself and hopefully explain to you what I hope to achieve as the finished product.

General Layout:
The headers and footers can be ignored, since I’ve already made them…

Structural Layout:

MrMaverick · July 9, 2013, 11:02pm

Ok, I have created the markup I believe will be necessary below:

<!DOCTYPE HTML>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Slide</title>
        <style>
        /*  See CSS Code Below */
        </style>
    </head>
    <body>
        <div id="content" class="clearfix">
            <div id="imgGalleryGrid">
                <div class="imgSlide">
                    <a href="/res/sr1Hill.jpg">
                        <img src="/res/sr1Hill.jpg" alt="Minecraft Road Image" />
                    </a>
                    <div class="imgTitle">
                        <h4>S.R. 1 Original Alignment</h4>
                    </div>
                    <div class="prevSlideCtrl">
                        <a href="#" class="prev">
                            <img src="/res/prevDark.png" alt="Previous" />
                        </a>
                    </div>
                    <div class="nextSlideCtrl">
                        <a href="#" class="next">
                            <img src="/res/nextDark.png" alt="Next" />
                        </a>
                    </div>
                    <div class="imgCaption">
                        <p>This is the original configuration of S.R. 1 in Bonaparte Land.</p>
                    </div>
                </div>
            </div>
            <div id="imgGalleryList">
                <div class="prevSlideCtrl">
                </div>
                <div class="imgThumb">
                    <a href="/res/sr1Hill.jpg">
                        <img src="/res/sr1Hill_thumb.jpg" alt="thumb" />
                    </a>
                </div>
                <div class="nextSlideCtrl">
                </div>
            </div>
        </div>
    </body>
</html>

The CSS in the tags:

 body {
            color: #fff;
            background-color: #000;
        }
        #content {
            margin: 16px;
            padding: 16px;
            background-color: #333;
        }
        .imgSlide {
            border: 1px dotted #F00;
        }
        .prevSlideCtrl {
            border: 1px dotted #0F0;
        }
        .nextSlideCtrl {
            border: 1px dotted #00F;
        }