我正在尝试使马赛克 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>
希望有人可以帮助这让我发疯