Won't center/Resize

**JBH** · 02-15-2006, 02:29 AM

One question about the PHP Photo Album script, and one about Lightbox Image Viewer.

1. How do I center the thumbnail gallery viewer (PHP Photo Album). I've tried <div align="center>, <center>, and whatever else. It wantes to stay to the left.

2. I want the images that pops up with the Lightbox Image Viewer script to be a specific size eg. max height 600px)

Thx

**jscheuer1** · 02-15-2006, 09:22 AM

There are simpler ways but, they could cause other problems, so let's go with this method. First figure out how wide your pages of images are. To do that, take the width of this style:

Code:

.slideshow{ /*CSS for DIV containing each image*/
float: left;
width: 100px;
height: 155px;
}

and multiply it by the number of images displayed horizontally (from the configuration here, first number):

Code:

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

This gives us (in this case) 3 times 100 or 300. Next make sure this style's width is set to that number:

Code:

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

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

Code:

<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>

A DOCTYPE of:

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">

may be required for certain browsers. Stricter DOCTYPEs should be fine as well. Older, legacy browsers may not center with this approach, but many of those will not run the script properly to begin with.

**jscheuer1** · 02-15-2006, 09:35 AM

Oh, and I forgot all about your part 2 question. Before I get to that (in my next post), let me mention that in my previous answer, the division mentioned:

HTML Code:

<div style="margin:0 auto;width:300px;">

should be set to that same width we calculated for the width of a 'pages'. And, if this causes the images to line up one by one vertically (which may happen if you've added padding or borders somewhere) it will need to be wider to accommodate them, an additional 10 16 or 20 or more (depending upon how much extra stuff you've added) may be required, making the width, say 310 or 316 or whatever, etc. If everything else is set as in the demo, this will not be required.

**jscheuer1** · 02-15-2006, 09:41 AM

Originally Posted by JBH

2. I want the images that pops up with the Lightbox Image Viewer script to be a specific size eg. max height 600px)

No real good way to do this other than to resize your images in a paint, image or better yet, image optimization program. If you rely upon the browser to resize your images, you will be wasting bandwidth and sacrificing the image quality that can be achieved using a bilinear resize in some type of image program.

**JBH** · 02-15-2006, 03:41 PM

Ok. Thanks for your answer. I got the image centering working.

To solve the image resize problem, I am trying to use Lightbox Plus. You told me to add initLightbox(); to my code earlier when I merged Lightbox with the Photo Album scripts (Lightbox Image Viewer with PHP Photo Album ). It worked fine. Well, when trying to use Lightbox plus, the script is not re-initializing. This is possibly due to the fact that the initLightbox(); code is not even in the lightbox_plus.js file.
I emailed the author, but still waiting a response. Could you see what I need to add to re-initialize the script.

Thanks a whole lot.

**jscheuer1** · 02-15-2006, 07:11 PM

Yes, I see. It is still a bad idea to have this script have the browser resize your images. This is best done with an image program as I said before. However, to use the lightbox_plus.js script with the Photo Album requires that you replace the added initLightbox(); statement in the Photo Album script with:

Code:

	var lightbox = new LightBox({
		expandimg:'expand.gif',
		shrinkimg:'shrink.gif',
		effectimg:'zzoop.gif',
		effectpos:{x:-40,y:-20},
		effectclass:'effectable',
		closeimg:'close.gif'
	});

**JBH** · 02-16-2006, 10:16 PM

Thx for your help.

Everything works like you said.

**teegee543** · 12-09-2006, 04:29 PM

Sorry about resurrecting an old thread. I have an issue related to the question resolved in this thread. I'm combining Lightbox Plus with the Ultimate Gallery2 Plugin.

Almost everything works and the lightbox reinitializes correctly with the code posted by jscheuer1, but doesn't completely reinitialize with the overlays that let you zoom into the image.

I'm not sure why this happens and would greatly appreciate it if someone could help me. Thanks!

**jscheuer1** · 12-10-2006, 03:53 PM

Originally Posted by teegee543

Sorry about resurrecting an old thread. I have an issue related to the question resolved in this thread. I'm combining Lightbox Plus with the Ultimate Gallery2 Plugin.

Almost everything works and the lightbox reinitializes correctly with the code posted by jscheuer1, but doesn't completely reinitialize with the overlays that let you zoom into the image.

I'm not sure why this happens and would greatly appreciate it if someone could help me. Thanks!

It would be hard to help with this one without a link to the problem page itself.

**teegee543** · 12-10-2006, 05:10 PM

Whoops, sorry. The site: http://www.student.virginia.edu/~ballroom/

Here are the two pieces of code I changed in the ug2slideshow.php plugin file to reinitialize the plugin.

line 80:

print "fadeimages[$i] = [\"" . $current_galleryurl ."main.php?g2_view=core.DownloadItem&g2_itemId=$g_id\",";

line 165:

fadeshow.prototype.populateslide=function(picobj, picindex){
var slideHTML=""
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML='<a href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'" rel="lightbox">'
slideHTML+='<img src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px">'
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML+='</a>'
picobj.innerHTML=slideHTML
var lightbox = new LightBox({
loadingimg:'http://www.student.virginia.edu/~ballroom/wp-content/themes/ballroom/images/loading.gif',
expandimg:'http://www.student.virginia.edu/~ballroom/wp-content/themes/ballroom/images/expand.gif',
shrinkimg:'http://www.student.virginia.edu/~ballroom/wp-content/themes/ballroom/images/shrink.gif',
previmg:'http://www.student.virginia.edu/~ballroom/wp-content/themes/ballroom/images/prev.gif',
nextimg:'http://www.student.virginia.edu/~ballroom/wp-content/themes/ballroom/images/next.gif',
effectimg:'http://www.student.virginia.edu/~ballroom/wp-content/themes/ballroom/images/zzoop.gif',
effectpos:{x:-40,y:-20},
effectclass:'effectable',
closeimg:'http://www.student.virginia.edu/~ballroom/wp-content/themes/ballroom/images/close.gif',
resizable:true
})
}

Thread: Won't center/Resize

Thread Tools

Search Thread

Won't center/Resize

Thx

Bookmarks

Bookmarks

Posting Permissions