0

我正在为网站使用 CMS，我必须更改某些图像在页面上的放置方式，以避免为我的客户支付最高的订阅费。

该模板使用 Mosaic Jquery 插件 ( http://buildinternet.com/project/mosaic/ )，它在图像上显示鼠标悬停覆盖并将它们变成一个灯箱。

最初，每个图像都是以这样的方式在页面上生成的：

    <div class="mosaic-block fourth fade">
    <a href="{tag_Home Page Featured Large_value}" class="mosaic-overlay fancybox" data-fancybox-group="gallery" title="{tag_Home Page Featured Caption}"></a>
    <div class="mosaic-backdrop"><img src="{tag_Home Page Featured Thumb_value}" alt="{tag_name_nolink}" /></div>
</div>

渲染：

<div class="mosaic-block fourth fade">
<a href="/img/mock2.jpg" class="mosaic-overlay fancybox" data-fancybox-group="gallery" title="Insert Your Title" style="display: inline; opacity: 0;"></a>
<div class="mosaic-backdrop" style="display: block;"><img src="/img/mock2.jpg" alt="Project Name"></div>

这很好用，因为每个图像在页面上呈现马赛克 div，然后马赛克 jquery 代码将识别这一点，创建缩略图、覆盖和灯箱功能。

但是，我现在正在从图库功能（没有 {tags}）生成图像。为此，我使用了从画廊功能生成的 XML 文件。

<gallery>

然后我使用 jquery/ajax 将每个项目附加到正确的马赛克 div 中：

$(document).ready(function(){
    $.ajax({
        type: "GET",
        url:'/gallery/footer/PhotoGallery.xml',  // Add your url to your photo gallery xml feed
        dataType: 'xml',
        success: xmlParser
    });

    // don't touch anything under me
    function xmlParser(xml) {
        $(xml).find("img").each(function () {                       
        $(".footer-images").append('<div class="mosaic-block half fade"><a href="/gallery/footer/' + $(this).attr('src') + '" class="mosaic-overlay fancybox" data-fancybox-group="gallery" title="' + $(this).attr('alt') + '"></a><div class="mosaic-backdrop"><img src="/gallery/footer/' + $(this).attr('src') + '" alt="' + $(this).attr('alt') + '" /></div></div></div>');
        });
    // don't touch anything above me
    }
});

在 html 页面上，每个图像呈现为：

<div class="mosaic-block half fade"><a href="/gallery/footer/Lounge.JPG" class="mosaic-overlay fancybox" data-fancybox-group="gallery" title="The Lounge"></a><div class="mosaic-backdrop"><img src="/gallery/footer/Lounge.JPG" alt="The Lounge"></div></div>

这与上面原始渲染的布局相匹配。但是，Mosaic Jquery 没有应用不同的显示样式和不透明度（悬停时会发生变化）。

我尝试将附加 jquery 的 javascript 位置更改为马赛克之前，但这是行不通的。此外，所有图像周围的 div 也不会影响插件，因为我将附加的 XML 直接复制并粘贴到 html 中，并且 jquery 已正确应用。这导致我尝试使用 document.ready 和 window.onload = 等，但我没有成功..

需要注意的一件事：当我从已正确加载的图像中打开灯箱时，我可以看到灯箱库中的所有图像，即使其他图像未正确显示在页面上。我认为模板也使用了一个fancybox jquery 插件： http: //fancyapps.com/fancybox/

4

0 回答 0