Javascript 当用户单击 tumbnil 时,我希望在 html 中弹出该图像
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/4166548/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
I want that image popup in html when user click on tumbnil
提问by Nauman.Khattak
I want that when user click on image thumbnil then the image popup just like it does in this click here
我希望当用户单击图像缩略图时,图像弹出就像在此单击此处一样
plesase tell me the simplest way to do this as i am new to web development. please help me out I am waiting for you kind response.
请告诉我最简单的方法,因为我是 Web 开发的新手。请帮帮我,我在等你的友好回应。
采纳答案by Nick Craver
You can use any of the lightboxplugins for this. There are some other versions out there as well, for example hereand here.
您可以为此使用任何灯箱插件。还有一些其他版本,例如这里和这里。
The usages will vary slightly, but there are examples on each of the sites above. You can google for more, just search for "javascript lightbox" or "jquery lightbox" for more examples.
用法会略有不同,但上面的每个站点都有示例。你可以谷歌搜索更多,只需搜索“ javascript lightbox”或“ jquery lightbox”以获得更多示例。
回答by Matthew Jones
That kind of thing is called a Modal Popup (modal because it prevents interaction with the rest of the page.) There are quite a few implementations available. The JQuery Dialogand the Lightboxare some of the better ones.
这种东西被称为模态弹出窗口(模态是因为它阻止了与页面其余部分的交互。)有很多可用的实现。在JQuery的对话和灯箱是一些更好的的。
回答by Dave Harding
What you are looking at is a modal pop up window: http://www.queness.com/post/77/simple-jquery-modal-window-tutorial
您正在查看的是一个模态弹出窗口:http: //www.queness.com/post/77/simple-jquery-modal-window-tutorial
Above is a tutorial.
以上是教程。
回答by user466764
I suggest you look at jQuery for this one. www.jquery.com Load the jquery library followed by a light box component. There are plenty of these if you Google 'jquery lightbox' you will find what you need.
我建议你看看 jQuery 的这个。www.jquery.com 加载 jquery 库,然后加载一个灯箱组件。如果您在 Google 上搜索“jquery 灯箱”,就会找到很多这些。
回答by kobe
I implemented here
我在这里实施
http://www.art.com/gallery/id--b1822/abstract-posters.htm?ui=9E23F1D932F54F2F8F2E37851C860158
mouseover any image , i show big image.
鼠标悬停在任何图像上,我显示大图像。
Let me know if you want , i can give you the code
如果你想要,请告诉我,我可以给你代码
http://www.allposters.com/-st/Animal-Posters_c622_.htm
change to grid view and mouseover image
更改为网格视图和鼠标悬停图像
It should very simple , you can need to have the big image ready and create the html with big image by metnioning the max height and max width
它应该很简单,您需要准备好大图像并通过设置最大高度和最大宽度来创建带有大图像的html
and show the div with a bigger z-index. Thats it.
并显示具有更大 z-index 的 div。就是这样。