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

好的，根据您提供的信息，我可以看到您有许多记录。

显示所有记录的简单循环将是这样的。所以我把你的循环放在<table>中并连续显示每条记录。每个roe都有自己的 Open Image 链接，如果你点击它们中的每一个，那么该记录的图像就会显示出来......

你的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＆amp; 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>

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

2 个答案: