Log in

View Full Version : javascript gallery that supports all image formats


tomwaits4noman
04-11-2009, 05:37 PM
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>
jscheuer1
04-12-2009, 02:13 PM
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.
tomwaits4noman
04-14-2009, 09:24 PM
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.
jscheuer1
04-16-2009, 04:11 PM
Well look at a more or less typical setup (from Ultimate Fade-in Slide Show (http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm)):


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:


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.