WordPress.org

Ready to get started?Download WordPress

Forums

Big Image in a Div with Next and Previous capabilities? (3 posts)

  1. mandawahoo
    Member
    Posted 3 years ago #

    I have set up a gallery using the instructions from this topic: http://wordpress.org/support/topic/plugin-nextgen-gallery-how-can-i-display-thumbs-and-big-image-in-a-div

    The thumbnails appear to the left and the big image shows up in a div to the right, instead of in a lightbox effect. My question is, how can I also provide previous and next links so that someone doesn't have to necessarily click a thumbnail. (previous_image_link and next_image_link)

    As you can see here, the Back and Next links don't pull up any image values from the thumbnails.
    http://heatherpinteriors.com/gallery/resting-spaces/

    Another option I would consider would be using the ImageBrowser, but I would need the thumbnails on the left to be able to communicate with it without necessarily opening up a whole new page.

    Here is the code I am using on the actual gallery template:

    <?php if (have_posts()) : ?>
    
    			<?php while (have_posts()) : the_post(); ?>
    
          		<div class="post" id="post-<?php the_ID(); ?>" align="center">
                            <div class="gallery-menu" align="center"><small><?php wp_nav_menu( array( 'theme_location' => 'gallery-menu' ) ); ?> </small></div>
                		<div class="gallery"><?php the_content(); ?></div>
                    	<div id="big_image"><?php $image = get_post_meta($post->ID, 'image', TRUE); ?>
    				<img src="<?php echo $image; ?>" alt="<?php the_title(); ?>" title="<?php the_title(); ?>" /></div>
                <div class="ngg-imagebrowser-nav">
    		<div class="back">
    			<a class="ngg-browser-prev" id="ngg-prev-<?php echo $image->previous_pid ?>" href="<?php echo $image->previous_image_link ?>">◄ <?php _e('Back', 'nggallery') ?></a>
    		</div>
    		<div class="next">
    			<a class="ngg-browser-next" id="ngg-next-<?php echo $image->next_pid ?>" href="<?php echo $image->next_image_link ?>"><?php _e('Next', 'nggallery') ?> ►</a>
    		</div>
    		<div class="counter"><?php _e('Picture', 'nggallery') ?> <?php echo $image->number ?> <?php _e('of', 'nggallery')?> <?php echo $image->total ?></div>
    		<div class="ngg-imagebrowser-desc"><p><?php echo $image->description ?></p></div>
    	</div>
          		</div>
    
    <?php endwhile; ?>
    
    			<div class="navigation">
    				<div class="alignleft"><?php previous_posts_link('« Previous Entries') ?></div>
    				<div class="alignright"><?php next_posts_link('Next Entries »') ?></div>
    			</div>
    			<!-- end navigation -->
    
    	<?php else : ?>
    
    			<div class="post">
    				<h2 class="title">Not Found</h2>
    				<div class="entry">
    					<p>Sorry, but you are looking for something that isn't here.</p>
    				</div>
    			</div>
    
    	<?php endif; ?>

    And I am using the custom_effect.js code from the topic mentioned above.

    Thank you!!!

  2. mandawahoo
    Member
    Posted 3 years ago #

    Anyone? I'd really appreciate some help with this - thanks!

  3. mandawahoo
    Member
    Posted 3 years ago #

    Curious to see if anyone has a solution since I last posted this?

Topic Closed

This topic has been closed to new replies.

About this Topic