PDA

View Full Version : Won't center/Resize



JBH
02-15-2006, 02:29 AM
One question about the PHP Photo Album (http://www.dynamicdrive.com/dynamicindex4/photoalbum.htm) script, and one about Lightbox Image Viewer (http://www.dynamicdrive.com/dynamicindex4/lightbox/index.htm).

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:


.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):


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:


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


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


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


<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
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 (http://serennz.cool.ne.jp/sb/sp/lightbox/). 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 (http://www.dynamicdrive.com/forums/showthread.php?t=7667)). 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. :o

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:


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 (http://serennz.sakura.ne.jp/toybox/lightbox/?en) with the Ultimate Gallery2 Plugin (http://chunkymoon.com/wordpress/?p=1).

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
Sorry about resurrecting an old thread. I have an issue related to the question resolved in this thread. I'm combining Lightbox Plus (http://serennz.sakura.ne.jp/toybox/lightbox/?en) with the Ultimate Gallery2 Plugin (http://chunkymoon.com/wordpress/?p=1).

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

jscheuer1
12-10-2006, 06:59 PM
First off the page wouldn't load in IE 7 and the reason is not clear.

I made a local copy of your page without the PHP (which should be transparent, it just fetches the images) and it had the same problem you were having and still wouldn't load in IE 7. I had run into a similar problem with a different version of lightbox, it wasn't showing the next/previous or closing properly in FF. To solve that, I had moved the lightbox initialization to the UFade's onmouseover function. I tried that for this script and, no help. It is a good move anyway because where you have it now, each time the image changes, lightbox re-inits destroying the initialization for any currently displayed lightbox effect. What I hope is the final solution for this problem came when I saw that lightbox plus was creating a division with an id to handle the zooming functions and then calling it by id. You can only call one element by id so, once lightbox plus inits, it cannot init again without messing up the zoom.

What I did was edit lightbox_plus.js at the end (changes red):


/*Event.register(window,"load",function() {*/
function initThings(){
if(document.getElementById('actionImage'))
document.getElementById('actionImage').parentNode.removeChild(document.getElementById('actionImage'));
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
})
}
/*});*/

In the Ufade script, I got rid of this bit (red):


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

And added to the startit function (addition red):


fadeshow.prototype.startit=function(){
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
this.populateslide(crossobj, this.curimageindex)
if (this.pausecheck==1){ //IF SLIDESHOW SHOULD PAUSE ONMOUSEOVER
var cacheobj=this
var crossobjcontainer=iebrowser? iebrowser["master"+this.slideshowid] : document.getElementById("master"+this.slideshowid)
crossobjcontainer.onmouseover=function(){initThings();cacheobj.mouseovercheck=1}
crossobjcontainer.onmouseout=function(){cacheobj.mouseovercheck=0}
}
this.rotateimage()
}

This may or may not take care of the problem I was having in IE 7. My finished page loaded OK in that browser so, there is a good chance. It also made things work in FF and Opera.

Incidentally, for the script engine part of Ufade, you might want to upgrade to this version:

http://www.dynamicdrive.com/forums/showpost.php?p=64522&postcount=2

It's fading works in Safari and Opera 9+.

teegee543
12-10-2006, 09:06 PM
Thanks! Those edits did the trick in FF. I've also upgraded the UFade engine as suggested at your last link. I don't seem to have problems loading the page in IE 7.0.5730.11. The slideshow runs, but the loading GIF for lightbox doesn't center on the page and drops to the bottom of the page unless you're scrolled to the very top of the page.

Also, a problem I had before when I reinitialized the lightbox so many times was with memory leaks. Memory usage for firefox.exe would increase each time a page loaded the script. It seems as if memory usage increases by about the size of the thumbnail pictures, even if you don't active the lightbox or I might also just be imagining things.

A real problem is when you do activate lightbox, you can quickly use up a lot of RAM if you cancel the lightbox image load before it shows the picture. If this question is not in the scope of these forums, I can try to contact the author of the lightbox script.

Thanks again for your help! I really appreciate it.

jscheuer1
12-10-2006, 09:49 PM
How much memory are we talking about? I make a habit, whenever possible, to always have much more memory available than I think I will need but, I realize many folks cannot do this. Does the memory ever get released? If so, when? Does it release on page close or browser close or reboot of the computer?

Also, I've often thought that might be a problem with this script (lightbox) as it creates elements and assigns events to them. If this is not done properly, it will create memory problems. Add to that by reinitializing it over and over again and you can have real problems. It would require a rewrite of how events get assigned or a routine upon initialization to nullify the existence of the events created upon the prior initialization (if any) or both.

Add to this the fact that there are now quite a few versions of this script and the task becomes a bit daunting. So, I would want to know just how severe it is before tackling it. Also, contacting the author might at least cause them to look into writing future versions with more of an eye toward memory usage and multiple initialization applications for the script.

teegee543
12-10-2006, 10:54 PM
How much memory are we talking about? I make a habit, whenever possible, to always have much more memory available than I think I will need but, I realize many folks cannot do this. Does the memory ever get released? If so, when? Does it release on page close or browser close or reboot of the computer?

I did some more testing and found that memory usage increases by about the photo size each time lightbox loading is cancelled (possibly up to 2-3 megs for some of the photos). The memory gets released when the browser is closed and occasionally is released when another page/lightbox is loaded. I haven't managed to increase memory usage in FF past more than 135 megs, which is a lot, but FF might have a cap on memory usage. I think as long as I don't make the number of pictures in the slideshow too large it should be fine.


Also, I've often thought that might be a problem with this script (lightbox) as it creates elements and assigns events to them. If this is not done properly, it will create memory problems. Add to that by reinitializing it over and over again and you can have real problems. It would require a rewrite of how events get assigned or a routine upon initialization to nullify the existence of the events created upon the prior initialization (if any) or both.

Add to this the fact that there are now quite a few versions of this script and the task becomes a bit daunting. So, I would want to know just how severe it is before tackling it. Also, contacting the author might at least cause them to look into writing future versions with more of an eye toward memory usage and multiple initialization applications for the script.

There doesn't seem to be a problem when the lightbox image loads completely and actually frees up some of the previously used memory when that happens. You're probably right about the problem being how lightbox handles elements. The problem doesn't seem too severe as long as FF clears the memory before it gets too big.