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
    Regular Coder
    Join Date
    Apr 2010
    Location
    Somerset,UK
    Posts
    138
    Thanks
    10
    Thanked 1 Time in 1 Post

    Creating a gallery

    Hi

    Am looking for advice on what would be best.

    I'm creating a site for a card designer/illustrator so there will be a few galleries included. In anyones opinion are galleries best produced in JavaScript or CSS?

    Now I'm not good with JavaScript but have found a few gallery templates online and am learning CSS as I go, so again will probably look for inspiration online. But I'm just curious to read anyone thoughts and advice on the subject!

    I don't need or want it to be to fancy. I feel JavaScipt would be better if I want it to be all swooshy and neat looking but maybe if I just create a grid with rollovers I'm thinking that will work. What are peoples thoughts?

    Thanks

    C

    Ps maybe back asking for help with either code if it doesnt work ha!!

  • #2
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    Like you hinted at, you can create a basic gallery with thumbnails and when you rollover them an enlargement appears nearby with just css and no javascript.

    But if you want any other features then you'll probably have to use javascript, unless of course you want to use Flash.

    This demo is a basic gallery where you can add as many pics and captions as you like to picData without having to touch the javascript and html.

    When you click a thumbnail, its enlargement and caption fades in.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title></title>
            <style type="text/css">
                p {
                    clear: both;
                }
                #ulThumbs {
                    clear: both;
                    list-style-type: none
                }
                #ulThumbs li {
                    margin: 0px 10px 0px 0px;
                    padding: 0px 0px 0px 0px;
                    display: inline
                }
                #imgEnlargeContainer {
                    width: 50%;
                    float: left
                }
                #descContainer {
                    width: 50%;
                    float: right
                }
                #enlargeContainer {
                    opacity: 0;
                    filter:alpha(opacity=0)
                }
            </style>
            <script type="text/javascript">
                var picData = [
                    ['num1.jpg','description 1'],
                    ['num2.jpg','description 2'],
                    ['num3.jpg','description 3'],
                    ['num4.jpg','description 4']
                ];
                var thumbMaxWidth = 100;
                var thumbMaxHeight = 100;
                var fadeTimer;
                function showEnlargement(picNum){
                    var nextThumbIndex = (picNum+1 > picData.length-1)? 0 : picNum+1;
                    if(fadeTimer){
                        clearInterval(fadeTimer);
                        curOpac = 0;
                        setOpacityCSS();
                    }
                    imgEnlargeO.src = picO[picNum].src;
                    descContainerO.innerHTML = picData[picNum][1];
                    fadeTimer = setInterval(setOpacity,100);
                }
                var curOpac = 0;
                var speed = 0.2;
                function setOpacity() {
                    curOpac = curOpac + speed;
                    if(curOpac <= 10){
                        setOpacityCSS();
                    }
                }
                function setOpacityCSS(){
                    if(typeof(enlargeContainerO.style.opacity) == 'string'){
                        enlargeContainerO.style.opacity = curOpac/10;
                    } else {
                        enlargeContainerO.style.filter = 'alpha(opacity=' + curOpac*10 + ')';
                    }
                }
                window.onload=function(){
                    enlargeContainerO = document.getElementById('enlargeContainer');
                    imgEnlargeO = document.getElementById('imgEnlarge');
                    descContainerO = document.getElementById('descContainer');
                    //load the images into an Image object
                    picO = new Array();
                    for(i=0; i < preloadedImgs.length; i++){
                        picO[i] = new Image();
                        picO[i].src = preloadedImgs[i].src;
                    }
                    //create the thumbnails
                    var ulThumbsO = document.getElementById('ulThumbs');
                    var thumbDims = new Array();
                    for(i=0; i < picO.length; i++){
                        liO = document.createElement('li');
                        imgO = document.createElement('img');
                        imgO.src = picO[i].src;
                        thumbDims = calcNewDimensions(picO[i].width, picO[i].height, thumbMaxWidth, thumbMaxHeight);
                        imgO.width = thumbDims['width'];
                        imgO.height = thumbDims['height'];
                        imgO.num = i;
                        imgO.onclick=function(){
                            showEnlargement(this.num);
                        }
                        liO.appendChild(imgO);
                        ulThumbsO.appendChild(liO);
                    }
                    //set a default random enlargement and description
                    var picNum = Math.floor(Math.random()*picData.length);
                    showEnlargement(picNum);
                }
                //-------------------------------------------
                function calcNewDimensions(width, height, maxWidth, maxHeight){
                    newDims = new Array();
                    var xRatio = maxWidth / width;
                    var yRatio = maxHeight / height;
                    //calculate the new width and height
                    if(width <= maxWidth && height <= maxHeight)  {    //image does not need resizing
                        newDims["width"]     = width;
                        newDims["height"]     = height;
                    } else if(xRatio * height < maxHeight) {
                        newDims["height"] = Math.round(xRatio * height);
                        newDims["width"]  = maxWidth;
                    } else {
                        newDims["width"]  = Math.round(yRatio * width);
                        newDims["height"] = maxHeight;
                    }
                    return newDims;
                }
            </script>
        </head>
        <body>
            <!-- preload the images so we can use their actual width and height property
                 to scale the thumbnails -->
            <div id="preloadedPics" style="display: none"></div>
            <script type="text/javascript">
                for(i=0; i < picData.length; i++){
                    var newImg = document.createElement('img');
                    newImg.src = picData[i][0];
                    newImg.alt = picData[i][1];
                    document.getElementById('preloadedPics').appendChild(newImg);
                }
                preloadedImgs = document.getElementById('preloadedPics').getElementsByTagName('img');
            </script>
            <!-- --------------------End of image preloads ------------------ -->
            <div id="enlargeContainer">
                <div id="imgEnlargeContainer">
                    <img id="imgEnlarge" src="" alt="" />
                </div>
                <div id="descContainer"></div>
            </div>
            <p>Click on a thumbnail</p>
            <ul id="ulThumbs"></ul>
        </body>
    </html>
    Last edited by bullant; 04-14-2011 at 01:33 PM.

  • #3
    Regular Coder
    Join Date
    Apr 2010
    Location
    Somerset,UK
    Posts
    138
    Thanks
    10
    Thanked 1 Time in 1 Post
    Thanks for advice Bullant, appreciate it!

    Javascript does scare me a little as i can never get it to validate, even with the advice I have been given in a previous JavaScript thread. So I think I will try and stick to CSS at the moment and explore the other options when I'm abit more confident.

    I already have some code on my page which I can convert to sue as a gallery but is helpful seeinf other codes and seeing what works best.

    Just need to get the content off the person I'm making site for now!! GAHHH!!!

    C
    Hmmmm......scratchy head time......

  • #4
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    you're welcome

  • #5
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Just need to get the content off the person I'm making site for now!! GAHHH!!!
    hahaha welcome to the world of freelance webdesign!
    Teed


  •  

    Posting Permissions

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