Reputation: 587
I have been working with this JQuery image carousel for a while, and am so close...but there are a few things that just aren't quite right :(
I am using the JCarousel Light plugin (http://www.gmarwaha.com/jquery/jcarousellite/), which is working great...all I wanted to do from there is have a large image appear when the thumbnail image is hovered over.
Normally I would just do this inline, the code is easy enough (as a matter of fact, I'm doing that al ready in other portions throughout the site). The reason it won't work like that is because there is an overflow:hidden property on the element.
That's when I discovered the JQuery offset property...the only problem is that it renders differently in all browsers (or at least the code I am using does).
Then I tried the JQuery position property...but it followed the image, so when the full image appeared it didn't follow the scrolled carousel thumbnails.
what do I need to change to make the hovered image centered above it's matching thumbnail in all browsers?
The current JQuery I am using looks like:
<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>
The code I have right now looks like:
<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>
I wish I were better at JQuery...what am I missing? Thanks in advance!!
P.s. - the live example is at: http://joshrodgers.com/...it's on the frontpage :)
Josh
Upvotes: 1
Views: 612
Reputation: 587
I decided to use a lightbox instead...seems to have the same effect :)
Upvotes: 1