Carousel Hover Image

Question

I a using an image carousel to display some pictures on my website. The carousel I am using is called: Jcarousellite (http://www.gmarwaha.com/jquery/jcarousellite/). I have the carousel setup, styled, and configured...but am having trouble getting through the last little bit of the code to work.

The code I am using to get the images:

<?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><a href=""><?php the_post_thumbnail("carousel-thumbnails"); ?></a></li>
                <?php endwhile; ?>
            </ul>
        </div>
    <?php } else { ?>
        <p><?php _e("Sorry, no pictures have been posted :("); ?></p>
    <?php } ?>
<?php wp_reset_query(); ?>

The javascript function:

<script type="text/javascript">
    <!--
        $(function() {
            $(".photos").jCarouselLite({
                btnNext: ".next",
                btnPrev: ".prev",
                visible: 4,
            });
        });
    //-->
</script>

I have another image that I would like to show when a user hovers over the thumbnail:

<?php the_post_thumbnail("carousel-full"); ?>

Initially, I tried to add a span to the end of the link, to make it work...then I could use CSS to position the image where I want...but because the jquery puts a overflow:hidden property on the photo container my image gets cut off. As I was looking around, a suggestion was to make the hover appear outside your overflow:hidden div, but how do I do that?

Thanks,
Josh

Answer 1

I figured it out!!

I added this piece of jQuery:

<script type="text/javascript">
    <!--
        $(function() {
            jQuery(".photos a").hover(function() {
                var offset = $(this).offset();
                var id_post = $(this).attr("id");
                jQuery(".hover").find("span[id="+id_post+"]").css("left", (offset.left-312)+"px");
                jQuery(".hover").find("span[id="+id_post+"]").show();
            }, function() {
                jQuery(".hover").find("span").hide();
            })
        });
    //-->
</script>

and added an additional loop:

<div class="hover">
    <?php query_posts( 'category_name=photos&posts_per_page=-1' ); ?>
        <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
            <span id="<?php echo $post->ID; ?>"><?php the_post_thumbnail("carousel-full"); ?></span>
        <?php endwhile; endif; ?>
    <?php wp_reset_query(); ?>
</div>

and presto!!

Answer 2

I ended up just using a lightbox instead, it was super-easy to implement and looks great!!