我正在编辑我的问题后深入搜索我的问题基本上我的网站是一个时装展示网站,它显示鞋布和包等现在很明显,我将有很多的照片,我用jquery和javascript解决我的问题,当一个用户单击索引页面上的缩略图,或者他转到菜单并单击...
我正在编辑我的问题后深入搜索我的问题基本上我的网站是一个时装展示网站,它显示鞋布和包等现在很明显,我将有很多的照片,我用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文件现在我在这里遇到问题我现在需要的是
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>;
本文标题为:使用php jquery ajax从mysql获取图像并在DIV中的html页面中显示它们
基础教程推荐
- vuecli2.9.6卸载不掉,解决方案 2023-10-08
- 关于前端ajax请求的优雅方案(http客户端为axios) 2023-02-15
- 来自heirloom mailx的HTML电子邮件在linux上 2023-10-25
- 关于ajax网络请求的封装实例 2023-01-20
- vue使用Swiper踩坑解决避坑 2023-07-09
- vue文章下载功能实现 2023-10-08
- vue-devtools安装和使用方法 2023-10-08
- echarts如何实现动态曲线图(多条曲线) 2022-08-30
- 图文示例讲解useState与useReducer性能区别 2023-07-10
- JavaScript markdown 编辑器实现双屏同步滚动 2022-10-22