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

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

javascript jquery html css sql

Javascript SQL fetch数组中的弹出图像显示相同的图像,javascript,jquery,html,css,sql,Javascript,Jquery,Html,Css,Sql,我有一些代码，弹出新窗口，工作正常，将打开数据库搜索匹配的图像 JavaScript <script> function CenterWindow(windowWidth, windowHeight, windowOuterHeight, url, wname, features) { var centerLeft = parseInt((window.screen.availWidth - windowWidth) / 2); var centerTop = par

我有一些代码，弹出新窗口，工作正常，将打开数据库搜索匹配的图像

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>

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

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


功能中心窗口（windowWidth、windowHeight、windowOuterHeight、url、wname、功能）{
var centerLeft=parseInt（（window.screen.availWidth-windowWidth）/2）；
var centerTop=parseInt（（window.screen.availHeight-windowHeight）/2-windowOuterHeight）；
var杂项特征；
如果（功能）{
其他要素='，'+要素；
}
否则{
杂项功能='、状态=否、位置=否、滚动条=否、可调整大小=否'；
}
var windowFeatures='width='+windowWidth+'，height='+windowHeight+'，left='+centerLeft+'，top='+centerTop+misc_功能；
var win=window.open（url、wname、windowFeatures）；
win.focus（）；
回归胜利；
}

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>

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

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

我想将弹出窗口更改为只有图像类型的弹出窗口，而不使用浏览器，浏览器使用此代码，但在特定搜索中为所有链接提供相同的图像，因此我的代码似乎为我提供了表中的第一个结果

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>


#褪色{
显示：无；
位置：固定；
最高：0%；
左：0%；
宽度：100%；
身高：100%；
背景色：白色；
z指数：1001；
-moz不透明度：0.8；
不透明度：.80；
过滤器：α（不透明度=75）；
}
#轻的{
显示：无；
位置：绝对位置；
最高：25%；
左：40%；
宽度：300px；
高度：200px；
左边距：-150px；
利润上限：-100px；
背景：#000；
z指数：1002；
溢出：可见；
}

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>

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

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


window.document.onkeydown=函数（e）{
如果（！e）{
e=事件；
}
如果（e.keyCode==27）{
灯箱关闭（）；
}
}
功能灯箱_open（）{
滚动到（0,0）；
document.getElementById（'light'）.style.display='block'；
document.getElementById（'fade'）.style.display='block'；
}
功能灯箱_关闭（）{
document.getElementById（'light'）.style.display='none'；
document.getElementById（'fade'）.style.display='none'；
}

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>

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

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

多谢各位

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

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>

好的，从您提供的信息中，我可以看出您有许多记录
显示所有记录的简单循环如下所示。因此，我将您的循环放在
中，并将每条记录显示在一行中。每个roe都有自己的打开图像链接，如果你点击其中的每一个，就会显示该记录的图像
你的css看起来不错，所以我没有改变它
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>

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

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


window.document.onkeydown=函数（e）{
如果（！e）{
e=事件；
}
如果（e.keyCode==27）{
灯箱关闭（）；
}
}
功能灯箱打开（url）{
滚动到（0,0）；
document.getElementById（'myImg'）.src=url；
document.getElementById（'light'）.style.display='block'；
document.getElementById（'fade'）.style.display='block'；
}
功能灯箱_关闭（）{
document.getElementById（'light'）.style.display='none'；
document.getElementById（'fade'）.style.display='none'；
}

php&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>

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

<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/acwaaaqabaacads=“
只是一个虚拟1x1像素图像，因为属性不能为空
然后，您可以根据自己的需要进行更改…
那么，您真正的问题是什么？因为我看不到你的代码有任何问题。将显示您在$results['location']
中拥有的任何内容。我在你的代码或任何循环中没有看到多个图像来显示多个图像$results['location']是一个图像数据库，但只有第一个图像会显示，location有第1行=IMG_1.jpg，第2行有IMG 2.jpg，等等，但每个链接都显示IMG 1“function CenterWindow”代码工作正常，但“lightbox_open”当然没有，因为你必须把它放在一个循环里！！您能分享您的代码部分吗？您正在将数据从数据库中提取到$results
？工作很好，非常感谢您的支持。如果这个答案对你有帮助，那么请选择它作为被接受的答案并给它一个投票：）请在你的php文件中添加这个代码：如果你不使用fancyBox插件，这个代码将一事无成