1

我正在尝试使马赛克 jQuery 插件在 wordpress 中工作，直到现在我不得不使用 iframe 来完成它，这有点痛苦。

在 wordpress 中使用时的问题是文本是非常深的灰色而不是白色。

似乎看到 css 和 js 文件似乎已加载，并且我在 chrome 检查元素控制台中没有看到任何错误。

http://rise-sandbox1.co.uk/social-test-for-tudor/

使用的 CSS

 <style type="text/css">
.clearfix: after; {
 content: " "; /* Older browser do not support empty content */
 visibility: hidden;
 display: block;
 height: 0;
 clear: both;
}
.details{ margin:15px 20px; }   
h6{ font:300 16px 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height:160%;         letter-spacing:0.15em; color:#fff; text-shadow:1px 1px 0 rgb(0,0,0); }
p{ font:300 12px 'Lucida Grande', Tahoma, Verdana, sans-serif; color:#aaa; text-    shadow:1px 1px 0 rgb(0,0,0);}
a{ text-decoration:underline; }

.mosaic-block {
float:left;
position:relative;
overflow:hidden;
width:400px;
height:250px;
margin:10px;
background:#111 url(http://rise-sandbox1.co.uk/img/progress.gif) no-repeat center center;
border:1px solid #fff;
-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.5);
}

.mosaic-backdrop {
    display:none;
    position:absolute;
    top:0;
    height:100%;
    width:100%;
    background:#111;
}

.mosaic-overlay {
    display:none;
    z-index:5;
    position:absolute;
    width:100%;
    height:100%;
    background:#111;
}
    .bar .mosaic-overlay {
        bottom:-100px;
        height:100px;
        background:url(http://rise-sandbox1.co.uk/img/bg-black.png);
    }
</style>

和 javascript

        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script></script>
    <script type="text/javascript" src="http://rise-sandbox1.co.uk/js/mosaic.1.0.1.js"></script>    
<script type="text/javascript">  
        jQuery(function($){
            $('.bar').mosaic({
                animation   :   'slide'
            });
        });

    </script>

我正在为帖子和页面使用一个名为特定 css/javascript 的插件来实现通常运行良好的代码 html

<div class="mosaic-block bar">
<a href="http://www.nonsensesociety.com/2011/01/sloppy-art/" target="_blank" class="mosaic-overlay">
<div class="details">
<h6>Sloppy Art - A Mess of Inspiration</h4>
<p>via the Nonsense Society (image credit: Florian</p>
</div>
</a>
<div class="mosaic-backdrop"> <img src="http://rise-sandbox1.co.uk/images/.jpg"/></div>
</div>      
<div class="clearfix"></div>
</div>

希望有人可以帮助这让我发疯

4

1 回答 1

0

好的全部固定

最终有效的代码是

<div class="mosaic-block bar">
<div class="mosaic-overlay">
<div class="details">
<a href="http://rise-sandbox1.co.uk/collection/">
<h6>header text</h4>
<p>View our latest Cashmere range of Baby Blankets</p></a>
</div>
</div>
<div class="mosaic-backdrop">
<img src="http://rise-sandbox1.co.uk/images/picture.jpg">
</div>      
</div>

和带有 javascript 的 css

<style type="text/css">
.mosaic-overlay .details{ margin:15px 20px; }   
h6{ font:300 16px 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height:160%;     letter-spacing:0.15em; color:#fff; text-shadow:1px 1px 0 rgb(0,0,0); }
p{ font:300 12px 'Lucida Grande', Tahoma, Verdana, sans-serif; color:#fff; text-   shadow:1px 1px 0 rgb(0,0,0);}
a{ 
color: #fff;
text-decoration:none; }

.mosaic-block {
float:left;
position:relative;
overflow:hidden;
width:460px;
height:300px;
margin:10px;
background:#111 url(http://rise-sandbox1.co.uk/img/progress.gif) no-repeat center    center;
border:1px solid #fff;
-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.5);
}

.mosaic-backdrop {
    display:none;
    position:absolute;
    top:0;
    height:100%;
    width:100%;
    background:#111;
}

.mosaic-overlay {
    display:none;
    z-index:5;
    position:absolute!important;
    width:100%;
    height:100%;
    background:#111;
}
    .bar .mosaic-overlay {
        bottom:-100px;
        height:100px;
        background:url(http://rise-sandbox1.co.uk/img/bg-black.png);
    }
</style>
    <script type="text/javascript" src="http://rise-sandbox1.co.uk/wp-includes/js/jquery/jquery.js"></script></script>
    <script type="text/javascript" src="http://rise-sandbox1.co.uk/js/mosaic.1.0.1.js"></script>    
<script type="text/javascript">  
 jQuery(function($){
$('.bar').mosaic({
animation   :   'slide'
});
     });

</script>
于 2012-12-18T18:41:54.557 回答