0

Web サイトにグリッド ポートフォリオ ページを作成しましたが、サムネイルに機能を追加したいと考えています。誰かがサムネイルにカーソルを合わせるたびに、投稿のタイトル、投稿の日付、および抜粋が表示されるようにしたいと思います。

私が言いたいことの例を見つけようとしてきましたが、これは非常に似ています。

http://lucybenson.net/redesign2011/

これまでのところ、Wordpress での私のループは次のようになります

http://pastie.org/2135220

これを行うプラグインはありますか？そうでない場合、どうすればこれを達成できるか誰か教えてもらえますか?

前もって感謝します。

4

3 に答える 3

1

この種のプラグインがありますが、自分で行うのは非常に簡単です。

これはテストされていませんが、正しい方向に進むはずです:

<style type="text/css" media="screen">

    .image-list {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

    .image-list li {
        margin: 0 10px 0 0;
        padding: 0;
        float: left;
    }

        .image-list li a {
            display: block;
            position: relative;
            height: 50px;
            width: 50px;
        }

            .image-list li a span {
                display: block;
                height: 100%;
                width: 100%;
                position: absolute;
                top: 0;
                left: 0;
                background-color: rgba(0,0,0,0.4);
                color: #fff;
            }

</style>

<ul class="image-list">
    <li>
        <a href="#">
            <img src="myimage.jpg" alt="My Image">
            <span>
                This is my overlay content
            </span>
        </a>
    </li>
</ul>

<script type="text/javascript">

$(function() {

    $(".image-list li a").hover(

        // Mouse Over
        function() {

            $(this).find("span").fadeIn();

        }, 

        // Mouse Out
        function() {

            $(this).find("span").fadeOut();

        }
    );

});

</script>
于 2011-06-28T17:27:22.507 に答える
0

JavaScript に依存しないソリューションを探している場合は、ばかげているように聞こえますが、試してみる価値はあります。純粋に CSS を使用して実行できます。それほど難しくありません - http://jsfiddle.net/teddyrised/TWBhU/

私がしたことは、-webkit-transition/を使用することでしたtransition property。もちろん、私のソリューションは Jesse が投稿したものほど洗練されたものではありませんが、CSS が魔法のように機能することを知ってうれしいです。

于 2011-06-28T18:21:47.007 に答える
0

ここで整理しなければならないことがいくつかあります。まず、あるものを別のものの上に重ねる方法に頭を悩ませる必要があります。つまり、:hover クラスを使用して css だけで非常に簡単に行った後の効果を次に示します。重要なのは、絶対位置のラップで絶対位置を使用して、テキストを画像の上に表示することです

http://jsfiddle.net/aDwe4/

次に、項目をフェードさせたい - 一部の人々はそれを好まないかもしれない - しかしjqueryはこれを非常に簡単にします - ホバークラスをドロップし、いくつかのスクリプトタグのフッターにアニメーション機能を入れます

http://jsfiddle.net/aDwe4/1/

最後に、これを wordpress テンプレートに変換する必要があります。テンプレートで何が起こっているのかわかりません。そのため、例を書きます。get_the_image プラグインをインストールしてから、このようなものをループ内に配置します

<div class="imagewrap">
<div class="image">
<?php if ( function_exists( 'get_the_image' ) ) get_the_image(); ?>
</div>
<div class="copy">
<h3><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></h3>
<?php the_excerpt(); ?>
</div>
</div>

get_the_image がどのように機能するかを調べなければならないことは明らかですが、これで笑ってしまうはずです!

于 2011-06-28T18:26:21.853 に答える