0

CarouFredSel を使用して垂直スクローラー ( http://new.joshrodg.com/?page_id=206 )を表示する Web サイトに取り組んでいます。問題は、前のボタンをクリックすると、CarouFredSel が正常にスクロールすることです。 ..しかし、次のボタンをクリックしてスライドショーを進めようとすると、スクロールが台無しになります....奇妙なことに、WordPress MapPress プラグインを使用して Google マップを投稿した場合にのみ発生します。

MapPress プラグインが問題の原因であると確信していますが、いくつかのコードで修正できると思います (特に、これは Safari のみの問題であるように思われるため... Safari、Firefox、Chrome、およびIE8)

今、(ある程度)うまくいったことの1つはposition: relative、私の.sidebar-image acssスタイルに追加することでした。それに関する唯一の問題は、正しく進みますが、スクロール効果がないことです(目的を無効にします)

誰もこれを経験したことがありますか?

scriptのように見えます:

$(window).load(function() {
    /* Sidebar */
    $("#sidebar-image").carouFredSel({
        direction: "up",
        auto: false,
        items: {
            visible: 2
        },
        next: "#down",
        prev: "#up",
        scroll: {
            easing: "quadratic",
            items: 1
        },
        width: "100%"
    });
});

codeのように見えます:

<div class="sidebar-image">
    <div id="sidebar-image">
        <?php while ( have_posts() ) : the_post(); ?>
            <?php if ( has_post_thumbnail() ) { ?>
                <?php 
                    $id = get_post_thumbnail_id();
                    $url = wp_get_attachment_image_src($id, "large", true);
                ?>
                <a href="<?php echo $url[0]; ?>" rel="lightbox[<?php echo get_the_ID(); ?>]"><?php the_post_thumbnail("sidebar-image"); ?></a>
            <?php } ?>
        <?php endwhile; ?>
    </div>
    <div class="clear">
        <!-- -->
    </div>
</div>

そして私のようにCSS見える:

/* Slides */
.sidebar-image {
    border-bottom: 1px solid #dcdedf;
    overflow: hidden;
    width: 277px;
}

.sidebar-image a {
    border-left: 1px solid #dcdedf;
    border-right: 1px solid #dcdedf;
    border-top: 1px solid #dcdedf;
    display: block;
    position: relative;
    float: left;
}

このコードはすべて、相対位置を持つ別の div にあります。問題を引き起こす可能性のある場所を読みましたが、css を削除した後でも、カルーセルは同じことを行います...

含まれcodeている div は次のようになります。

/* Slideshow */
#sidebar {
    float: right;
    position: relative;
    width: 305px;
}

別のjQueryライブラリ(Googleから直接のものではなく、jQueryから直接のもの)を使用してみました。また、CarouFredSel パック バージョンを使用するのではなく、完全な CarouFredSel スクリプトを使用してみました。

何か案は?それは私を困惑させました:-(

ありがとう、
ジョシュ

4

1 に答える 1