Title: [Plugin: NextGEN Gallery]
Last modified: August 19, 2016

---

# [Plugin: NextGEN Gallery]

 *  [juneatnoon](https://wordpress.org/support/users/juneatnoon/)
 * (@juneatnoon)
 * [15 years, 2 months ago](https://wordpress.org/support/topic/plugin-nextgen-gallery-46/)
 * I am so confused. I want an image gallery where you can cover over a thumbnail
   and see the full-size image on another part of the same page, such as in this
   site: [http://danidraws.com/](http://danidraws.com/). I saw that she used the
   NextGEN gallery, so I added that as a plug-in, but I can’t figure out how to 
   customize it to look like hers. I’ve installed additional plug-ins, tried to 
   integrate it with Gallerific, and I”m not getting it. I don’t know what I’m doing
   wrong, but I sure could use some instructions for customizing NextGEN to look
   like that. (Thumbnails to the left, rollover shows full-size image on right.)
   Any help?

Viewing 1 replies (of 1 total)

 *  [txie](https://wordpress.org/support/users/txie/)
 * (@txie)
 * [15 years ago](https://wordpress.org/support/topic/plugin-nextgen-gallery-46/#post-1974398)
 * Hi!
    I´m no expert on this things, but I got Galelrific working like this: You
   download the “examples” galleriffic-2.0.zip to your theme folder (might wanna
   try twentyten theme firts) from here: [http://www.twospy.com/galleriffic/](http://www.twospy.com/galleriffic/)
 * you upload gallerific folder inside “nextgen-gallery” folder.
    Then inside nggallery.
   php after this code
 *     ```
       // required for the slideshow
       		if ( NGGALLERY_IREXIST == true && $this->options['enableIR'] == '1' && nggGallery::detect_mobile_phone() === false )
       			wp_enqueue_script('swfobject', NGGALLERY_URLPATH .'admin/js/swfobject.js', FALSE, '2.2');
               else {
                   wp_register_script('jquery-cycle', NGGALLERY_URLPATH .'js/jquery.cycle.all.min.js', array('jquery'), '2.88');
                   wp_enqueue_script('ngg-slideshow', NGGALLERY_URLPATH .'js/ngg.slideshow.min.js', array('jquery-cycle'), '1.05');
       ```
   
 * add this code:
 *     ```
       // GALLERIFIC
       wp_register_script('galleriffic' ,NGGALLERY_URLPATH. 'galleriffic/js/jquery.galleriffic.js',false, '2.0.0');
       wp_register_script('jquery.opacityrollover', NGGALLERY_URLPATH . 'galleriffic/js/jquery.opacityrollover.js',false, '2.0.0');
       wp_enqueue_script('galleriffic');
       wp_enqueue_script('jquery.opacityrollover');
       wp_enqueue_style('galleriffic-style', NGGALLERY_URLPATH . 'galleriffic/css/basic.css',false,'2.0','all');
       wp_enqueue_style('galleriffic-style-2', NGGALLERY_URLPATH . 'galleriffic/css/galleriffic-2.css',false,'2.0','all');
       ```
   
 * then inside nextgen-gallery/view you create a template file called for example
   gallery-galleriffic.php with this code:
 *     ```
       <?php
       /**
   
       @description Galleriffic (http://www.twospy.com/galleriffic/) template for Nextgen Gallery WordPress plugin
       @author Kaarel Sikk
   
       Template Page for the gallery overview
   
       Follow variables are useable :
   
       	$gallery     : Contain all about the gallery
       	$images      : Contain all images, path, title
       	$pagination  : Contain the pagination content
   
        You can check the content when you insert the tag <?php var_dump($variable) ?>
        If you would like to show the timestamp of the image ,you can use <?php echo $exif['created_timestamp'] ?>
       **/
       ?>
       <?php if (!defined ('ABSPATH')) die ('No direct access allowed'); ?>
       <?php if (!empty ($gallery)) : ?>
   
       <div class="ngg-galleryoverview" id="<?php echo $gallery->anchor ?>">
   
       	<div id="gallery" class="content">
       		<div id="controls" class="controls"></div>
       		<div class="slideshow-container">
       			<div id="loading" class="loader"></div>
       			<div id="slideshow" class="slideshow"></div>
       		</div>
       		<div id="caption" class="caption-container"></div>
       	</div>
       	<div id="thumbs" class="navigation">
       		<ul class="thumbs noscript">
       		<!-- Thumbnails -->
       		<?php foreach ($images as $image) : ?>
       			<li>
       			<a class="thumb" href="<?php echo $image->imageURL ?>" title="<?php echo $image->description ?>" <?php echo $image->thumbcode ?> >
       			<img title="<?php echo $image->alttext ?>" alt="<?php echo $image->alttext ?>" src="<?php echo $image->thumbnailURL ?>" width="78" height="78"/>
       			</a>
                   <div class="caption"><?php echo $image->description; ?></div>
       			</li>
       		<?php endforeach; ?>
       		</ul>
       	</div>
        	<div style="clear: both;"></div>
       	<script type="text/javascript">
       			jQuery(document).ready(function($) {
       				// We only want these styles applied when javascript is enabled
       				$('div.navigation').css({'width' : '300px', 'float' : 'left'});
       				$('div.content').css('display', 'block');
   
       				// Initially set opacity on thumbs and add
       				// additional styling for hover effect on thumbs
       				var onMouseOutOpacity = 0.67;
       				$('#thumbs ul.thumbs li').opacityrollover({
       					mouseOutOpacity:   onMouseOutOpacity,
       					mouseOverOpacity:  1.0,
       					fadeSpeed:         'fast',
       					exemptionSelector: '.selected'
       				});
   
       				// Initialize Advanced Galleriffic Gallery
       				var gallery = $('#thumbs').galleriffic({
       					delay:                     2500,
       					numThumbs:                 15,
       					preloadAhead:              10,
       					enableTopPager:            true,
       					enableBottomPager:         true,
       					maxPagesToShow:            7,
       					imageContainerSel:         '#slideshow',
       					controlsContainerSel:      '#controls',
       					captionContainerSel:       '#caption',
       					loadingContainerSel:       '#loading',
       					renderSSControls:          true,
       					renderNavControls:         true,
       					playLinkText:              'Play Slideshow',
       					pauseLinkText:             'Pause Slideshow',
       					prevLinkText:              '&lsaquo; Previous Photo',
       					nextLinkText:              'Next Photo &rsaquo;',
       					nextPageLinkText:          'Next &rsaquo;',
       					prevPageLinkText:          '&lsaquo; Prev',
       					enableHistory:             false,
       					autoStart:                 false,
       					syncTransitions:           true,
       					defaultTransitionDuration: 900,
       					onSlideChange:             function(prevIndex, nextIndex) {
       						// 'this' refers to the gallery, which is an extension of $('#thumbs')
       						this.find('ul.thumbs').children()
       							.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
       							.eq(nextIndex).fadeTo('fast', 1.0);
       					},
       					onPageTransitionOut:       function(callback) {
       						this.fadeTo('fast', 0.0, callback);
       					},
       					onPageTransitionIn:        function() {
       						this.fadeTo('fast', 1.0);
       					}
       				});
       			});
       		</script> 
   
       	<!-- Pagination -->
        	<?php echo $pagination ?>
   
       </div>
   
       <?php endif; ?>
       ```
   
 * Then you create the gallery with nextgen (add some captiosn to it) and add the
   shortcode in a page:
    [nggallery id=1 template=”galleriffic”] (for the templates
   called gallery-galleriffic)
 * That´s how I get it working after reading lots of articles on the web and making
   my own corrections. I´m still learning how to change functionalities on this!
   I Hope its usefull to you.

Viewing 1 replies (of 1 total)

The topic ‘[Plugin: NextGEN Gallery]’ is closed to new replies.

 * 1 reply
 * 2 participants
 * Last reply from: [txie](https://wordpress.org/support/users/txie/)
 * Last activity: [15 years ago](https://wordpress.org/support/topic/plugin-nextgen-gallery-46/#post-1974398)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics