Title: [Plugin: NextGEN Gallery] Featured Slideshow
Last modified: August 20, 2016

---

# [Plugin: NextGEN Gallery] Featured Slideshow

 *  [weilunt0219](https://wordpress.org/support/users/weilunt0219/)
 * (@weilunt0219)
 * [13 years, 8 months ago](https://wordpress.org/support/topic/plugin-nextgen-gallery-featured-slideshow/)
 * So most modern sites now have a “Featured Section” which is a slideshow of the
   best projects made. Usually, these site just use JQuery:
 * [http://www.templatemonster.com/website-templates/35069.html](http://www.templatemonster.com/website-templates/35069.html)
 * The example above uses the JQuery cycle, just like the NextGen Gallery; Which
   is why, I love this gallery. However, in the example above, they have a navigation
   to allow the user to click to a specific image within the slideshow. How would
   I go about doing that in the NextGen Gallery?
 * [http://wordpress.org/extend/plugins/nextgen-gallery/](http://wordpress.org/extend/plugins/nextgen-gallery/)

Viewing 15 replies - 1 through 15 (of 16 total)

1 [2](https://wordpress.org/support/topic/plugin-nextgen-gallery-featured-slideshow/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/plugin-nextgen-gallery-featured-slideshow/page/2/?output_format=md)

 *  [robhadfield](https://wordpress.org/support/users/rob_che/)
 * (@rob_che)
 * [13 years, 8 months ago](https://wordpress.org/support/topic/plugin-nextgen-gallery-featured-slideshow/#post-2962485)
 * Cycle has lots of configuration options to add next/prev navigation and other
   options.
 * Here’s the config options to add next/add buttons.
 * I use this a lot, happy to help where I can.
 * Rob
 *  Thread Starter [weilunt0219](https://wordpress.org/support/users/weilunt0219/)
 * (@weilunt0219)
 * [13 years, 8 months ago](https://wordpress.org/support/topic/plugin-nextgen-gallery-featured-slideshow/#post-2962516)
 * Thanks for your reply Rob. Though I never really figured out how to do what I
   wanted from just your post, I have a new problem I face.
 * Currently, NextGen Gallery generates this code for my slideshow:
 *     ```
       <div id="ngg-slideshow-1-1-1" style="...">
       <img src="SRC1" style="...">
       <img src="SRC2" style="...">
       <img src="SRC3" style="...">
       <img src="SRC4" style="...">
       </div>
       ```
   
 * For Experimental Purposes, I’d rather NextGen Gallery generate this code for 
   my slideshow:
 *     ```
       <div class="ngg-slideshow-1-1-1" style="position: relative; overflow: hidden;">
       <ul class="items">
       <li><img src="SRC1" alt=""></li>
       <li><img src="SRC2" alt=""></li>
       <li><img src="SRC3" alt=""></li>
       <li><img src="SRC4" alt=""></li>
       </ul>
       </div>
       <ul class="pagination">
       <li class=""><a href="#">1</a></li>
       <li class=""><a href="#">2</a></li>
       <li class=""><a href="#">3</a></li>
       <li class=""><a href="#">4</a></li>
       </ul>
       ```
   
 * How would I go about doing this? I went to “functions.php” and scoured for an
   answer to my needs, but I couldn’t find out how to change around the code output(
   because I suck at coding).
 *  [robhadfield](https://wordpress.org/support/users/rob_che/)
 * (@rob_che)
 * [13 years, 8 months ago](https://wordpress.org/support/topic/plugin-nextgen-gallery-featured-slideshow/#post-2962517)
 * So, you just want the images in a list? Why do you need it to be in a list?
 * Can you explain why you need this particular code to be generated? I’m not understanding
   what problem you’re trying to solve.
 * Reply and I’ll help.
 *  [robhadfield](https://wordpress.org/support/users/rob_che/)
 * (@rob_che)
 * [13 years, 8 months ago](https://wordpress.org/support/topic/plugin-nextgen-gallery-featured-slideshow/#post-2962518)
 * OK – so you want to try and replicate the slideshow here but with NGGallery images?
   [http://www.templatemonster.com/demo/35069.html](http://www.templatemonster.com/demo/35069.html)
 * If that’s what you’re wanting to do then you will need to create a custom template
   for NGGallery : [http://www.nextgen-gallery.com/old-pages/shortcodes/templates/](http://www.nextgen-gallery.com/old-pages/shortcodes/templates/)
 * This would be an interesting problem to solve actually… Is this what you want
   to do?
 * oh, here’s the cycle config page: [http://jquery.malsup.com/cycle/int2.html](http://jquery.malsup.com/cycle/int2.html)
 *  Thread Starter [weilunt0219](https://wordpress.org/support/users/weilunt0219/)
 * (@weilunt0219)
 * [13 years, 8 months ago](https://wordpress.org/support/topic/plugin-nextgen-gallery-featured-slideshow/#post-2962524)
 * Yes Rob, You hit the nail on the head. I want to replicate the slideshow on “
   Template Monster” but with NGGallery. I’ll check out the links your provided 
   and report back. Thank you for your help
 *  [robhadfield](https://wordpress.org/support/users/rob_che/)
 * (@rob_che)
 * [13 years, 8 months ago](https://wordpress.org/support/topic/plugin-nextgen-gallery-featured-slideshow/#post-2962525)
 * Have a play and let me know – I’m sure we can get this going.
 *  Thread Starter [weilunt0219](https://wordpress.org/support/users/weilunt0219/)
 * (@weilunt0219)
 * [13 years, 8 months ago](https://wordpress.org/support/topic/plugin-nextgen-gallery-featured-slideshow/#post-2962533)
 * Oh man, but that custom template thing for the gallery. Is there a similar page
   for custom templates except this time for slideshows?
 *  [robhadfield](https://wordpress.org/support/users/rob_che/)
 * (@rob_che)
 * [13 years, 8 months ago](https://wordpress.org/support/topic/plugin-nextgen-gallery-featured-slideshow/#post-2962534)
 * You can create custom templates for any options.
 * If you copy the ‘gallery-carousel.php’ from ‘nextgen-gallery/view’ and move it
   to ‘yourtheme/nggallery’ and make some changes you should see the changes on 
   the front end.
 * You can then look at changing the template name and adding template=”mytemplate”
   in your short code.
 * It’s just a loop over the images and html elements so isn’t so complex. You could
   just build something totally custom. Start with the gallery-carousel for a loop
   or just build your own using jQuery Cycle.
 * I can try and mock something up I’m confusing you 🙂
 *  Thread Starter [weilunt0219](https://wordpress.org/support/users/weilunt0219/)
 * (@weilunt0219)
 * [13 years, 8 months ago](https://wordpress.org/support/topic/plugin-nextgen-gallery-featured-slideshow/#post-2962541)
 * Oh man, I played around, but in the end, it’s like a blind man enjoying an art
   gallery. All you’ve said is like greek to me, so is ‘gallery-carousel.php’ the
   file that controls the look and feel of the slideshows?
 * P.S Sorry for the late reply, I’ve been quite busy now that school’s started 
   back up.
 *  [robhadfield](https://wordpress.org/support/users/rob_che/)
 * (@rob_che)
 * [13 years, 8 months ago](https://wordpress.org/support/topic/plugin-nextgen-gallery-featured-slideshow/#post-2962542)
 * haha, let me have a play weilunt0219 and try and recreate it – maybe we can help
   others too.
 * I’ll try and do this today for you.
 * Rob 🙂
 *  [robhadfield](https://wordpress.org/support/users/rob_che/)
 * (@rob_che)
 * [13 years, 8 months ago](https://wordpress.org/support/topic/plugin-nextgen-gallery-featured-slideshow/#post-2962543)
 * Hey
 * So – I’ve replicated the slideshow using the NG-Gallery templates. Let’s see 
   if we can get it working on yours…
    1. Create a folder called ‘nggallery’ within your theme folder.
    2. Create a file called ‘gallery-slideshow.php’ and paste in this code: [http://pastebin.com/eGGnGwuw](http://pastebin.com/eGGnGwuw)
    3. In the footer of your page put this code (replacing the gallery ID):
    4.     ```
           <script>
       
               $('ul.slideshow')
               	.after('<div class="slideshow_nav">')
           		.cycle({
           		    fx:     'scrollLeft',
           		    speed:  2000,
           		    pager:  '.slideshow_nav'
           	    });
       
           </script>
           ```
       
    5. Paste this into your theme where you want the slideshow to appear:
    6.     ```
           <?php echo do_shortcode('[nggallery id="1" template="slideshow"]'); ?>
           ```
       
 * I’ve coded this for images 800pixels wide – Obviously this will only really work
   if all images are the same size. The styling is in the actual template, this 
   can be moved to your stylesheet of course.
 * Let me know how you get on.
 * Rob
 *  Thread Starter [weilunt0219](https://wordpress.org/support/users/weilunt0219/)
 * (@weilunt0219)
 * [13 years, 8 months ago](https://wordpress.org/support/topic/plugin-nextgen-gallery-featured-slideshow/#post-2962544)
 * So should the folder directory be:
 * `\wp-content\themes\nggallery`
 * or
 * `\wp-content\themes\twentyten\nggallery`
 * Oh man, I’m sorry for being so stupid
 *  [robhadfield](https://wordpress.org/support/users/rob_che/)
 * (@rob_che)
 * [13 years, 8 months ago](https://wordpress.org/support/topic/plugin-nextgen-gallery-featured-slideshow/#post-2962545)
 * No worries – it actually goes into your theme folder so option two 🙂
 * The plugin looks for a custom template first in your theme folder and then (if
   it doesn’t find one) it will go for the default.
 * I’ve tried the code and it works well so I hope you get it sorted.
 * Good luck.
    Rob
 *  Thread Starter [weilunt0219](https://wordpress.org/support/users/weilunt0219/)
 * (@weilunt0219)
 * [13 years, 7 months ago](https://wordpress.org/support/topic/plugin-nextgen-gallery-featured-slideshow/#post-2962551)
 * HAHA!!! It’s worked! I’ve spent a few days trying to figure out why it’s worked
   for you and not me, but then I realized that it’s because my file was named wrong
   =P THANK YOU! Now I can finally start experimenting and and create a somewhat
   professional looking template with wordpress. Once again, I thank you Rob.
 *  [robhadfield](https://wordpress.org/support/users/rob_che/)
 * (@rob_che)
 * [13 years, 7 months ago](https://wordpress.org/support/topic/plugin-nextgen-gallery-featured-slideshow/#post-2962552)
 * Excellent – I’d love to see it online, let me know when you have it working somewhere.
 * Thanks weilunt0219.

Viewing 15 replies - 1 through 15 (of 16 total)

1 [2](https://wordpress.org/support/topic/plugin-nextgen-gallery-featured-slideshow/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/plugin-nextgen-gallery-featured-slideshow/page/2/?output_format=md)

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

 * ![](https://ps.w.org/nextgen-gallery/assets/icon-256x256.png?rev=2083961)
 * [Photo Gallery, Sliders, Proofing and Themes - NextGEN Gallery](https://wordpress.org/plugins/nextgen-gallery/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/nextgen-gallery/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/nextgen-gallery/)
 * [Active Topics](https://wordpress.org/support/plugin/nextgen-gallery/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/nextgen-gallery/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/nextgen-gallery/reviews/)

 * 16 replies
 * 3 participants
 * Last reply from: [nodynu](https://wordpress.org/support/users/nadinecamille/)
 * Last activity: [12 years, 9 months ago](https://wordpress.org/support/topic/plugin-nextgen-gallery-featured-slideshow/page/2/#post-2962596)
 * Status: not resolved