拆分 fancybox 标题并从中获取前几个字母并更改颜色

Question

下面是我的fancybox代码

$(".fancybox").fancybox({           
        arrows : true,
        openEffect : 'elastic',
        closeEffect : 'elastic',
        loop: false,            
        width: winWid,
        height: winHi,
        fitToView: true,

        helpers : {
            title: {
                type: 'inside',
                position: 'top'
            }
        }           
    });

我已将文件名作为标题，所以我得到的标题类似于

folder/someimage.jpg

我在我的 fancybox 顶部显示这个标题，这里我需要的是更改文件夹名而不是文件名的颜色，比如

folder(red color)/someimage.jpg(normal black color)

任何帮助

Answer 1

您可以使用 afterLoad 回调重新组合 title。

您首先需要用斜杠 / split() title 并将 文件夹 部分包装在 span元素如：

var tFolder = "<span class='red'>" + this.title.split("/")[0] + "</span>";

然后添加一个 CSS 规则来将颜色设置为 span 元素的 class 如：

.red {
    color: #ff0000;
}

最后，重新组合 title 将文件夹部分与第二部分（图像名称）连接起来，如：

this.title = tFolder + "/" + this.title.split("/")[1];

完整代码：

jQuery(document).ready(function ($) {
    $(".fancybox").fancybox({
        // API options
        helpers: {
            title: {
                type: 'inside',
                position: 'top'
            }
        },
        afterLoad: function () {
            var tFolder = "<span class='red'>" + this.title.split("/")[0] + "</span>";
            this.title = tFolder + "/" + this.title.split("/")[1];
        }
    }); // fancybox
}); // ready

见JSFIDDLE

拆分 fancybox 标题并从中获取前几个字母并更改颜色

Split fancybox title and get first few letters from it and change color

jquery

title

fancybox