我将如何在刷卡框中添加下载“按钮”


How would I go about adding a download "button" in Swipebox?

我已经完成了简单的一点,实际上在滑动框中添加了"下载图像"锚点.js html并使用CSS对其进行格式化,以使其与标题/标题一起正确播放。

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

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

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

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

您可以看到我同时使用timthumb来显示缩略图和查看的图像,因此在较慢的连接上运行速度会更快,因此我不必"手动"创建三个单独的图像。如果我不关心加载时间,如果我的客户不关心加载时间,我只会让查看的完整图像,并且只使用 timthumb 作为缩略图。

您还可以看到一个 data-href 属性,可以继续使用除视频之外的所有内容,我已经考虑到了。

编辑

我之前尝试做的是在滑动框JS中添加一个名为"setDownload"的功能,并尝试了许多方法将数据href拉入下载锚点的href中。

我尝试的最后一个有效但仅适用于第一张图像是:

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

我甚至尝试遵循setTitle的逻辑,但这让我一无所获。

编辑:好的,现在它变成了;谁有比把它放在标题属性中更好的主意?这样:

title="Image Name <a id="swipebox-download" href="path/to/image.jpg">Download</a>"

它确实实现了我想要的,但它看起来很肮脏和错误。

好吧,我摆脱了懒惰的屁股,只是想出了我最初想要的方式。

我遇到的一个大问题是使用数据属性。在我了解了它之后,我几乎使用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();
                }
            },

所有更改都记录在Github上。

好吧,我想,谢谢你没有回答我的问题。

发现自己弄清楚比把它交给我更有成就感。

哦,如果有人想使用它,分叉项目页面就在这里。