SQL fetch 数组中的弹出图像显示相同的图像

Posted 2023-03-23

【中文标题】SQL fetch 数组中的弹出图像显示相同的图像

【英文标题】：Popup image from SQL fetch array displays same image

【发布时间】：2016-11-25 09:52:20

【问题描述】：

我有一些代码可以弹出新窗口，它可以正常工作，并且会从数据库搜索中打开匹配的图像

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" >
    <tr onMouseOver="this.className='highlight'" onMouseOut="this.className='normal'">
        <td class="tabletext"  align="left"><?php echo $results['siteid']; ?></td>
        <td class="tabletext"  align="left"><?php echo $results['description']; ?></td>
        <td class="tabletext"  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" >
    <tr onMouseOver="this.className='highlight'" onMouseOut="this.className='normal'">
        <td class="tabletext"  align="left"><?php echo $results['siteid']; ?></td>
        <td class="tabletext"  align="left"><?php echo $results['description']; ?></td>
        <td class="tabletext"  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" >
        <tr>
            <th class="tableheader"  align="left">Site ID</th>
            <th class="tableheader"  align="left">Photo Description</th>
            <th class="tableheader"  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

【问题讨论】：

那么你真正的问题是什么？因为我看不到您的代码有任何问题。 $results['location'] 中的任何内容都会显示出来。我在您的代码中看不到一张以上的图片，也没有看到任何显示多张图片的循环

$results['location'] 是一个图像数据库，但只会显示第一个，位置有第 1 行 = IMG_1.jpg，第 2 行有 IMG 2.jpg 等，但每个链接都会显示IMG 1 'function CenterWindow' 代码工作正常，但不是 'lightbox_open'

当然可以，因为你必须把它放在一个循环中！！

能否将您从数据库中获取数据的代码部分分享给$results？

【参考方案1】：

好的，从你提供的信息我可以看出你有很多记录。

显示所有记录的简单循环是这样的。所以我把你的循环放在<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" >
    <?php   
    while($results = mysql_fetch_array($raw_results))
    ?>
    <tr onMouseOver="this.className='highlight'" onMouseOut="this.className='normal'">
        <td class="tabletext"  align="left"><?php echo $results['siteid']; ?></td>
        <td class="tabletext"  align="left"><?php echo $results['description']; ?></td>
        <td class="tabletext"  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 属性并且不能为空。

然后您可以按照自己的需要进行更改...

【讨论】：

完美运行，非常感谢

不客气。如果这个答案对您有帮助，请选择它作为接受的答案并给它一个 upvote :)

【参考方案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>

【讨论】：

请在您的 php 文件中添加此代码：

如果您不使用 fancyBox Plugin

，此代码将不起作用