JQuery 轮播偏移量

Question

我一直在使用这个 JQuery 图像轮播一段时间，并且非常接近......但是有一些事情不太正确:(

我正在使用 JCarousel Light 插件 (http://www.gmarwaha.com/jquery/jcarousellite/)，它工作得很好……我想做的就是在缩略图悬停时显示一个大图像。

通常我会内联执行此操作，代码很简单（事实上，我在整个站点的其他部分都已准备好执行此操作）。它不能那样工作的原因是元素上有一个溢出：隐藏属性。

那时我发现了 JQuery 偏移属性...唯一的问题是它在所有浏览器中的呈现方式不同（或者至少我使用的代码是这样）。

然后我尝试了 JQuery 位置属性...但它跟随图像，所以当完整图像出现时它没有跟随滚动的轮播缩略图。

在所有浏览器中，我需要更改什么以使悬停在其上方居中的图像匹配缩略图？

我正在使用的当前 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 方面做得更好……我错过了什么？提前致谢！！

附： - 现场示例位于：http://joshrodgers.com/...它在首页:)

乔什

Answer 1

我决定改用灯箱...似乎有相同的效果:)