CSS Pop Image viewer

[ABizzle]

Ok.......I seem to be having a little issue here. I am trying to make a module for my site that has a lot of maps that show tactics for Americas army. When each small picture is hovered over the pop up appears, but I would like to have the popup image appear at the center of the screen regardless of what image you would like to view. This is the coding I am using http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/

you can view this module on my site ---------> http://www.countdown2chaos.com/modules.php?name=Tactics

Keep in mind this is only a few maps that I will be using. There will eventually be around 50 maps.
Thanks for your time :)

[jscheuer1]

That sort of thing could be worked out by changing the css and layout but, each span would need individual attention as to its positioning. With many images, that would be impractical. There are several image viewing javascripts that could do it much more easily. See the four with 'viewer' in their title on this index:

http://www.dynamicdrive.com/dynamicindex4/indexb.html

[ABizzle]

Thanks for the reply. I will post back with my results.

[ABizzle]

O.k...........I got the lightbox Image viewer implemented for my module, but there seems to be a small issue. When the image loads, part of the image moves behind the header of the website.
You can see the module here ----------->http://www.countdown2chaos.com/modules.php?name=Tactics

Anyone have any ideas on how to fix this problem??
thank you

[jscheuer1]

There could be other problems but, looking at your source code, that's flash. The way that you have it inserted on your page, you should add:


<param name="wmode" value="transparent">

to each of your object tags. If you do that correctly and still have problems, the z-index styles in lightbox.css will need to be added and/or increased for some of the selectors.

[ABizzle]

O.k.........now you completely lost me on this one. I am not all that great with coding, as I am still new to the whole thing.
Is there anyway I can hook up with you on my Teamspeak, MSN messenger, etc. This would be greatly appreciated.

[jscheuer1]

It really isn't rocket science, this is from your source code:


<td height="315"><object type="application/x-shockwave-flash" data="themes/HydroTech/images/logo.swf?link1=index.php&amp;link1text=HOME&amp;link2=modules.php%3Fname%3DDownloads&amp;link2text=DOWNLOADS&amp;link3=modules.php%3Fname%3DForums&amp;link3text=FORUMS&amp;link4=module s.php%3Fname%3DWeb_Links&amp;link4text=WEB+LINKS&amp;link5=modules.php%3Fname%3DYour_Account&amp;link5text=ACCOUNT" width="452" height="315">
<param name="movie" value="themes/HydroTech/images/logo.swf?link1=index.php&amp;link1text=HOME&amp;link2=modules.php%3Fname%3DDownloads&amp;link2text=DOWNLOADS&amp;link3=modules.php%3Fname%3DForums&amp;link3text=FORUMS&amp;link4=module s.php%3Fname%3DWeb_Links&amp;link4text=WEB+LINKS&amp;link5=modules.php%3Fname%3DYour_Account&amp;link5text=ACCOUNT" />
</object></td>
<td width="314" align="center" height="315" valign="top"><object type="application/x-shockwave-flash" data="themes/HydroTech/images/mp3player.swf" width="314" height="315">
<param name="movie" value="themes/HydroTech/images/mp3player.swf" /></object>

Add to it like so:


<td height="315"><object type="application/x-shockwave-flash" data="themes/HydroTech/images/logo.swf?link1=index.php&amp;link1text=HOME&amp;link2=modules.php%3Fname%3DDownloads&amp;link2text=DOWNLOADS&amp;link3=modules.php%3Fname%3DForums&amp;link3text=FORUMS&amp;link4=module s.php%3Fname%3DWeb_Links&amp;link4text=WEB+LINKS&amp;link5=modules.php%3Fname%3DYour_Account&amp;link5text=ACCOUNT" width="452" height="315">
<param name="wmode" value="transparent"><param name="movie" value="themes/HydroTech/images/logo.swf?link1=index.php&amp;link1text=HOME&amp;link2=modules.php%3Fname%3DDownloads&amp;link2text=DOWNLOADS&amp;link3=modules.php%3Fname%3DForums&amp;link3text=FORUMS&amp;link4=module s.php%3Fname%3DWeb_Links&amp;link4text=WEB+LINKS&amp;link5=modules.php%3Fname%3DYour_Account&amp;link5text=ACCOUNT" />
</object></td>
<td width="314" align="center" height="315" valign="top"><object type="application/x-shockwave-flash" data="themes/HydroTech/images/mp3player.swf" width="314" height="315">
<param name="wmode" value="transparent"><param name="movie" value="themes/HydroTech/images/mp3player.swf" /></object>

[ABizzle]

Ok I edited my header.php file, and now I get the following error on my site ------>http://www.countdown2chaos.com/index.php

I will include the header.php file for you to download. Maybe you can see something wrong with it.
FYI.......I made the file a .txt for uploading purposes.
Thank you for your time.

[jscheuer1]

You need to escape the quote symbol (") for PHP like in all the other code in that header file does, ex:


<param name=\"wmode\" value=\"transparent\">

[ABizzle]

o.K...........Thanks Alot for all your help. This worked like a charm. Thanks again.
:) :) :) :)