Question

我已经完成了简单的操作并且实际上添加了一个＆＃34;下载图像＆＃34;锚定到swipebox.js html并使用CSS格式化它，使其与标题/标题一起正常播放。

我的具体问题在于尝试将包含裸目录url的新数据属性添加到图像文件中，并使用该信息将其附加到我创建的锚点的href，以便我可以链接到每个的原始大小图像。

大多数其他JQuery灯箱可以做到这一点，但我坚持使用Swipebox，因为它当时更容易，现在又回来咬我的屁股。

您可以查看我到目前为止所做的工作@ http://kazenracing.com/?page=1964_Griffith

它不如我的其他网站那么漂亮，但人们会想要更大的图像。

你可以看到我正在使用timthumb用于缩略图和查看过的图像，因此在较慢的连接上运行速度会快一些，因此我不需要手动创建三个单独的图像＃34;如果我不关心加载时间，如果我的客户不关心加载时间，我只需要将完整的图像作为已查看的图像，并且仅使用timthumb作为缩略图。

您还可以看到data-href属性已准备就绪，除了我已经考虑过的视频之外的其他所有内容。

修改：

我之前尝试做的是在swipebox JS中添加一个名为＆＃34; setDownload＆＃34;并尝试了很多方法将data-href拉入下载锚点的href。

我试过的最后一个有效，但仅适用于第一张图片：

setDownload : function () {
                    $('a[data-href]').each(function() {
                        $('#swipebox-download').attr('href', $('.swipebox').attr('data-href'));
                    });
                },

我甚至尝试过遵循setTitle的逻辑，但这让我无处可去。

编辑：好的，现在它已成为;谁有更好的想法而不是把它放在title属性中？像这样：

title="Image Name &lt;a id=&quot;swipebox-download&quot; href=&quot;path/to/image.jpg&quot;&gt;Download&lt;/a&gt;"

它确实完成了我想要的东西，但它似乎又脏又错。

Answer 1

嗯，我从懒惰的屁股中解脱出来，只是想到了我想要它的方式。

我遇到的一个大问题是使用数据属性。在我了解它之后，我几乎使用brutaldesign已经存在的属性代码来编写代码。我甚至添加了一个选项来更改下载链接的文本，以防它被用于完全不同的东西。

以下是我添加的代码的内容：

setDownload : function ( index ) {
                var datahref = null;

                $( '#swipebox-download' ).empty();

                if ( elements[ index ] !== undefined ) {
                    datahref = elements[ index ].datahref;
                }

                if ( datahref ) {               
                    $( '#swipebox-download' ).append( plugin.settings.downloadText );
                    $( '#swipebox-download' ).attr( "href", datahref );
                } else {
                    $( '#swipebox-download' ).hide();
                }
            },

所有更改都记录在案here on Github.

嗯，我想，谢谢你没有回答我的问题。

我觉得通过自己解决这个问题比把它交给我更令人满意。

哦，分叉项目页面是here，如果有人想使用它。

我如何在Swipebox中添加下载“按钮”？

1 个答案: