• Photo Gallery Update [1] (Learning Javascript)

    Attachment 524To see my previous blog about this, click here.
    The Photo Gallery Project
    So before, I left off saying I was learning Javascript and PhP... well, I haven't actually touched PhP, but as for Javascript, I think I've got the most of it.
    For those of you who don't know (basically everyone), I started working as an intern last week. However, I have not been assigned anything yet.
    I made it through orientation, which took about 2 1/2 days to complete, but since then, I've been working on this project at work.

    But don't worry, they know I have nothing to do but teach myself stuff, so they let me work on it when they aren't introducing me to some person half way across the complex.

    So enough of the chitter chatter.
    Here's a preview of the how the site may look. No flashy stuff yet, but I'm still getting there (and learning!)

    Attachment 523








    Some key things are:
    • The website will dynamically resize based on the image size.
    • The site won't allow an image bigger than what would look visually appealing.
    • And the site works well in all resolutions.

    To actually get some of these things to line up was hell. But for those of you looking into CSS (Cascading Style Sheets), here's a tip!If you float something, be sure to specify a height and width, or have a container around it with a specified height and width. w3schools.com doesn't specifically say that you need this when it talks about floating elements, so beware!
    Lets look at some code! Basically, I've divided the site up into several containers.We have:
    Code:
      
     
           PAGE
            
    MAIN
    MIDDLE
    The page controls centering the whole thing, along with a dark background.
    The main controls general properties, like default background color, text color, etc.
    The rest are pretty self explanatory:
    -The header is the top of the page.
    -The footer is the bottom of the page.
    -The middle is everything else.

    Within the middle we have:
    Code:
      
    
    PHOTOBAR FRAME
    PHOTOBAR
    ...
    PHOTO
    The Navbar is what you see right under "Top". It controls which group of Photo's you'd like to view.
    The Photobar Frame is the group of thumbnails on the left of the site.
    The Photobar itself actually contains the thumbnails and buttons and contains different styling than the frame.
    The Photo is the actual large photo.

    And that's basically the site!
    Seems simple... but this was the easy part!
    Cascading Style Sheets and Javascript were beasts to get right!

    So, right now my javascript is kinda crudely thrown together, for practice and just to see if it works.
    As you can see above, the navbaritems have three methods: onmouseover, onmouseout, and onclick.
    Here are the methods they point to. Note: I'm including the CSS classes they use at the bottom of the code block.
    Code:
     
    function barItemNormal(id)
    {
    var element = document.getElementById(id);
    if (element.className != "navbaritemselected")
    {
    element.style.fontWeight = "normal";
    element.style.borderTop = "none";
    element.style.backgroundColor = "#0D2233";
    }
    }
     
    function barItemHover(id)
    {
    var element = document.getElementById(id);
    if (element.className != "navbaritemselected")
    {
    element.style.fontWeight = "bold";
    element.style.borderTop = "3px solid #606F7B";
    element.style.backgroundColor = "#404F5B";
    }
    }
     
    function barItemSelected(id)
    {
    barItemDeselectAll(id);
    var element = document.getElementById(id);
    element.className = "navbaritemselected";
    }
     
    ---CSS----
    /*********************NAVBARITEM********************
    //Navigation bar item-
    //Fixed width.
    //Change input's text color.
    //Change input's bg color.
    //Fake transparent borders.
    //Floating left.*/
    .navbaritem
    {
    width: 128;
    color: #FFF;
    background-color: #0D2233;
    border-top: none;
    border-left: 1px solid #171717;
    border-right: 1px solid #171717;
    border-bottom: medium solid #171717;
    float:left;
    }
     
    .navbaritem p
    {
    text-align: center;
    }
     
    /*****************NAVBARITEMSELECTED****************
    //Selected Navigation bar item-
    //Same as reg item except:
    //New Background Color.
    //New Top Border.*/
    .navbaritemselected
    {
    width: 128;
    color: #FFF;
    background-color: #404F5B;
    border-top: medium solid #606F7B;
    border-left: 1px solid #171717;
    border-right: 1px solid #171717;
    border-bottom: medium solid #171717;
    float:left;
    }
     
    .navbaritemselected p
    {
    text-align: center;
    font-weight: bold;
    }
    Basically, when the mouse enters the button's area, it changes it's background color, and gives it a top border.
    This gives the appearance that the button is "popping" out at you.
    When it leaves, it returns the button to normal.
    However, if the user clicks the button, it permanently applies the style to the button, so it always looks like it's popped out.

    The next part is a doozy- Dynamically resizing images:
    Code:
     
    function setFrameProperties()
    {
    var theMiddle = document.getElementById("middle");
    var thePhotoBarFrame = document.getElementById("photobarframe");
    var thePhotoFrame = document.getElementById("photo_frame");
    var thePhoto = document.getElementById("photo_pic");
     
    if (thePhoto.width > MAX_PIC_WIDTH)
    {
    var proportion = MAX_PIC_WIDTH / thePhoto.width;
    var newPhotoHeight = thePhoto.height * proportion;
    var newPhotoWidth = thePhoto.width * proportion;
    thePhoto.style.height = newPhotoHeight + "px";
    thePhoto.style.width = newPhotoWidth + "px";
     
    thePhotoFrame.style.height = newPhotoHeight;
    thePhotoFrame.style.marginLeft = 0;
    thePhotoFrame.style.marginRight = 0;
     
    thePhotoBarFrame.style.height = newPhotoHeight + PHOTOFRAME_PADDING + 6 + "px";
    theMiddle.style.height = newPhotoHeight + PHOTOFRAME_PADDING + 3 + NAVBAR_HEIGHT + "px";
    }
    else
    {
    thePhoto.style.height = null;
    thePhoto.style.width = null;
     
    var frameMargin = (MAX_PIC_WIDTH - thePhoto.width) / 2;
    thePhotoFrame.style.height = thePhoto.height + "px";
    thePhotoFrame.style.marginLeft = frameMargin;
    thePhotoFrame.style.marginRight = frameMargin;
     
    thePhotoBarFrame.style.height = thePhoto.height + PHOTOFRAME_PADDING + 6 + "px";
    theMiddle.style.height = thePhoto.height + PHOTOFRAME_PADDING + 3 + NAVBAR_HEIGHT + "px";
    }
    }
    Basically, I've declared some constants at the top of the file, which I use several times.
    When the image reloads, it calls this method.
    The first if-statement determines if the picture area is bigger or smaller (width wise, because height is unlimited) than the image.
    Then, based on what it is, it dynamically places margins (to get the picture in the center of the photo area) and extends the height of the photo area (which means we also gotta extend the height of the middle area.)

    And that's basically it.

    So what to do...
    Well, PhP basically lets me generate things (like all the image thumbnails) without actually having to write the html for them. This allows me to pick up and walk away after I'm done with the site. All my dad will have to do is put the images he wants on the server, and the code will determine how many there are, etc... at least that's the theory.
    I'm saving the flashy stuff for when I get actual functionality out of the way, so it will prolly look plain for a while.
    The good news is, my dad likes the site, and it's color scheme, so I guess I did a good job!
    The next step is... What is PhP?

    -----------------------------------------------------------
    Project Started: May 31, 2010
    Percent Complete: 30%
    -----------------------------------------------------------
    This article was originally published in blog: Photo Gallery Update [1] started by Imisnew2
    Comments 3 Comments
    1. Walkerxes's Avatar
      Walkerxes -
      w00t!
    1. Imisnew2's Avatar
      Imisnew2 -
      When you converted this to the front page, it lost some "Enters" and formatting inside the code blocks
    1. Walkerxes's Avatar
      Walkerxes -
      Fixed the 1st 2 code boxes.. that magically now work, where they hadn't before.. I'll get the other 2 tomorrow.