Mouse hover previews usually only show title and image. Instead, I want the entire wordpress post to show. The code that calls the preview is this:

 adTitle = jQuery(this).find('img').attr('alt');
           jQuery('body').append("<div id='preview'><a href='"+ this.href +"' class='colorbox-thumb'><img src='"+ this.href +"' alt='' /></a><p>"+ adTitle +"</p></div>");                

I want to insert a wordpress post instead.

I have tried to insert the php code after append("<div..." but it destroys the whole page. Does anyone know how to insert the wordpress post that relates to the thumbnail into this javascript so that the post shows with overflow-y: auto scrollbar into the hover preview?

I'm not sure if this website caters to beginners, but I really only know how to cut and paste.

The single ad listing code (single-ad_listing.php) is below. I'm wondering how to do what you have described above to insert it.

    <?php get_header(); ?>

<script type='text/javascript'>
// <![CDATA[
/* setup the form validation */
jQuery(document).ready(function ($) {
        errorClass: 'invalid'
// ]]>

<?php // if($_GET['reportpost'] == $post->ID) { app_report_post($post->ID); $reported = true;} ?>

<div class="content">

    <div class="content_botbg">

        <div class="content_res">

            <div id="breadcrumb">

                <?php if ( function_exists('cp_breadcrumb') ) cp_breadcrumb(); ?>


            <!-- <div style="width: 105px; height:16px; text-align: right; float: left; font-size:11px; margin-top:-10px; padding:0 10px 5px 5px;"> -->
                <?php // if($reported) : ?>
                    <!-- <span id="reportedPost"><?php _e('Post Was Reported', 'appthemes'); ?></span> -->
                <?php // else : ?>
                    <!--    <a id="reportPost" href="?reportpost=<?php echo $post->ID; ?>"><?php _e('Report This Post','appthemes') ?></a> -->
                <?php // endif; ?>
            <!-- </div> -->

            <div class="clr"></div>

            <div class="content_left">

                <?php appthemes_before_loop(); ?>

                <?php if ( have_posts() ) : ?>

                    <?php while ( have_posts() ) : the_post() ?>

                        <?php appthemes_before_post(); ?>

                        <?php appthemes_stats_update( $post->ID ); //records the page hit ?>

                        <div class="shadowblock_out">

                            <div class="shadowblock">

                                <?php appthemes_before_post_title(); ?>

                                <h1 class="single-ad"><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h1>

                                <div class="clr"></div>

                                <?php appthemes_after_post_title(); ?>

                                <div class="pad5 dotted"></div>

                                <div class="bigright"<?php if(get_option($GLOBALS['app_abbr'].'_ad_images') == 'no') echo 'style="float:none;"'; ?>>


                                        // grab the category id for the functions below
                                        $cat_id = appthemes_get_custom_taxonomy( $post->ID, APP_TAX_CAT, 'term_id' );

                                        // check to see if ad is legacy or not
                                        if ( get_post_meta( $post->ID, 'expires', true ) ) {  ?>

                                            <li><span><?php _e('Location:', 'appthemes') ?></span> <?php echo get_post_meta( $post->ID, 'location', true ); ?></li>
                                            <li><span><?php _e('Phone:', 'appthemes') ?></span> <?php echo get_post_meta( $post->ID, 'phone', true ); ?></li>

                                            <?php if ( get_post_meta( $post->ID, 'cp_adURL', true ) ) ?>
                                                <li><span><?php _e('URL:','appthemes'); ?></span> <?php echo appthemes_make_clickable( get_post_meta( $post->ID, 'cp_adURL', true ) ); ?></li>

                                            <li><span><?php _e('Listed:', 'appthemes') ?></span> <?php the_time( get_option( 'date_format' ) . ' ' . get_option( 'time_format' ) ) ?></li>
                                            <li><span><?php _e('Expires:', 'appthemes') ?></span> <?php echo cp_timeleft( strtotime( get_post_meta( $post->ID, 'expires', true ) ) ); ?></li>

                                        } else {

                                            if ( get_post_meta($post->ID, 'cp_ad_sold', true) == 'yes' ) : ?>
                                            <li id="cp_sold"><span><?php _e('This item has been sold', 'appthemes'); ?></span></li>
                                            <?php endif; ?>
                                            // 3.0+ display the custom fields instead (but not text areas)
                                            cp_get_ad_details( $post->ID, $cat_id );

                                        } // end legacy check


                                </div><!-- /bigright -->

                                <?php if ( get_option( 'cp_ad_images' ) == 'yes' ) : ?>

                                    <div class="bigleft">

                                        <div id="main-pic">

                                            <?php cp_get_image_url(); ?>

                                            <div class="clr"></div>


                                        <div id="thumbs-pic">

                                            <?php cp_get_image_url_single( $post->ID, 'thumbnail', $post->post_title, -1 ); ?>

                                            <div class="clr"></div>


                                    </div><!-- /bigleft -->

                                <?php endif; ?>

                                <div class="clr"></div>

                                <?php appthemes_before_post_content(); ?>

                                <div class="single-main">

                                    // 3.0+ display text areas in content area before content.
                                    cp_get_ad_details( $post->ID, $cat_id, 'content' );

                                    <h3 class="description-area"><?php _e( 'Description', 'appthemes' ); ?></h3>

                                    <?php the_content(); ?>


                                <?php appthemes_after_post_content(); ?>

                            </div><!-- /shadowblock -->

                        </div><!-- /shadowblock_out -->

                        <?php appthemes_after_post(); ?>

                    <?php endwhile; ?>

                        <?php appthemes_after_endwhile(); ?>

                    <?php else: ?>

                        <?php appthemes_loop_else(); ?>

                    <?php endif; ?>

                    <div class="clr"></div>

                    <?php appthemes_after_loop(); ?>

                    <?php wp_reset_query(); ?>

                    <div class="clr"></div>

                    <?php comments_template( '/comments-ad_listing.php' ); ?>

            </div><!-- /content_left -->

            <?php get_sidebar( 'ad' ); ?>

            <div class="clr"></div>

        </div><!-- /content_res -->

    </div><!-- /content_botbg -->

</div><!-- /content -->

<?php get_footer(); ?>

1 Answer 1


I would separate your PHP and Javascript.

Run the loop as you normally would, but instead of showing it on the page wrap it in a div with a display:none;

Make sure to give each post an id that you can identify against and then on whatever you're hovering over could have a rel, with the same id. then your jquery hover would be more like...

    theIDIneed = jQuery(this).attr('rel');
    jQuery("#"+theIDIneed).show(); // this is the simple example, you might want to use clone

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.