Question

我正在编辑我的问题后深入搜索我的问题基本上我的网站是一个时装展示网站，它显示鞋布和包等现在很明显，我将有很多的照片我用jquery和javascript解决我的问题当用户点击索引页面上的缩略图或者他转到菜单并点击鞋子链接时，javascript会在新标签页中打开更大的图片，但现在我正在浏览php我在下面做了什么

我创建了一个mysql数据库，其中包含图像路径，如图像/ zara /缩略图/鞋子用于缩略图和图像/ zara /鞋子用于较大的图像

当用户点击ex（鞋子）的链接时，链接文本将被这样的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中显示所有可用的鞋子thuumbnails

Answer 1

这是应该有效的jquery代码：

<script>
$(function () {

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

});
</script>

并且有一些好的措施：

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

这是一个工作小提琴：http://jsfiddle.net/DenGp/

Answer 2

您可以在没有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 3

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

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

5 个答案: