CarouFredSel мигает при прокрутке в Safari

Я работаю над веб-сайтом, который использует CarouFredSel для отображения вертикальной прокрутки (http://new.joshrodg.com/?page_id=206), проблема, с которой я сталкиваюсь, заключается в том, что когда я нажимаю предыдущую кнопку, CarouFredSel отлично прокручивается... но когда я пытаюсь продвинуть слайд-шоу, нажимая следующую кнопку, прокрутка сбивается .... и странно то, что это происходит только тогда, когда я публикую карту Google с помощью плагина WordPress MapPress.

Я почти уверен, что плагин MapPress вызывает проблему, но я думаю, что с помощью некоторого кода это можно исправить (тем более, что кажется, что это проблема только для Safari... Я тестировал его в Safari, Firefox, Chrome и IE8)

Теперь одна вещь, которая работала (несколько), заключалась в добавлении position: relative к моему .sidebar-image a стилю css, единственная проблема с этим заключается в том, что, хотя он продвигается правильно, нет эффекта прокрутки (что противоречит цели)

Кто-нибудь когда-нибудь испытывал это раньше?

Мой 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 (прямо из jQuery, а не прямо из Google). Я также пытался использовать полный сценарий CarouFredSel, а не упакованную версию CarouFredSel.

Есть идеи? Это поставило меня в тупик :-(

Спасибо,
Джош


person Josh Rodgers    schedule 08.02.2013    source источник


Ответы (1)


Я могу подтвердить, что это проблема Google Maps и не имеет ничего общего с кодом, который я использую для CarouFredSel... Я пробовал несколько плагинов Google Map для WordPress, и сумасшедшая прокрутка происходит независимо от плагина.

Итак, вот что я сделал... вместо использования плагина Google Maps под названием «MapPress» я использую плагин MapQuest под названием «MapQuest Map Builder для WordPress».

Теперь на любом посте или странице с картой код CarouFredSel работает без сбоев и ошибок :-)

Ура!

Спасибо,
Джош

person Josh Rodgers    schedule 08.02.2013