baguetteBox.js兼容无a标签外围的img图片

发布于 / JavaScript / Comments Off on baguetteBox.js兼容无a标签外围的img图片

baguetteBox.js是一个比较好用的灯箱(悬浮窗图片)插件,项目地址在

https://github.com/feimosi/baguetteBox.js/blob/dev/src/baguetteBox.js

它所匹配的格式为

<div class="images">
    <a href="IMAGE_URL">
        <img src="IMAGE_URL" />
    </a>
</div>

使用一行代码即可启用灯箱

baguetteBox.run('.images')

但是目前数据库所存放的内容的格式为

<div class="images">
    <img src="IMAGE_URL" />
</div>

没有a标签外围,这就需要对baguetteBox.js的源码做一些修改:

1,匹配a标签改为匹配img标签:

找到代码片段:

if (galleryElement.tagName === 'A') {
                tagsNodeList = [galleryElement];
            } else {
                tagsNodeList = galleryElement.getElementsByTagName('a');
            }

a改为img:

if (galleryElement.tagName === 'A') {
                tagsNodeList = [galleryElement];
            } else {
                tagsNodeList = galleryElement.getElementsByTagName('img');
            }

2,匹配href属性改为匹配src属性:

找到代码片段,getImageSrc函数:

function getImageSrc(image) {
        // Set default image path from href
        var result = image.href;

把href改为src:

function getImageSrc(image) {
        // Set default image path from src
        var result = image.src;

3,因为直接匹配了img标签,源程序按“a标签中匹配img标签”写的,把这部分处理掉:

找到代码片段:

// Get element reference, optional caption and source path
        var imageElement = galleryItem.imageElement;
        var thumbnailElement = imageElement.getElementsByTagName('img')[0];
        var imageCaption = typeof options.captions === 'function' ?

把('img')[0]注释掉:

// Get element reference, optional caption and source path
        var imageElement = galleryItem.imageElement;
        var thumbnailElement = imageElement.getElementsByTagName/*('img')[0]*/;
        var imageCaption = typeof options.captions === 'function' ?

然后试一下,此时baguetteBox.js已经兼容不带外围a标签的img图片了。

转载原创文章请注明,转载自: 斐斐のBlog » baguetteBox.js兼容无a标签外围的img图片
评论已关闭