Question

我有一个带有缩放的工作图像查看器，我从这里得到： http://www.elevateweb.co.uk/image-zoom/examples

此代码适用于我的产品视图页面，需要从mysql中提取多张图片。我尝试用PHP将文件路径回显到＆＃34; zoom_01＆＃34;上的javascript所针对的html。 ID以及javascript本身（图片浏览器所需）

我得到一个要显示的图像，但随后缩放功能消失了。如果值是硬编码或回显的话，javascript是否应该完全相同？如果你能想到任何尝试，我会非常感激。

以下是相关代码：

<div="display"><img id="zoom_01" src='<?php echo $onesmall ?>' 
data-zoom-image="<?php echo $onelarge ?>"/> </div>

$('#zoom_01').elevateZoom({
zoomType: "inner",
cursor: "crosshair",
zoomWindowFadeIn: 1000,
zoomWindowFadeOut: 1500,
}); 

$( "#gal_1" ).on( "click", function() {
document.getElementById("zoom_01").src=<?php echo $onesmall?>;
$("#zoom_01").data('zoom-image',<?php echo $onelarge?>);
$('#zoom_01').elevateZoom({
zoomType: "inner",
cursor: "crosshair",
zoomWindowFadeIn: 1000,
zoomWindowFadeOut: 1500
});
});

Answer 1

你说它与JavaScript相同是正确的，因为它是在整个服务器端代码执行完毕后执行的 - 但你错过了一个关键的东西：

document.getElementById("zoom_01").src=<?php echo $onesmall?>; // syntax error!
$("#zoom_01").data('zoom-image',<?php echo $onelarge?>); // syntax error!

将创建如下内容：

document.getElementById("zoom_01").src=my-small-img.jpg; // syntax error!
$("#zoom_01").data('zoom-image',my-image-path.jpg); // syntax error!

没有引号！

将其更新为：

document.getElementById("zoom_01").src='<?php echo $onesmall?>';
$("#zoom_01").data('zoom-image','<?php echo $onelarge?>');

将文件路径转换为Javascript中断图像缩放查看器

1 个答案: