How to Integrate Highslide Into Nextgen Gallery

in Programming,Wordpress Plugins

I didn’t get the Highslide effect working on NextGEN Gallery used by our latest blog. Highslide effect just does not work by itself after selecting it from the drop down list at Nextgen Gallery’s option page. So….how to make highslide working with Nextgen Gallery?

NextGEN Gallery supports only Shutter and Thickbox as full integrated effect. All other effects are possible but you need to add them manually. Also, you can use other plugins to add the effect. To get the Highslide working with Nextgen Gallery, we need to make some modifications. Here is the way on how to integrate a fully functioning Highslide into a WordPress Nextgen Gallery.

Highslide integration with a Nextgen Gallery :

The following assumes that NextGen Gallery is already installed.

  1. Download Highslide
  2. Upload the highslide directory to your WordPress Plugins directory. I.E.: /wp-content/plugins/
  3. Add the following code to header of your current active theme
    <link rel="stylesheet" href="<?=plugins_url ?>/highslide/highslide.css" type="text/css" media="screen" />
    
  4. Just before the closing </body> tag or before </head> of your current active theme, add the following code.
    <!– Start Highslide Mod –>
    <script type="text/javascript" src="<?=plugins_url( '/highslide/highslide-with-gallery.js');?>"></script>
    <script type="text/javascript">
    hs.graphicsDir = '<?=plugins_url('/highslide/graphics/');?>';
    hs.showCredits = false;
    hs.align = 'center';
    hs.transitions = ['expand', 'crossfade'];
    hs.outlineType = 'glossy-dark';
    hs.wrapperClassName = 'dark';
    hs.fadeInOut = true;
    hs.dimmingOpacity = 0.75;
    
    // Add the controlbar
    if (hs.addSlideshow) hs.addSlideshow({
     //slideshowGroup: 'group1',
     interval: 5000,
     repeat: false,
     useControls: true,
     fixedControls: 'fit',
     overlayOptions: {
     opacity: .6,
     position: 'bottom center',
     hideOnMouseOut: true
     }
    });
    
    </script>
    <!– End Highslide Mod –>
  5. Next, Navigate to Gallery -> Options -> Effects. Select Highslide from the Javascript Thumbnail effects dropdown list and click Update

That’s it, now when you go view your site, you should see highslide with navigation and captions once you hover over any Nextgen gallery image!

To styling your highslide effect, you can visit http://highslide.com/index.htm as sample and reference

How to Insert CSS Stylesheet and Java Script to WordPress Header?

Next question to integrate highslide effects to Nextgen Gallery is how to insert the point 3 and 4 code at the point above to our wordpress theme with easy. Many ways to do so. One way is to create a function in functions.php file of current active theme

  1. Login to your WordPress admin panel and navigate to Design -> Theme Editor and select Function (functions.php) from the Theme File list.
  2. Add the following code
    add_action(‘wp_head’, ‘my_highslide_inject’, 10);
    /* The first parameter is the hook name in your template. The second  parameter is the name of the function and the third is the priority.*/
    function my_highslide_inject() {
    /* use this for highslide CSS style */
    wp_register_style('myStyle', WP_PLUGIN_URL . '/highslide/highslide.css');
    wp_enqueue_style('myStyle');
    /* end of CSS*/
    <script type="text/javascript" src="<?=plugins_url( '/highslide/highslide-with-gallery.js');?>"></script>
    <script type="text/javascript">
    hs.graphicsDir = '<?=plugins_url('/highslide/graphics/');?>';
    hs.showCredits = false;
    hs.align = 'center';
    hs.transitions = ['expand', 'crossfade'];
    hs.outlineType = 'glossy-dark';
    hs.wrapperClassName = 'dark';
    hs.fadeInOut = true;
    hs.dimmingOpacity = 0.75;
    
    // Add the controlbar
    if (hs.addSlideshow) hs.addSlideshow({
     //slideshowGroup: 'group1',
     interval: 5000,
     repeat: false,
     useControls: true,
     fixedControls: 'fit',
     overlayOptions: {
     opacity: .6,
     position: 'bottom center',
     hideOnMouseOut: true
     }
    });
    
    </script>
    }

Still confused and can not integrate Highslide Into Nextgen Gallery?. Try to install this plugin to your wordpress blog

Highslide 4 WordPress *reloaded*
Enable the usage of lates Highslide Features in your Blog, Autoinsert, style Select, HTML Expands, CDN support, optimized for Pagespeed. This Plugin automatically insert Highslide Script to your Blog without the need of any further configuration or Shorttags or editing of old posts.

Also you can try this plugin too

Effects for NextGEN Gallery
Advanced wordpress and NextGen Gallery with some extra effects.
Highslide and Lightbox support, configuration of the effects over a web option page

I hope this post can work and solve your problem to integrate Highslide into Nextgen Gallery. Do you know a better way and easier to do this?. Please comment and inform us here

closeThis post was published 3 years 2 months 24 days ago which may make its no longer appropriate to current circumstances, this post may even be damaged or corrupted. This site is not responsible for any misunderstanding.
Please contact us to notify the damage of this content if you find this content corrupted/missing/broken.

Related posts:

  1. How to Sort Post by Gd Star Rating
  2. How to Reduce High CPU Usage
  3. Duplicate Header on WP E-commerce
  4. Google Not Indexing My New Posts
  5. IntenseDebate vs Disqus

Use the social buttons below to add it on your favorite social sites to get the latest updates. Not sure about these options? Learn more about RSS and social bookmarking

{ 1 trackback }

How to Insert CSS Stylesheet or Javascript to Wordpress Header | Pramudita's Network
February 14, 2012 at 9:41 am

{ 7 comments… read them below or add one }

1 essentialism July 5, 2011 at 6:25 pm

thank you for this informative post, please try these efforts with diversification in the topic it will make this blog more charming , and it will not be narrow targeted

Reply

2 Malik July 28, 2011 at 5:16 pm

Nice tips. I think I'm going to give it a try in my blog. Thanks.

Reply

3 keylogger for free August 19, 2011 at 2:31 pm

This looks like a great script. I might use it on future website that I will build.

Reply

4 barcode generator November 25, 2011 at 2:27 pm

This is great help, I guess this was a much needed post. Thanks for sharing.

Reply

5 fotograf nunta December 11, 2011 at 8:06 pm

Great tutorial! Thx a lot for sharing

Reply

6 Park City Realtor December 22, 2011 at 11:06 pm

The code is very useful for me now, it is what I have been looking for since yesterday. :)
My recent post A New York Times Article about The Canyons

Reply

7 Aurea February 4, 2012 at 7:55 pm

These tips on programming are all very useful especially for a person like me who doesn't really have that much of awareness when it comes to this kind of topic. :D

Reply

Leave a Comment

Previous post:

Next post: