画廊链接答案

【问题标题】：Galleriffic links画廊链接
【发布时间】：2011-03-07 11:55:44
【问题描述】：

我的页面上有一个 Galleriffic 幻灯片。现在，“大”图像链接到幻灯片中的下一个图像。我怎样才能让它链接到外部文件？

【问题讨论】：

【解决方案1】：

是的 - 在http://prestondentalgroup.com.au/downloads.html 幻灯片图像上的超链接允许查看者打开/保存 PDF 文档。效果很好（一旦我破译了如何编写 example_path 并将 /project/ 替换为 PDF 文件的 URL（包括子文件夹）。因此，要从网站的 images/downloads/ 文件夹链接到 readme.pdf， example_path 变为 images/downloads/readme.pdf
和 /project/ 变成 http://prestondentalgroup.com.au/

【讨论】：

【解决方案2】：

首先，您必须在无序列表中添加一个隐藏的 div 或 span 标签：

<li>
  <a class="thumb" href="/imageurl/image.gif">imageititle</a>
  <span id="project-path" style="display:none;">example_path</span>
</li>

然后，将此代码添加到您的galleriffic.js 文件中。您正在从 span 元素中获取路径：

addImage: function(listItem, thumbExists, insert, position) {
                    var $li = ( typeof listItem === "string" ) ? $(listItem) : listItem;                
                    var $aThumb = $li.find('a.thumb');
                **  var $path = $li.find('#project-path');
                **  var projectPath = $path.text();
                    var slideUrl = $aThumb.attr('href');
                    var title = $aThumb.attr('title');
                    var $caption = $li.find('.caption').remove();
                    var hash = $aThumb.attr('name');

然后，将值添加到图像变量中：

            var imageData = {
        **      projectPath:projectPath,
                title:title,
                slideUrl:slideUrl,
                caption:$caption,
                hash:hash,
                gallery:this,
                index:position
            };

现在告诉画廊在全尺寸画廊图片上使用新路径更改链接：

            // Construct new hidden span for the image
            var newSlide = this.$imageContainer
                .append('<span class="image-wrapper current"><a class="advance-link" rel="history" href="/project/'+imageData.projectPath+'" title="'+imageData.title+'">&nbsp;</a></span>')
                .find('span.current').css('opacity', '0');

并在此处注释掉图库点击操作，以便您的用户可以使用包装图片的普通链接：

                        newSlide.find('a')
                .append(imageData.image)
                //.click(function(e) {
                    //gallery.clickHandler(e, this);
                //})
                ;

【讨论】：

非常感谢，我会试试这个，让你知道我的进展情况。