SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict
    Join Date
    Aug 2004
    Location
    philmont
    Posts
    315
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    merging 2 ideas for 1 version

    I found 2 pieces of code (javascript and CSS) that allows me to do what I want, but will not work together. The javascript creates a popup with an image in the window (whatever size I place for my window size to be, the image will fill it nicely).

    The CSS allows a mouseover effect which would allow me to place documentation about the image.

    What I'm looking for is to be able to create the popup, with a sidebar that lists all of the information regarding the image. Is this possible? How would I go about doing that? My attempts have failed so far.

    CSS mouseOver:
    Code:
    <style type="text/css">
    
    /*Credits: Dynamic Drive CSS Library */
    /*URL: http://www.dynamicdrive.com/style/ */
    
    .thumbnail{
    position: relative;
    z-index: 0;
    }
    
    .thumbnail:hover{
    background-color: transparent;
    z-index: 50;
    }
    
    .thumbnail span{ /*CSS for enlarged image*/
    position: absolute;
    background-color: lightyellow;
    padding: 5px;
    left: -100px;
    border: 1px dashed gray;
    visibility: hidden;
    color: black;
    text-decoration: none;
    }
    
    .thumbnail span img{ /*CSS for enlarged image*/
    border-width: 0;
    padding: 2px;
    }
    
    .thumbnail:hover span{ /*CSS for enlarged image on hover*/
    visibility: visible;
    top: 0;
    left: 60px; /*position where enlarged image should offset horizontally */
    
    }
    
    </style>
    javascript popup:
    Code:
    <script>
    
    // Script Source: CodeLifter.com
    // Copyright 2003
    // Do not remove this notice.
    
    // SETUPS:
    // ===============================
    
    // Set the horizontal and vertical position for the popup
    
    PositionX = 75;
    PositionY = 75;
    
    // Set these value approximately 20 pixels greater than the
    // size of the largest image to be used (needed for Netscape)
    
    defaultWidth  = 500;
    defaultHeight = 500;
    
    // Set autoclose true to have the window close automatically
    // Set autoclose false to allow multiple popup windows
    
    var AutoClose = true;
    
    // Do not edit below this line...
    // ================================
    if (parseInt(navigator.appVersion.charAt(0))>=4){
    var isNN=(navigator.appName=="Netscape")?1:0;
    var isIE=(navigator.appName.indexOf("Microsoft")!=-1)?1:0;}
    var optNN='scrollbars=no,width='+defaultWidth+',height='+defaultHeight+',left='+PositionX+',top='+PositionY;
    var optIE='scrollbars=no,width=150,height=100,left='+PositionX+',top='+PositionY;
    function popImage(imageURL,imageTitle){
    if (isNN){imgWin=window.open('about:blank','',optNN);}
    if (isIE){imgWin=window.open('about:blank','',optIE);}
    with (imgWin.document){
    writeln('<html><head><title>Loading...</title><style>body{margin:0px;}</style>');writeln('<sc'+'ript>');
    writeln('var isNN,isIE;');writeln('if (parseInt(navigator.appVersion.charAt(0))>=4){');
    writeln('isNN=(navigator.appName=="Netscape")?1:0;');writeln('isIE=(navigator.appName.indexOf("Microsoft")!=-1)?1:0;}');
    writeln('function reSizeToImage(){');writeln('if (isIE){');writeln('window.resizeTo(300,300);');
    writeln('width=300-(document.body.clientWidth-document.images[0].width);');
    writeln('height=300-(document.body.clientHeight-document.images[0].height);');
    writeln('window.resizeTo(width,height);}');writeln('if (isNN){');
    writeln('window.innerWidth=document.images["George"].width;');writeln('window.innerHeight=document.images["George"].height;}}');
    writeln('function doTitle(){document.title="'+imageTitle+'";}');writeln('</sc'+'ript>');
    if (!AutoClose) writeln('</head><body bgcolor=000000 scroll="no" onload="reSizeToImage();doTitle();self.focus()">')
    else writeln('</head><body bgcolor=000000 scroll="no" onload="reSizeToImage();doTitle();self.focus()" onblur="self.close()">');
    writeln('<img name="George" src='+imageURL+' style="display:block" width="800px"></body></html>');
    close();
    }}
    
    </script>



    code before the javascript popup:
    PHP Code:
    <div id='text' style='position:absolute; left:17%; top:50px; width:73%; z-index:4'>

                    <?php
       $pics_id 
    mysql_query"SELECT * FROM var_a WHERE photoid = '$gpic' AND category = '$gcat'" );

                while( 
    $p_id_row mysql_fetch_array($pics_id)) {
        
       
    $p_id       $p_id_row['photoid'];
       
    $p_name     $p_id_row['photo_name'];
       
    $p_cats     $p_id_row['category'];
       
    $filename $p_name;

    ?>
     <a href="javascript:popImage('<?php echo $images_dir."/".$filename;?>','Some Title')">
           <?php
             
    echo "<img src='".$images_dir."/".$p_name."' width='90%' /></a><br />".
                   
    "<br /><a class='thumbnail' href='#thumb'>Photo Details<span>".
                   
    "<span>";

    part that has the css rollover
    PHP Code:
                     $pop_cats = mysql_query( "SELECT id, title, text FROM var_category WHERE id = '$gcat'" );
    list($pop_id, $pop_title, $pop_text) = mysql_fetch_array( $pop_cats );

       $pics_id_pop = mysql_query( "SELECT * FROM var_a WHERE photoid = 'gpid' AND category = '$gcat'" );



                while( $p_id_row_pop = mysql_fetch_array($pics_id_pop)) {
        
       $pop_id       = $p_id_row_pop['photoid'];
       $pop_name     = $p_id_row_pop['photo_name'];
       $pop_cats     = $p_id_row_pop['category'];
       $pop_text     = $p_id_row_pop['commenttext'];
       $pop_building = $p_id_row_pop['building'];
       $pop_designed = $p_id_row_pop['designed'];
       $pop_location = $p_id_row_pop['location'];
    ?>

    <table width="200" border="1">
      <tr>
        <td>Building:</td>
        <td><?php echo $pop_building;?></td>
      </tr>
      <tr>
        <td>Designed By:</td>
        <td><?php echo $pop_designed;?></td>
      </tr>
      <tr>
        <td>Location:</td>
        <td><?php echo $pop_location;?></td>
      </tr>
      <tr>
        <td>Comments:</td>
       
      </tr>

    <?php echo "<tr><td>".$pop_text"</td></tr></table>";


                  
                  
                  
        echo 
    "</span></a>";
            
      
                  
         }


    ?>
    </div>


    </div>

    they work fine independently, but I havent been able to get them to work together. I would like the table to be inserted as a side bar to the popup image.

    [image_within_the_popup][text]

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    HI,

    I think you'll need to provide a link of what you've got so that we have something to work with. There are too many separate issues there to build a local version and we really need the live version to play with and to understand what you want.


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
  •