Results 1 to 4 of 4

Thread: javascript gallery that supports all image formats

  1. #1
    Join Date
    Feb 2009
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default javascript gallery that supports all image formats

    Hello

    looking to create a gallery using javascript that supports all img formats
    below is the code I have so far. would love some help with this. thanks in advance

    <html>
    <head>
    <title>Template</title>
    <script>

    function picObj(idNum, w, h, altText) {
    this.idNum = idNum;
    this.width = w;
    this.height = h;
    this.alt = altText;
    }

    function picGalleryObj(c, fldr, imgNameFormat, pixArr) {
    this.cur_pos = c;
    this.folder = fldr;
    this.format = imgNameFormat;
    this.pix_array = pixArr;

    this.move = move;
    this.draw = draw;
    }

    myPix = new Array();
    myPix[0] = new picObj('001', 300, 400, image description!!');
    myPix[1] = new picObj('002', 300, 400, image description!!');

    myPix[2] = new picObj('003', 300, 400, image description!!');

    myPix[3] = new picObj('004', 300, 400, image description!!');

    myPix[4] = new picObj('005', 300, 400, 'Help Iz!!');
    myPix[5] = new picObj('006', 300, 400, image description!!');

    myPix[6] = new picObj('007', 300, 400, image description!!');

    myPix[7] = new picObj('008', 300, 400, image description!!');


    var myGallery = new picGalleryObj(1, 'pix', 'Picture ', myPix);


    function move(pos, div_id) {
    this.cur_pos += pos;

    if(this.cur_pos < 1) {
    this.cur_pos = this.pix_array.length;
    }

    if(this.cur_pos > this.pix_array.length) {
    this.cur_pos = 1;
    }

    draw(div_id);
    }

    function draw(div_id) {
    the_string = "";
    the_string += "<img src='" + this.folder + "/" + this.format + " + this.cur_pos + ".jpg' alt='" + this.pix_array[this.cur_pos].alt + "' width='" + this.pix_array[this.cur_pos].width + "' height='" + this.pix_array[this.cur_pos].height + "' />";
    document.getElementById(div_id).innerHTML = the_string;
    }
    </script>
    <link rel="stylesheet" href="style/layout.css" media="screen" />
    </head>
    <body onload="draw('picDiv');">
    <div id="container">
    <div id="header">
    <br />
    Header info goes here
    </div>
    <div id="submenu">
    </div>
    <div id="navmenu">
    <ul>
    <li /><a href="">Menu items go here</a>
    <li /><a href="">Menu items go here</a>
    <li /><a href="">Menu items go here</a>
    </ul>
    </div>
    <div id="content">
    <a href="javascript:move(-1, 'picDiv');">Prev</a>|<a href="javascript:move(1, 'picDiv');">Next</a>
    <div id="picDiv"></div>
    </div>
    </div>
    </body>
    </html>

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,161
    Thanks
    44
    Thanked 3,238 Times in 3,199 Posts
    Blog Entries
    12

    Default

    Your problem appears to be that you have unnecessarily separated the filename from the extension. Why break it down so much? Enter each image's full filename and extension and process on that basis. This is how most galleries are done.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Feb 2009
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    It was the only way I knew how to configure the javascript I advised to do it this way to make it as easy as possible to change the images

    you mean the issue is with this

    myPix[0] = new picObj('001', 300, 400, image description!!');

    and can you advise of a fix that will help suppport all image formats

    I presume it has to do with

    the_string += "<img src='" + this.folder + "/" + this.format + " + this.cur_pos + ".jpg' alt='" + this.pix_array[this.cur_pos].alt + "' width='" + this.pix_array[this.cur_pos].width + "' height='" + this.pix_array[this.cur_pos].height + "' />";
    document.getElementById(div_id).innerHTML = the_string;
    }

    but I am still stuck

    thanks.

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,161
    Thanks
    44
    Thanked 3,238 Times in 3,199 Posts
    Blog Entries
    12

    Default

    Well look at a more or less typical setup (from Ultimate Fade-in Slide Show):

    Code:
    var fadeimages=new Array()
    //SET IMAGE PATHS. Extend or contract array as needed
    fadeimages[0]=["photo1.jpg", "", ""] //plain image syntax
    fadeimages[1]=["photo2.jpg", "http://www.cssdrive.com", ""] //image with link syntax
    fadeimages[2]=["photo3.jpg", "http://www.javascriptkit.com", "_new"] //image with link and target syntax
    The entire filename and extension is given in the array. Later, after the array has been fed to the main function (as theimages), the images are preloaded:

    Code:
    for (p=0;p<theimages.length;p++){
    this.postimages[p]=new Image()
    this.postimages[p].src=theimages[p][0]
    }
    This sort of setup makes it pretty easy to change any given image's filename or extension. If you want to change all the extensions at once, a global search and replace may be used.

    However, the nice thing here is that you can easily mix image types (.gif, .png, .jpg). Any web supported graphic file format may be used.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

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