使用 php jquery ajax 从 mysql 获取图像并将它们显示在 DIV 内的 html 页面中

Question

在深入搜索我的问题后，我正在编辑我的问题，基本上我的网站是一个时装展示网站，它展示鞋布和包包等当用户单击索引页面上的缩略图或转到菜单并单击鞋子链接时，javascript会在新选项卡中打开较大的图像，但现在我正在切换到php，我所做的如下

1. 我创建了一个 mysql 数据库，其中包含图像的路径，例如用于缩略图的 images/zara/thumbnails/shoes 和用于较大图像的 images/zara/shoes

2. 当用户点击 ex(shoes) 的链接时，jquery 会像这样抓取链接文本

      $(document).ready(function() {
       $('ul.sub_menu a').click(function() {
           var txt = $(this).text();  
               $.ajax({
               type: 'POST',
               url: 'thegamer.php',
               data: {'txt'}
               });
       });
   });
   

现在进一步将它传递给 php 文件，我现在面临一个问题，我现在需要的是

php 将如何根据数据库中的 var txt 进行搜索以检索鞋子的缩略图打开一个新选项卡说（shoes.html）并在 div 中显示所有可用的鞋子缩略图

Answer 1

这是应该工作的 jquery 代码：

<script>
$(function () {

  $(document).on('click', 'div.prodcls img', function (e) {
    e.preventDefault();
    window.open($(this).attr('src').replace('/thumbnails', ''), '');
  });

});
</script>

还有一些 css 可以很好地衡量：

<style>
div.prodcls img:hover {
  cursor: pointer;
}
</style>

这是一个有效的小提琴：http://jsfiddle.net/DenGp/

Answer 2

CSS：

#imagePopup{ float:left; z-index:10; position: absolute;} 

添加一些定位

HTML:

<div id="prodtwoid" class="prodcls">
<img src="images/thumbnail/zara/2.png" alt="ZARA"/>
</div>

<div id="prodthreeid" class="prodcls">
<img src="images/thumbnail/puma/1.png" alt="PUMA"/>
</div>

<div id="prodfourid" class="prodcls">
<img src="images/thumbnail/hermes/1.png" alt="HERMES"/>
</div>
//This is you popup div
<div id='imagePopup' style='display:none'>
</div>

JS：

$('.prodcls').click(function(){
   var src = $(this).attr('src').replace('/thumbnail', '');
    $("#imagePopup").html("<img src='"+src+"'/>")
    $("#imagePopup").toggle();
});

更新答案：

HTML：（给每张图片一个链接）：

<a href='showImage.php?img=path/of/image.jpg'><img src='path/of/thumb.jpg'/></a>

showImage.php:

$sImagePath = $_GET['img'];
echo "<div class='imgDiv'>";
echo "<img src='$sImagePath' />";
echo "</div>;

Answer 3

您可以在没有 jQuery 的情况下在新的浏览器选项卡中打开实际图像：

例如：

<div id="prodoneid" class="prodcls">
  <a href='images/zara1.png' target='_blank'>
    <img src="images/thumbnail/zara/1.png" alt="ZARA"/>
  </a>
</div>

Answer 4

也许您真正需要的是灯箱？看看这个库：http://www.huddletogether.com/projects/lightbox2/

Answer 5

您的 AJAX 代码中有错误（您放弃包含实际的 var：

$(document).ready(function() {
    $('ul.sub_menu a').click(function() {
        var txt = $(this).text();  
            $.ajax({
            type: 'POST',
            url: 'thegamer.php',
            data: {'txt':txt}  //added :txt here
            });
    });
});

现在在 PHP 中：

$txt = $_GET['txt'];
//Now lookup $txt in you msyql db
//And echo the result, so JS can read it.