将图像动态加载到 jQuery iViewer 中

load images dynamically into jquery iviewer

本文关键字：jQuery iViewer 加载 图像 动态      更新时间：2023-09-26

有人曾经将图像动态加载到jquery iViewer中吗？目前，它设置为

  $(document).ready(function(){
              $("#images").iviewer(
                   {
                   src: "images/voices/big/page01.jpg", 
                   update_on_resize: false,
                   initCallback: function (object)
                   {
                       $("#in").click(function(){ object.zoom(1);}); 
                       $("#out").click(function(){ object.zoom(-1);}); 
                       $("#fit").click(function(){ object.fit();}); 
                       $("#orig").click(function(){ object.toOrig();}); 
                       $("#update").click(function(){ object.update();}); 
                   }
              });
        });

因此，您必须在页面上放置不同的实例才能显示多个图像。目前，我有用于缩略图的"可滚动"插件，我希望能够将它们的大图像动态加载到iViewer插件中。有人有什么想法吗？

当前示例：http://orangepxl.com/yasuko/voices.php 只有 1 张图像可以工作... :(

请从 github 获取最新版本的插件。Iviewer现在是一个jQuery UI小部件，它具有loadImage方法，因此您可以在单个小部件中显示不同的图像。

您可以使用如下代码加载新图像：

jQuery('.iviewer_selector').iviewer('loadImage', 'http://url.to/image.png');

有关示例，请参阅 https://github.com/can3p/iviewer。

您可以加载所有这些，也可以使用 jquery 隐藏它们，并根据缩略图的点击事件显示它们。

为所有图像执行iViewer，并使用jquery或仅使用css隐藏它们，单击缩略图时，仅显示相应的图像，并隐藏其余部分

相关文章：