JQuery的旋转木马偏移

我一直在使用了一段时间这个jQuery图像旋转木马，和我这么近......但也有几件事情，只是不完全正确:(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的更好......我缺少什么？提前致谢！！

P.s. - 在活生生的例子是：http://joshrodgers.com/ ...这是在第一页:)

乔希

来源

2012-06-06 Josh Rodgers

关闭，投票作为** off-topic **。这是一个** jQuery **问题，*不是*一个** WordPress **问题。 –

我近距离地投票表决了这个问题，但mods应该考虑将它移动到StackOverflow。** –

糟糕..我很抱歉，我在这里发布它的唯一原因是因为该传送带本身正在获取来自WordPress的图片......并不认为它出现在错误的地方......对不起 –

我决定用一个灯箱，而不是...似乎有同样的效果:)

来源

2012-06-09 06:24:36

JQuery的旋转木马偏移

回答

相关问题