弹出获取图像阵列显示同一图像

Question

我有一些代码，弹出该工程确定，并从数据库中搜索打开匹配图像

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

我想改变弹出窗口，只有图像没有浏览器的类型弹出式窗口，它使用了这段代码，但给了我特定搜索中所有链接的相同图像，所以我的代码似乎给了我表中的第一个结果？

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> 

谢谢

<?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 1

OK，从信息提供你我能看到你有一个数量的记录。

显示所有记录的简单循环就是这样。所以我把你的循环放在<table>里，并且连续显示每一条记录。每个鱼子都有它自己的打开图像链接，如果你点击他们每个人，该记录的图像会显示在...

你的CSS看起来不错，所以我没有改变它...

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

请注意，src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="只是一个虚拟的1x1像素图像，因为<img>标记需要src属性，并且它不能为空。

然后，你可以改变它，以满足您的需求...

Answer 2

HTML

<a class="fancybox" rel="group" href="/img<?php echo $user_id ?>/<?php echo $value ?>"> 
    <div class="col-md-4 col-xs-4 crest-pic border-slide no-padd row_gal"> 
     <div style="background: url('/img<?php echo $user_id ?>/<?php echo $value ?>'); "> 
     </div> 
    </div> 
</a>