1

私はしばらくの間、この JQuery 画像カルーセルを使用してきましたが、非常に近いです...しかし、まったく正しくないことがいくつかあります:(

私は JCarousel Light プラグイン ( http://www.gmarwaha.com/jquery/jcarousellite/ ) を使用しています。これはうまく機能しています...そこからやりたかったのは、サムネイル画像をホバーしたときに大きな画像が表示されるようにすることだけです以上。

通常、私はこれをインラインで行うだけで、コードは簡単です (実際のところ、サイト全体の他の部分で準備ができています)。そのように機能しない理由は、要素に overflow:hidden プロパティがあるためです。

その時、私は JQuery オフセット プロパティを発見しました...唯一の問題は、すべてのブラウザーでレンダリングが異なることです (または、少なくとも私が使用しているコードはそうです)。

次に、JQuery の position プロパティを試してみましたが、画像に追従していたため、完全な画像が表示されたときに、スクロールされたカルーセルのサムネイルに追従しませんでした。

ホバーされた画像をすべてのブラウザで一致するサムネイルの上に中央に配置するには、何を変更する必要がありますか?

私が使用している現在の JQuery は次のようになります。

<script type="text/javascript">
    <!--
        $(function() {
            /* carousel-full */
            jQuery(".photos a").hover(function() {
                var offset = $(this).offset();
                var id_post = $(this).attr("id");
                jQuery(".carousel-full").find("div[id="+id_post+"]").css("left", (offset.left-265)+"px");
                jQuery(".carousel-full").find("div[id="+id_post+"]").show();
            }, function() {
                jQuery(".carousel-full").find("div").hide();
            });
            /* carousel-thumbnails */
            $(".photos").jCarouselLite({
                btnNext: ".next",
                btnPrev: ".prev",
                visible: 4,
            });
        });

    //-->
</script>

私が今持っているコードは次のようになります：

    <div class="carousel-full">
        <?php query_posts("category_name=photos&posts_per_page=-1"); ?>
            <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
                <div id="<?php echo $post->ID; ?>"><?php the_post_thumbnail("carousel-full"); ?></div>
            <?php endwhile; endif; ?>
        <?php wp_reset_query(); ?>
    </div>
    <div class="carousel-thumbnails">
        <?php $styles = array('photo1','photo2'); $switch = count($styles); $start = 0; ?>
        <?php query_posts( 'category_name=photos&posts_per_page=-1' ); ?>
            <?php if ( have_posts() ) { ?>
                <button class="prev"><!-- --></button>
                <button class="next"><!-- --></button>
                <div class="photos">
                    <ul>
                        <?php while ( have_posts() ) : the_post(); ?>
                            <li class="<?php echo $styles[$start++ % $switch]; ?>"><a href="" id="<?php echo $post->ID;?>"><?php the_post_thumbnail("carousel-thumbnails", array("title" => get_the_title(), "alt" => get_the_title()) ); ?></a></li>
                        <?php endwhile; ?>
                    </ul>
                </div>
            <?php } else { ?>
                <p>Sorry, no pictures have been posted :(</p>
            <?php } ?>
        <?php wp_reset_query(); ?>
    </div>

JQuery がもっと上手になればいいのにと思います...何が欠けているのでしょうか? 前もって感謝します！！

Ps - 実際の例はhttp://joshrodgers.com/にあります ... フロントページにあります :)

ジョシュ

4

1 に答える 1

1

代わりにライトボックスを使用することにしました...同じ効果があるようです:)

于 2012-06-09T06:24:36.757 に答える