1

私はワードプレス内でモザイク jQuery プラグインを動作させようとしていますが、これまでは iframe を使用してそれを行う必要がありましたが、これは少し面倒でした。

wordpress 内で使用する場合の問題は、テキストが白ではなく非常に濃い灰色であることです。

css と js ファイルが読み込まれているように見えますが、chrome inspect element コンソールにエラーは表示されません。

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>

そしてジャバスクリプト

        <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

OK すべて修正済み

動作する最終的なコードは

<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 に答える