Question

我有一个图库功能，在大图像上有一个图像缩放功能。当更改大图像并单击它以激活缩放功能时，它会显示旧图像。我认为变量在javascript中没有变化？

<script type="text/javascript">
function change_img(imgurl) {
    image = document.getElementById('preview');
    image.src = imgurl
    imageURL = imgurl
}
$(document).ready(function(){
    var imageURL = document.getElementById('preview').src;

 $('#ex3').click(function() {
    var imageURL = document.getElementById('preview').src
    $('#ex3')
        .zoom({ on:'click', magnify:1.8, url:imageURL })
        .wrap('<span style="display:inline-block"></span>')
        .css('display', 'block');
 })
});

编辑：这样就可以创建缩略图：

<span class='zoom' id='ex3'>
    <img id="preview" name="preview" src="default.jpg" border="0" align="center"/>
    <span class="zoom-btn"></span>
</span>
<!-- BEGIN thumbs -->
    <div class="thumbnails">
         <img id="thumbimg" onclick="change_img('{PATH}/{thumbs.ID}')" name="img" src="{PATH}/{thumbs.ID}" alt="" />
    </div>
<!-- END thumbs -->

在javascript .zoom中，它应该是＆＃34; url：imageURL＆＃34;的更改路径。任何人都知道如何获得imageURL中的实际路径？

Answer 1

编辑：这会有用吗？ - 老实说，我不确定这个缩放功能是否会改变img源。如果它没有，那么从这里改变它应该相当容易。从搜索开始，似乎有几个你可以使用它。

<span class='zoom' id='ex3' data-src="changedimg.jpg">
    <img id="preview" name="preview" src="default.jpg" border="0" align="center"/>
    <span class="zoom-btn"></span>
</span>

<script type="text/javascript">
$(document).ready(function(){

    $('#ex3').click(function() {
         var newURL = this.data('src')
         $('#ex3')
             .zoom({ on:'click', magnify:1.8, url: newURL })
             .wrap('<span style="display:inline-block"></span>')
             .css('display', 'block'); 
    })
});
</script>

Javascript不要改变变量

1 个答案: