单击时图像以全尺寸显示
Image show in full size when click
我正在使用 kendo 移动设备 和 cordova plugins
来构建我的应用程序。
我有这样的场景,我需要在点击用户个人资料图片时向用户显示 his/her 全屏个人资料图片。
如果有 plugin
可用或有任何可能对我有帮助的信息,请建议我,我将图像存储在数据库中为 base64 format
。
我正在使用Knockout js to bind image in Base64 format
提前致谢
如果您不想使用任何插件,是的,您可以使用 Queness 的简单 jQuery Modal Window 技术。使用几乎相同的代码,并进行这些更改。
<a class="image-thumb" href="image.jpg">
<img src="image-thumb.jpg" alt="Image" />
</a>
而在代码中,你可以这样改:
$('a.image-thumb').click(function(e) {
使图像在模态中显示的进一步更改window,您可以这样做:
<div id="dialog" class="window">
<img src="" alt="Image" />
</div>
并且您需要使用 JavaScript 替换它!而不是:
$(id).fadeIn(2000);
这样使用:
$(".window").find("img").attr("src", $(this).attr("href"));
$(".window").fadeIn(2000);
给你! :)
我正在使用 kendo 移动设备 和 cordova plugins
来构建我的应用程序。
我有这样的场景,我需要在点击用户个人资料图片时向用户显示 his/her 全屏个人资料图片。
如果有 plugin
可用或有任何可能对我有帮助的信息,请建议我,我将图像存储在数据库中为 base64 format
。
我正在使用Knockout js to bind image in Base64 format
提前致谢
如果您不想使用任何插件,是的,您可以使用 Queness 的简单 jQuery Modal Window 技术。使用几乎相同的代码,并进行这些更改。
<a class="image-thumb" href="image.jpg">
<img src="image-thumb.jpg" alt="Image" />
</a>
而在代码中,你可以这样改:
$('a.image-thumb').click(function(e) {
使图像在模态中显示的进一步更改window,您可以这样做:
<div id="dialog" class="window">
<img src="" alt="Image" />
</div>
并且您需要使用 JavaScript 替换它!而不是:
$(id).fadeIn(2000);
这样使用:
$(".window").find("img").attr("src", $(this).attr("href"));
$(".window").fadeIn(2000);
给你! :)