www.webdeveloper.com
Results 1 to 11 of 11

Thread: dynamic picture gallery help

  1. #1
    Join Date
    Feb 2011
    Location
    israel
    Posts
    157

    dynamic picture gallery help

    hi, i'm new here, and kinda new to javascript, and i have this problem.
    my client asked me to create him a dynamic picture gallery, with tons of specifications, and i managed all of them, except this feature he requested.
    he doesn't want any scrollbars in it, meaning every time the window size changes, the number of pictures in the page decreases, and a navbar shows up so people can toggle between "pages" and see all the pics.
    ive hit the brick wall with this one.
    all ive managed to do so far is, whenever the window resizes, the pictures that do not have space in the window disappear with *picture*.style.display = 'none' and make them appear again by changing it to 'inline'.
    Code:
    for (y = 2; y <= numOfImages; y++) {
                    if (flowerDi * y >= GalleryDi) {
                        for (x = y; x <= numOfImages; x++) {
                            document.getElementById('page').innerHTML = numOfPages;
                            divA[x].style.display= 'none';
                        }
    
                    }
                    if (flowerDi * y <= GalleryDi) {
                        for (x = 1; x <= y; x++) {
                            document.getElementById('page').innerHTML = numOfPages;
                            divA[x].style.display= 'inline';
                        }
                    }
                }
    *flower is the pic names, and divA are their wrappers.

    the problem is, how i build this navigation bar and "pages" that change with the window size.
    i would really appreciate help TT_TT

  2. #2
    Join Date
    Mar 2009
    Posts
    467
    If I understand you correctly, what you probably need to do is:

    1. whenever a new "page" comes up get the height of the available screen: 'var ht = screen.availHeight' will get you this
    2. before you make a picture visible, get its height, as in: 'document.getElementById('my_Image').height' --it should give you the height in pixels
    3. If it, plus the heights of the previous pictures that have been made visible, would exceed the available height of the screen, don't make it visible and end the loop.

  3. #3
    Join Date
    Feb 2011
    Location
    israel
    Posts
    157
    yeah, but how do i add the pages so people can flip through the images that have been hidden?

  4. #4
    Join Date
    Mar 2009
    Posts
    467
    You might try something like this. The assumption (maybe a bad one) is that all the images will be of the same height. Once you've established the maximum number of images which can be displayed on a page, you can use a function like this to toggle the sets from your navbar.

    Code:
    function reveal(ImgArray,startAt, numPicts){ //ImgArray contains the Image objects, startAt is the offset in the array
         // of the first image you want to make visible, numPicts is the number of images you can have on a page
         var i, x;
         // first hide all the images
         for( i = 0; i < ImgArray.length; i++){
            ImgArray[i].style.display = "none";
         }
         // now show just the ones you want displayed on the 'page'
         for (i= startAt; i < (startAt + numPicts); i++){
            if( i == ImgArray.length){break;}  // don't go past the end of the array
            ImgArray[i].style = "inline";
         }
    }

  5. #5
    Join Date
    Mar 2009
    Posts
    467
    Whoops-- the last line in the second 'i' loop should read:

    ImgArray[i].style.display = "inline";

  6. #6
    Join Date
    Feb 2011
    Location
    israel
    Posts
    157
    thx, that gives me a way to make the pages, but the major problem is that the number of pics in the page changes based on the window size, meaning that there is a different start and end value to the pictures every time the page resizes.

    i used
    Code:
    GalleryDi = (GalH * GalW);
                pics4Page = Math.floor((GalleryDi / flowerDi));
                if (pics4Page == 0) { pics4Page = 1; }
                numOfPages = Math.ceil((numOfImages / pics4Page));
    to figure out the number of pages i need for every situation, but i cant find a way to distribute the images between them...

    i tried writing the statements by hand for every possible situation and figure out the commons between them so i could make do with 'for's and varieables, but ended up drowning in my own conditions and loops, and couldnt figure out a thing...

  7. #7
    Join Date
    Mar 2009
    Posts
    467
    Set a 'resize' event listener on the 'window' object. Send it to a function that recalculates the maximum number of your images (once again, I'm assuming they are all of the same height) that can fit on the page, and then have it call the function I gave you above.

  8. #8
    Join Date
    Feb 2011
    Location
    israel
    Posts
    157
    i dont get it....
    how does the function helps me in a situation where, for example i only have one pic for page, so its 30 pages to make a navbar for and show only one picture at a time, and a situation where i only have 3 pictures for page, and i only have 10 pages that show 3 pictures each time?
    the navbar should adjust itself to the size of the window as well, every time it gets smalle both the content and the navbar change to show only the number of pics that fit per page, and only the number of pages necesary to move between the pages. i also have no idea how to write the script for the nav bar... -_-

  9. #9
    Join Date
    Mar 2009
    Posts
    467
    I didn't realize that the navbar needed to be dynamic as well. It wasn't entirely clear to me what your navbar did. The code that follows does adjust the navbar, which should be in its own container like a DIV. This function needs to be called anytime the browser window is resized. As I said before, you need to attach a "resize" function to the 'window' element, and have the function it calls recalculate the maximum number of images that can be on a page. You should take into account the navbar in making this calculation. I would suggest making it a set percentage of height in the available browser window. Once this is done, the cleanNavBar function needs to be called. It will take care of the navbar and invoke the 'reveal' function with the proper arguments.

    As is, the result is rather ugly--you'll need to style it.

    Code:
    /* The first arg is the HTML id of the container that is the nav bar, the 2nd is the array of IMG objects, and the third
    is the number of pictures that can appear on a 'page'  */
    function cleanNavBar(barId, imgArray, maxPicts){
        var x, i, old, numSpans, mod, span, txt, first, last, arrLength;
        arrLength = imgArray.length;
        //clean out the old out of the nav bar --THIS ASSUMES that EVERYTHING IS TO BE CLEARED OUT
        x = document.getElementById(barId);
        old = x.childNodes;
        for(i = 0; i < old.length; i++){
          old[i].onclick = null;
          x.removeChild(old[i]);
        }
        // calculate number of spans needed
        numSpans = 0;
        mod = arrLength &#37; maxPicts;
        if(mod != 0){
           numSpans = 1;
           arrLength = arrLength - mod;
        }
        numSpans += arrLength / maxPicts;
    
        //now draw a new set of span elements for the nav bar
        first = 0; last = maxPicts -1;
    
        for(i = 0; i < numSpans; i++){
           span = document.createElement('span');
           txt = first + ' to ' + last + ' - ';
           txt = document.createTextNode(txt);
           span.appendChild(txt);
           //create event listeners so that they can cause the correct pictures to show up through the 'reveal' function
           span.onclick = function(imgArray, first, maxPicts){
                                 var z = function(){reveal(imgArray, first, maxPicts);}
                                 return z;
                           }(imgArray, first, maxPicts);
           x.appendChild(span);
           first += maxPicts; last += maxPicts;
         }
    }

  10. #10
    Join Date
    Feb 2011
    Location
    israel
    Posts
    157
    I altered my code to this:
    Code:
     var x, i, old, mod, span, txt, first, last, arrLength;
            //start up--------------------------------------------------------->
            function startUp() {
                GlVar();
                pages()
                divA()
                flower();
                window.onresize = function () { ReSize(); cleanNavBar(); }
            }
    
    
            //global variables-------------------------------------------------->
            function GlVar() {
                body = document.getElementsByTagName('body').item(0);
                numOfImages = 30;
    
            }
            //new elements------------------------------------------------------>
    
    
            function pages() {
    
                pages = [document.createElement('div')];
                for (x = 1; x <= numOfImages; x++) {
                    pages.push(document.createElement('div'));
                    pages[x].className = 'pages';
                    pages[x].style.display = 'none';
                    pages[x].id = 'page' + x;
    
                    document.getElementById('Gallery').appendChild(pages[x]);
                }
            }
            function divA() {
                divA = [document.createElement('div')];
                for (x = 1; x <= numOfImages; x++) {
                    divA.push(document.createElement('div'));
                    divA[x].className = 'divA';
                    divA[x].style.height = '160px';
                    divA[x].style.width = '160px';
                    divA[x].style.float = 'left';
                    divA[x].id = 'div' + x;
                    pages[1].style.display = 'block';
                    pages[1].appendChild(divA[x]);
                }
            }
    
            function flower() {
    
                flower = [document.createElement('img')];
                for (x = 1; x <= numOfImages; x++) {
                    flower.push(document.createElement('img'));
                    flower[x].src = 'mancut/mancut&#37;20(' + x + ').png';
                    flower[x].className = 'flower';
                    flower[x].style.height = '150px';
                    flower[x].style.width = '150px';
                    flower[x].style.float = 'left';
                    flower[x].style.position = 'relative';
                    flower[x].id = 'flower' + x;
                    flower[x].onmouseover = function () { hover(this.id); }
                    flower[x].onmouseout = function () { unHover(this.id); }
                    flower[x].onclick = function () { click1(this.id); }
                    divA[x].appendChild(flower[x]);
                }
            }
            function MenuBar() {
                menuBar = document.createElement('p');
            }
            //actions-------------------------->
            function hover(theFlower) {
                document.getElementById(theFlower).style.width = '200px';
                document.getElementById(theFlower).style.height = '200px';
                document.getElementById(theFlower).style.marginLeft = '-25px';
                document.getElementById(theFlower).style.marginTop = '-25px';
                document.getElementById(theFlower).style.zIndex = 1000;
            }
            function unHover(theFlower) {
                document.getElementById(theFlower).style.width = '150px';
                document.getElementById(theFlower).style.height = '150px';
                document.getElementById(theFlower).style.marginLeft = '0px';
                document.getElementById(theFlower).style.marginTop = '0px';
                document.getElementById(theFlower).style.zIndex = 1;
            }
            function click1(image) {
                blackScreen = document.createElement('div')
                blackScreen.style.position = 'absolute';
                blackScreen.style.top = '0px';
                blackScreen.style.left = '0px';
                blackScreen.style.height = '100%';
                blackScreen.style.width = '100%';
                blackScreen.style.zIndex = 1000;
                blackScreen.style.background = 'rgba(0,0,0,0.5)';
                body.appendChild(blackScreen);
                bigImage = document.createElement('img');
                bigImage.src = document.getElementById(image).src;
    
                blackScreen.appendChild(bigImage);
    
                bigImage.style.width = '45%'
                bigImage.style.position = 'absolute';
                bigImage.style.top = '2%';
                bigImage.style.left = '50%';
                bigImage.style.marginLeft = -22.5 + '%'
    
                bigImage.onclick = function () { click2(this.id); }
            }
            function click2() {
    
                body.removeChild(blackScreen);
            }
            function ReSize() {
                for (x = 1; x <= numOfImages; x++) flowerDi = (parseInt(divA[x].style.height.replace(/px/g, '')) + 20) * (parseInt(flower[x].style.width.replace(/px/g, '')) + 20);
                GalH = document.getElementById('Gallery').clientHeight;
                GalW = document.getElementById('Gallery').clientWidth;
                GalleryDi = (GalH * GalW);
                pics4Page = Math.floor((GalleryDi / flowerDi));
                if (pics4Page == 0) { pics4Page = 1; }
                if (pics4Page >= numOfImages) { pics4Page = numOfImages; }
                numOfPages = Math.ceil((numOfImages / pics4Page));
    
                for (y = 2; y <= numOfImages; y++) {
                    if (flowerDi * y >= GalleryDi) {
                        for (x = y; x <= numOfImages; x++) {
                            //     document.getElementById('page').innerHTML = numOfPages;
                            divA[x].style.display = 'none';
                        }
    
                    }
                    if (flowerDi * y <= GalleryDi) {
                        for (x = 1; x <= y; x++) {
                            //      document.getElementById('page').innerHTML = numOfPages;
                            divA[x].style.display = 'inline';
                        }
                    }
                }
            }
            /* The first arg is the HTML id of the container that is the nav bar, the 2nd is the array of IMG objects, and the third
            is the number of pictures that can appear on a 'page'  */
            function cleanNavBar() {
                barId = 'page';
                if (pics4Page == numOfImages) { numOfPages = 0 }
    
                //clean out the old out of the nav bar --THIS ASSUMES that EVERYTHING IS TO BE CLEARED OUT
                navbar = document.getElementById(barId);
                old = navbar.childNodes;
                for (i = 0; i < old.length; i++) {
                    old[i].onclick = null;
                    navbar.removeChild(old[i]);
                }
    
                //now draw a new set of span elements for the nav bar
                first = 1; last = pics4Page;
    
                for (i = 0; i < numOfPages - 1; i++) {
                    span = document.createElement('span');
                    txt = first + ' to ' + last + ' | ';
                    txt = document.createTextNode(txt);
                    span.appendChild(txt);
                    //create event listeners so that they can cause the correct pictures to show up through the 'reveal' function
                    span.onclick = null;
    
                    navbar.appendChild(span);
                    first += pics4Page; last += pics4Page;
                }
            }
    
    
    
    
    
            //end---------------------------------------------------------------------->
    with your help, i managed to get the navbar to display the correct number of spans each time(with lag...), but their value is incorrect, and the pages are unordered, like, i get (--1-14|28-50|1-14|15-28--) and similar.
    i think i can manage to somehow extract the correct pictures that should be seen from the value of the spans or sth, but i need the values to be correct.

    thx a ton for all the help, sorry im being so annoying >_<

    my stepfather has a theory about a real easy way to solve all this, but he refuses to tell me. something about my logics being horridly dumb, and the need for me to learn.
    Last edited by moritana; 02-24-2011 at 05:23 AM.

  11. #11
    Join Date
    Mar 2009
    Posts
    467
    Right off hand I would suggest that you invoke the ReSize(); and cleanNavBar() functions (in that order) at the end of your startUp() function. That might cure the problem. Your code is hard for me to follow. You are creating a lot of global variables within your functions by not using a 'var' declaration, and then using those values elsewhere. This makes code very hard to read and debug.

    And one thing that I would really recommend that you not do is to use global functions to create global variables (no var declaration) that have the same name as the function. You are asking for trouble.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles