Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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

share|improve this question

2 Answers 2

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!!

share|improve this answer
    
I thought I had a solution here...but I realize that the offset works differently in each browser, causing the image to be centered in Safari, but not in Firefox...I then read about the jquery position property and applied it to my jQuery: –  Josh Rodgers Jun 2 '12 at 16:07
up vote 0 down vote accepted

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

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.