Results 1 to 10 of 10

Thread: CSS Pop Image viewer

  1. #1
    Join Date
    Mar 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default CSS Pop Image viewer

    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/cs...-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

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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
    Last edited by jscheuer1; 03-04-2007 at 04:44 PM. Reason: spelling
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Mar 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks for the reply. I will post back with my results.
    Last edited by ABizzle; 03-04-2007 at 04:43 PM.

  4. #4
    Join Date
    Mar 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

    HTML Code:
    <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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Mar 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

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

    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=modules.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=modules.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:

    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=modules.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=modules.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>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #8
    Join Date
    Mar 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  9. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

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

    Code:
    <param name=\"wmode\" value=\"transparent\">
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  10. #10
    Join Date
    Mar 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •