Andy Andy - 15 days ago 7
HTML Question

Popup image from SQL fetch array displays same image

i have some code which pops up new window which works ok and will open the matching image from the database search

JavaScript

<script>
function CenterWindow(windowWidth, windowHeight, windowOuterHeight, url, wname, features) {
var centerLeft = parseInt((window.screen.availWidth - windowWidth) / 2);
var centerTop = parseInt(((window.screen.availHeight - windowHeight) / 2) - windowOuterHeight);
var misc_features;

if (features) {
misc_features = ', ' + features;
}
else {
misc_features = ', status=no, location=no, scrollbars=no, resizable=no';
}

var windowFeatures = 'width=' + windowWidth + ',height=' + windowHeight + ',left=' + centerLeft + ',top=' + centerTop + misc_features;
var win = window.open(url, wname, windowFeatures);
win.focus();
return win;
}
</script>


html

<table align="center" border="0" width="1200px">
<tr onMouseOver="this.className='highlight'" onMouseOut="this.className='normal'">
<td class="tabletext" width="100" align="left"><?php echo $results['siteid']; ?></td>
<td class="tabletext" width="800" align="left"><?php echo $results['description']; ?></td>
<td class="tabletext" width="300" align="left"><a href="javascript:void(0)" onclick="CenterWindow(800,500,50,'../../admin/Test Photo Upload/<?php echo $results['location']; ?>','demo_win');">Open Image</a></td>
</tr>
</table>


I want to change the popup window to have just the image type of popup without the browser which works with this code but gives me the same image for all the links in that particular search, so my code seems to give me the first result in the table?

CSS

<style type="text/css">
#fade{
display: none;
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: white;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=75);
}

#light{
display: none;
position: absolute;
top: 25%;
left: 40%;
width: 300px;
height: 200px;
margin-left: -150px;
margin-top: -100px;
background: #000;
z-index:1002;
overflow:visible;
}
</style>


JavaScript

<script type="text/javascript">
window.document.onkeydown = function (e){
if (!e){
e = event;
}
if (e.keyCode == 27){
lightbox_close();
}
}

function lightbox_open(){
window.scrollTo(0,0);
document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block';
}

function lightbox_close(){
document.getElementById('light').style.display='none';
document.getElementById('fade').style.display='none';
}
</script>


html

<table align="center" border="0" width="1200px">
<tr onMouseOver="this.className='highlight'" onMouseOut="this.className='normal'">
<td class="tabletext" width="100" align="left"><?php echo $results['siteid']; ?></td>
<td class="tabletext" width="800" align="left"><?php echo $results['description']; ?></td>
<td class="tabletext" width="300" align="left"><a href="#" onclick="lightbox_open();">Open Image</a></td>
</tr>
</table>

<div id="light">
<a href="#" onclick="lightbox_close();"><img src="../../admin/Test Photo Upload/<?php echo $results['location'];?>"/></a>
</div>
<div id="fade" onClick="lightbox_close();"></div>


Thank you

<?php
$query = $_POST['txtidforgallery'];
// gets value sent over search form

$min_length = 3;
// you can set minimum length of the query if you want

if(strlen($query) >= $min_length){ // if query length is more or equal minimum length then

$query = htmlspecialchars($query);
// changes characters used in html to their equivalents, for example: < to &gt;

$query = mysql_real_escape_string($query);
// makes sure nobody uses SQL injection

$raw_results = mysql_query("SELECT * FROM photos
WHERE (`siteid` LIKE '%".$query."%') OR (`siteid` LIKE '%".$query."%')") or die(mysql_error());

// * means that it selects all fields, you can also write: `id`, `title`, `text`
// articles is the name of our table

// '%$query%' is what we're looking for, % means anything, for example if $query is Hello
// it will match "hello", "Hello man", "gogohello", if you want exact match use `title`='$query'
// or if you want to match just full word so "gogohello" is out use '% $query %' ...OR ... '$query %' ... OR ... '% $query'

if(mysql_num_rows($raw_results) > 0){ // if one or more rows are returned do following

?>

<table align="center" border="0" width="1200px">
<tr>
<th class="tableheader" width="100" align="left">Site ID</th>
<th class="tableheader" width="800" align="left">Photo Description</th>
<th class="tableheader" width="300" align="left"></th>

</tr>
</table>

<?php
while($results = mysql_fetch_array($raw_results)){
// $results = mysql_fetch_array($raw_results) puts data from database into array, while it's valid it does the loop

Answer

OK, from the information you provided I can see that you have a number of records.

A simple loop which shows all the records would be like this. So I put your loop in the <table> and show every record in a row. each roe has it's own Open Image link, that if you click on each of them, the image of that record would be shown...

Your css looks OK so I did not changed it...

JavaScript

<script type="text/javascript">
window.document.onkeydown = function (e){
    if (!e){
        e = event;
    }
    if (e.keyCode == 27){
        lightbox_close();
    }
}

function lightbox_open(url){
    window.scrollTo(0,0);
    document.getElementById('myImg').src = url;
    document.getElementById('light').style.display='block';
    document.getElementById('fade').style.display='block';  
}

function lightbox_close(){
    document.getElementById('light').style.display='none';
    document.getElementById('fade').style.display='none';
}
</script>

php & html

<table align="center" border="0" width="1200px">
    <?php   
    while($results = mysql_fetch_array($raw_results)){
    ?>
    <tr onMouseOver="this.className='highlight'" onMouseOut="this.className='normal'">
        <td class="tabletext" width="100" align="left"><?php echo $results['siteid']; ?></td>
        <td class="tabletext" width="800" align="left"><?php echo $results['description']; ?></td>
        <td class="tabletext" width="300" align="left"><a href="#" onclick="lightbox_open('../../admin/Test Photo Upload/<?php echo $results['location']; ?>');">Open Image</a></td>
    </tr>
    <?php } ?>
</table>

<div id="light">
    <a href="#" onclick="lightbox_close();"><img id="myImg" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" /></a>
</div>
<div id="fade" onClick="lightbox_close();"></div>

Please note that src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" is just a dummy 1x1 pixel image, because <img> tag requires src property and it can not be empty.

And then you can change it in a way that meets your needs...