添加（替换）指向图片库幻灯片 Web 部件中的图片的超链接

Question

在我们的团队网站上，我们添加了一个 Web 部件，即“图片库幻灯片”Web 部件。目前，单击幻灯片中滚动的图像会将浏览器定向到图像的 URL。我想修改它以指向我选择的任何其他 URL。

我尝试在页面上使用我自己的脚本强制修改幻灯片 Web 部件生成的 javascript。查看源代码，图片库使用一个实际设置链接的 var，它称为“linkArray”：

var pictureArray = ['http://intranet/HomePicture/_w/image1.jpg','http://intranet/HomePicture/_w/image2.jpg'];
var linkArray = ['http://intranet/HomePicture/image1.jpg','http://intranet/HomePicture/image2.jpg'];
var titleArray = ['',''];
var descriptionArray = ['',''];
var heightArray = [268,268];
var widthArray = [383,383];

使用我自己的脚本，我尝试清除数组并将我自己的链接插入其中，但由于某种原因，链接仅更新（即我的脚本的函数在第一张图像更改后运行。即使我手动更改第一个图像的 href 标签，脚本仍然认为“第一个”图像是幻灯片滚动到的第二个图像。有没有办法强制函数在页面加载时立即覆盖现有的 javascript？

Answer 1

在耗尽后，在尝试强制页面的Web部件映像开始从加载的第一个项目开始更改链接时，我发现了一个解决方法解决方法，它是简单地在我的数组上使用旋转函数。由于该行为将图像到超链接关联1项偏移，因此旋转I分配给图像链接的数组，也与它们相匹配。

Answer 2

图片库幻灯片 Web 部件的工作原理

图片项目通过 SPQuery 检索 图片库 结果保存在内部数组中 ImageInfo 条目

public struct ImageInfo
    {
      public int width;
      public int height;
      public string src;
      public string fullImageSrc;
      public string title;
      public string descrption;
    }  

这些信息在客户端呈现并存储在以下数组中：

var pictureArray = [...];
var linkArray = [...];
var titleArray = [...];
var descriptionArray = [...];
var heightArray = [...];
var widthArray = [...];

然后在客户端初始化幻灯片控件：

 var slideshowObject = new SlideshowObject(slideshowObjectId, pictureArray, linkArray, titleArray, descriptionArray, heightArray, widthArray, transitionTime, mode);
 ChangePic(slideshowObject);    

如何处理幻灯片中的图片

它可以通过重写来实现 SlideshowObject 构造函数，在这种情况下，可以在创建 SlideshowObject 时提供额外的逻辑。

例如，以下示例演示了如何排除没有标题的图片，使其不显示在 Slideshow 中：

//Overridden SlideshowObject constructor with method for excluding pictures  
function SlideshowObjectInitializer() {
   SlideshowObject = (function(SlideshowObjectOrig) {

      return function() {

       //Exclude pictures
       if(typeof excludePic != 'undefined') {
          for(i=0,k=0;i<arguments[1].length;i++) {
             var imageInfo = {src: arguments[1][i], fullImageSrc: arguments[2][i], title: arguments[3][i],description: arguments[4][i], height: arguments[5][i], width: arguments[6][i]};
             if(excludePic(imageInfo)) {
                for(j=1;j<7;j++) {
                    arguments[j].splice(i, 1);
                }  
                i--;
             } 
          }
       }
       //Call original SlideshowObject constructor 
       return SlideshowObjectOrig.apply(this, arguments);
     };
  })(SlideshowObject);
}   

//Exclide pictures with no titles
function excludePic(imageInfo) {
    return (imageInfo.title.length == 0);
}

ExecuteOrDelayUntilScriptLoaded(SlideshowObjectInitializer, 'imglib.js');

---

请关注我的博客 邮政 了解详情。

Answer 3

听起来第一个图像在 JavaScript 执行之前就已经渲染好了。想法是直接在 DOM 中“手动”定位并更改该图像的 href 标签。