ICode9

精准搜索请尝试: 精确搜索
首页 > 数据库> 文章详细

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

2019-06-13 19:11:10  阅读:171  来源: 互联网

标签:jquery php mysql ajax html


我正在编辑我的问题后深入搜索我的问题基本上我的网站是一个时装展示网站,它显示鞋布和包等现在很明显,我将有很多的照片,我用jqueryjavascript解决我的问题,当一个用户单击索引页面上的缩略图,或者他转到菜单并单击鞋子链接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文件现在我在这里遇到问题我现在需要的是

that how will php make search on the basis of that var txt in the database retrieve the thumbnails of the shoes open a new tab say(shoes.html) and display all the available shoes thuumbnails in divs

解决方法:

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

标签:jquery,php,mysql,ajax,html
来源: https://codeday.me/bug/20190613/1234829.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有