Photo Album Center Images [Archive]

View Full Version : Photo Album Center Images

bdmatrix

02-17-2006, 09:13 PM

Script: http://www.dynamicdrive.com/dynamicindex4/photoalbum.htm

Hello,
For some reason I can't center the images when using 2x4 grid. The images line up all in one column instead of maintaing two columns.

I have gone through the instructions given by John in a similar thread (http://www.dynamicdrive.com/forums/showthread.php?t=7726), and have added to my code everything he suggested. But the problem still remains. Here is the code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">

.slideshow{ /*CSS for DIV containing each image*/
float: center;
width: auto;
height: auto;
}

.slideshow img{ /*Change "auto" below to a number (ie: 200px) to hard code dimensions of album images*/
width: auto;
height: auto;
}

#navlinks{ /*CSS for DIV containing the navigational links*/
width: 700px;
}

#navlinks a{ /*CSS for each navigational link*/
margin-right: 8px;
margin-bottom: 3px;
font-size: 110%;
}

#navlinks a.current{ /*CSS for currently selected navigational link*/
background-color: yellow;
}
body {
background-color: #006600;
}
</style>
</head>

<body>

<script type="text/javascript">

/***********************************************
* Photo Album script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

var dimension="2x4" //Specify dimension of gallery (number of images shown), such as 4x2, 3x1 etc

//Specify images:
//galleryarray[x]=["path_to_image", "optional_title_attribute", "optional_text_description", "optional_link"]
var galleryarray=new Array()
galleryarray[0]=["0.jpg", "Click to Download", "", "optional url"]
galleryarray[1]=["1.jpg", "Click to Download", "", "optional url"]
galleryarray[2]=["2.jpg", "Click to Download", "", "optional url"]
galleryarray[3]=["3.jpg", "Click to Download", "", "optional url"]
galleryarray[4]=["4.jpg", "Click to Download", "", "optional url"]
galleryarray[5]=["5.jpg", "Click to Download", "", "optional url"]
galleryarray[6]=["6.jpg ", "Click to Download", "", "optional url"]
galleryarray[7]=["7.jpg", "Click to Download", "", "optional url"]
galleryarray[8]=["8.jpg", "Click to Download", "", "optional url"]

var href_target="_new" //Enter target attribute of links, if applicable

var totalslots=dimension.split("x")[0]*dimension.split("x")[1]

function buildimage(i){
var tempcontainer=galleryarray[i][3]!=""? '<a href="'+galleryarray[i][3]+'" target="'+href_target+'">' : ""
tempcontainer+='<img src="'+galleryarray[i][0]+'" border="0" title="'+galleryarray[i][1]+'">'
tempcontainer=galleryarray[i][3]!=""? tempcontainer+'</a>' : tempcontainer
tempcontainer=galleryarray[i][2]!=""? tempcontainer+'<br \/>'+galleryarray[i][2] : tempcontainer
return tempcontainer
}

function jumptopage(p){
var startpoint=(p-1)*totalslots
var y=1;
for (i=0; i<totalslots; i++){
document.getElementById("slide"+i).innerHTML=(typeof galleryarray[startpoint+i]!="undefined")? buildimage(startpoint+i) : ""
}
while(document.getElementById("navlink"+y)!=null){
document.getElementById("navlink"+y).className=""
y++
}
document.getElementById("navlink"+p).className="current"
}

var curimage=0
for (y=0; y<dimension.split("x")[1]; y++){
for (x=0; x<dimension.split("x")[0]; x++){
if (curimage<galleryarray.length)
document.write('<div id="slide'+curimage+'" class="slideshow">'+buildimage(curimage)+'</div>')
curimage++
}
document.write('<br style="clear: left" />')
}

</script>


<div id="navlinks">
<div style="margin:0 auto;width:700px;">
<script type="text/javascript">
for (i=1; i<Math.ceil(galleryarray.length/totalslots)+1; i++)
document.write('<a id="navlink'+i+'" href="javascript:jumptopage('+i+')\">Page'+i+'</a> ')
document.getElementById("navlink1").className="current"
</script>
</div></div>

</body>
</html>

Each of my image's width is 260px. But I have left them as "auto" both in .slideshow and .slideshow img.

However, the navlinks width have been set to 700px (wide enough), as suggested by John. The images still don't appear in two columns when centered. When they are aligned to left/right, they seem fine. But only when it's centered that the problem appears.

Any help would be appreciated. Thanks.

jscheuer1

02-18-2006, 07:58 AM

If you go back over the instructions from that thread of mine you mention, you will see that actual dimensions are used to define the width of the .slideshow class and that other dimensions are arrived at as a result of calculations you must make taking the width of that class and multiplying it as described. Since you have defined no set dimension for that class (rather leaving it as 'auto') or for the images themselves, the width will be that of each individual image (no way for me to know what those may be). If the various image's widths are not uniform, this makes it even more complicated. Once you have settled on a width for the class .slideshow and made your calculations, you still need to apply the result to a new containing division for the script and markup (also as mentioned in the thread you refer to). I see no attempt to do so in your code. One other thing, where you have 'float:center;', that is invalid and will do nothing except perhaps confuse some browsers. The float property's values can be none, left or right. Some Mozilla based browser do recognize center but, it is non-standard and, as I said invalid.

I apologize if this seems a harsh reply but, it is an accurate description of the situation and a means to overcome its problems.

bdmatrix

02-19-2006, 03:59 AM

Thanks for your reply John.
I was wondering:

What does the .slideshow width do? How do I know what to set it to?
Each of my image has a uniform width, which is 226px. What should i set the .slideshow's width to ?

I want to have 2 images per row, so what should the .slideshow's width be? And what should be the navlink's width?

In your instructions on this thread (http://www.dynamicdrive.com/forums/showthread.php?t=7726), you wrote:

"Now all you need to do is put a division around the the script and navlink markup:"

<div style="margin:0 auto;width:300px;"> <script type="text/javascript"> /*********************************************** * Photo Album script- © Dynamic Drive DHTML code library (www.dynamicdrive.com) * Visit http://www.dynamicDrive.com f . . . . . . <Math.ceil(galleryarray.length/totalslots)+1; i++) document.write('<a id="navlink'+i+'" href="javascript:jumptopage('+i+')\">Page'+i+'</a> ') document.getElementById("navlink1").className="current" </script> </div></div>

What exactly is the " margin:0 auto;" doing in the first line? Is that missing a semi-colon?

I hope I am not troubling you with too many questions. Thanks again.

Edit: Just wanted to add, that I basically want to add the above script inside a table. So I want the images to be in the center of the table in a gird of 2x4. How would the be centered if the .slideshow float:left ?

jscheuer1

02-19-2006, 06:52 AM

Hmmm, I think the first concept you need to understand is that the .slideshow selector is a class. In css a class will refer to all elements that have it assigned to them. In this particular case, any given .slideshow element holds one image in the photo album. Therefore, its width should be set to the width of the widest image or perhaps a bit more. In your case, say 245px, would be a good starting point. You can experiment with other values but, it should probably be a number about equal to 245, probably no more than 300.

Now, this covers only the width of each individual image's container. To get the width of a 'page', we multiply times the number of images horizontally on each 'page', in this case 2 (the 2 in 2x4). So, using 245 for .slideshow, would in this case give us 490px for the width of the #navlinks selector and our later containing division.

About the float - that only applies to the .slideshow class. Therefore, it only affects the alignment of each individual image within its own little division. You could experiment with substituting text-align:center; for float:left; or you could simply get rid of the float, see what that looks like. Whatever internal alignment .slideshow has will not affect the overall alignment of the album.

Now, if you are putting all this inside a table cell, make sure to have that cell be at least as wide as the album, 490 or more in this case.

About margin:0 auto; - The margin property covers all four dimensions that a margin applies to. 0 auto; means top and bottom margins are zero, left and right are auto, meaning whatever is left around the element in its container, divided equally among the left and right side. A long way to go to explain the concept of horizontally centered but, it gives you an idea of what is happening.

More about margin - margin:10px; means top, right, bottom and left margins are all set to 10px. One could also use margin:10px 10px 10px 10px; or margin:10px 10px; and it would mean the same thing. Or, for variety - margin:10px 5px 7px 3px; would be the same as the more verbose:

margin-top:10px;
margin-right:5px;
margin-bottom:7px;
margin-left:3px;

When only two values are used, like margin:0 auto; the first applies to top and bottom, the second to right and left.

One more bit, if there is nothing else inside your table except the photo album, you do not need to use a table at all for this, the container (or wrap around) division we are creating is all the container needed to center the album on the page.

Don't forget to use a DOCTYPE as mentioned in the thread we have been referring to and, you should be all set.