Question

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

Answer 1

I decided to use a lightbox instead…seems to have the same effect 🙂