Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jul 2013
    Location
    header(Location: Unknown);
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Image Gallery Application Assistance

    Hello,

    I would like some assistance in designing a custom Image Gallery, but I don't know how to go about implementing it. Most of the tutorials that I have read online simply tell you how to assemble one together; they don't show the design process behind them, and how or why they chose a particular setup of HTML, CSS, etc. over another setup.

    I was hoping someone would be willing to lend their expertise and experience to point me in the right direction.

    I do know what features I would like to build into the application, but simply don't know how to go about implementing it.

    I have drawn a layout to help me and hopefully others along the way get an idea from paper to browser.

    Structural Layout

    Uploaded with ImageShack.com

    This is the HTML I came up with to act as the structure.
    Code:
    <!DOCTYPE HTML>
    <html lang="en">
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <title>Slide</title>
            <link rel="stylesheet" href="css/galleryApp.css" />
        </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>
    So far, the CSS is just to show where the HTML elements are being placed.
    Code:
    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;
    }
    Source Files

  • #2
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,916
    Thanks
    15
    Thanked 227 Times in 227 Posts
    There are lots of image galleries available for use on the web. Some you upload images to, like http://gallery.site.hu/ , others like coppermine you install on your webserver, or even use on your home computer. What is special or custom about your idea of one that makes it important ? And exactly how do you want it to work ?
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,919
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    This forum is not a free coding service, but you will find many excellent slideshow scripts at

    http://www.vicsjavascripts.org.uk/

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #4
    New to the CF scene
    Join Date
    Jul 2013
    Location
    header(Location: Unknown);
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    1. Asking the questions

    This forum is not a free coding service
    I didn't expect it to be. I'd like to do all of the code myself if I can. I guess I'm asking for peer review as I put this thing together.

    What is special or custom about your idea of one that makes it important ?
    I don't think my idea is special, but I would imagine custom meaning built from the ground up.

    I appreciate the link. The side shows seem similar to one another, though that is perhaps because they are only demonstrations. I'm having difficulty understanding in the code how the Javascript is moving the elements around in these examples without using CSS.

    And exactly how do you want it to work?
    Jeff Atwood says that questions are the most important part of the process. So perhaps I should be asking myself more questions.

    So referring back to my image (which in the previous post, the link doesn't go to the hi-res version...):



    Just a basic brainstorm...

    Features:
    • Modern, smoky glass theme (with orange borders).
    • Browse images through a semi-paginated image list (at the bottom of drawing).


    Design Details:
    • Image will slide in an ease-in-out manner when the arrows are clicked. The speed of the slide will depend upon the distance between the two images within the image list at the bottom of the drawing.
    • When the user mouses in or out of the image, the textual content (Image Title and Image Caption) will appear and disappear, respectively.
    • The textual content (Image Title and Image Caption) is placed and centered over the image with a translucent background. They will re-size to fit the image and will be centered over the image.
    • Clicking on the main image opens a full-res version (i.e. direct link to image)
    • Images are downloaded by clicking [END: Source URL].


    While I would also have users upload new images into the gallery system (not depicted), they will not be doing it on this particular page.


    These are the types of things I will be trying to build into the gallery application.

  • #5
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,297
    Thanks
    10
    Thanked 584 Times in 565 Posts
    i would attempt to code it using as little javascript as possible. you can actually implement most of your design (including gallery selection, fading, and button actions) in modern browsers without any js at all.
    here is a proof of concept i cooked up a while back.

    but, a touch of JS can make the CSS a lot simpler and the app backwards-compatible.

    basically, you style the static html to show your first image. Then, change a classname on the .imgSlide box, or alter the location.hash. then re-style with CSS to make image #2 show up only under that class/hash. it looks like you can just add an id to your existing anchor tags to accomplish the hash change option. once you can toggle between the two images using nothing but a class or hash change, we can write a few lines of js to apply the pattern to any number of images and to update the image title text from a title attrib on the thumbnail.
    Last edited by rnd me; 07-10-2013 at 06:35 PM.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •