我已经完成了简单的一点,实际上在滑动框中添加了"下载图像"锚点.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上。
好吧,我想,谢谢你没有回答我的问题。
我发现自己弄清楚比把它交给我更有成就感。
哦,如果有人想使用它,分叉项目页面就在这里。