Question

我使用的是JavaScript复合媒体显示器，并且尝试对其实施Fancybox（jquery插件，https://fancyapps.com/fancybox/3/）。这是我要自定义的代码：

media = $('<' + mediaType + '>', {
    src: c['Media Link'],
});

（其中：mediaType = img或音频或视频，Media Link = photos / image.jpg和$用于Fancybox jQuery指令）

此代码生成以下输出：

<img src="photos/image.jpg" />

我想对其进行自定义，以便它生成此输出：

<a href="photos/image.jpg" data-fancybox data-caption="Caption for single image">
<img src="photos/image.thumbnail.jpg" alt="" />
</a>

到目前为止，我已经尝试过：

media = $('<a href=' + c['Media Link'] + ' data-fancybox data-caption="Caption">’ + ' < ' + mediaType + ' > ', {
src: c['Media Link '] + "_thumbnail.jpg",
});

这是代码上下文：

var mediaTypes = {
'jpg': 'img',
'JPG': 'img',
'jpeg': 'img',
'svg': 'img',
'png': 'img',
'mp3': 'audio',
'ogg': 'audio',
'wav': 'audio',
'mp4': 'video',
}
var mediaExt = c['Media Link'].split('.').pop();
var mediaType = mediaTypes[mediaExt];
if (mediaType) {
media = $('<' + mediaType + '>', {
    src: c['Media Link'],
    controls: mediaType == 'audio' ? 'controls' : '',
});

预期结果是在填充屏幕的灯箱中打开了图像/视频/声音。到目前为止，我的尝试未能实现这一目标。

如何自定义复杂的代码以生成输出？

0 个答案: