Theme skin: (Here you can choose theme skin)Homepage slider type: (Here you can choose one of 5 sliders)Select google font: (Here you can choose google font)Select cufon font: (Here you can choose cufon font)Select font type:
Cufon font
Google font

Theme main color: (Here you can change main color. In CMS you can easy change also colors for main menu.)
Main color
FacebookRSSVimeoLinkedInFlickrTwitterYouTube
Latest StoryMedia GalleryCMSFAQsVersion UpdatesContact Us
You are here: Innovation+Science 2 » NGG Thumbs (Advanced Shortcodes)

NGG Thumbs (Advanced Shortcodes)

This is one of the Advanced Shortcodes available in Innovation+Science 2 theme. Take a look at some examples how you can setup this shortcode. Like all shortcodes in this theme you can setup them with special Lightbulb editor tool – this allows you to define all parameters and content for selected shortcode. To read more about other shortcodes and Lightbulb feature check links below:

Standard Shortcodes
Advanced Shortcodes
Lightbulb (Editor Tool)
Column Shortcodes

NGG Thumbs (dcs_ngg, dcs_ngg_single, dcs_ngg_last, dcs_ngg_random)

Four shortcodes for NGG Thumbs are available: dcs_ngg, dcs_ngg_single, dcs_ngg_last, dcs_ngg_random. Each one allows you to create a thumbnail images gallery with lightbox functionality and each one has some special additional functionality that can be useful for different needs. Before you will use NGG thumbs, you must have a gallery created in NextGEN Gallery plugin – then in Lightbulb options you will be able to select this gallery from dropdown list to use it for shortcode.

For all four NGG Thumbs shortcodes you can use Lightbulb options (parameters) to define thumbnails size and margins size – it is possible to set the margins for thumbnails and also bottom margin for whole gallery (thumbnails container). You can also change thumbs border size and color, create rounded corners for thumbs, or add a Lightbox group. The Lightbox group allows to connect all images in the NGG thumbs gallery, so when one image will be displayed in lightbox window the viewer can switch to other images with lightbox options. It is also possible to set a padding value for thumbnails and background color – this allows to create some special look of your gallery.

NGG Thumbs shortcode is very easy to setup thanks to Lightbulb tool and it can be customized by a list of parameters – see some examples down below on this page. If you want to see more galleries created with NGG Thumbs – go to Articles section to check some live examples of how this shortcode can be used on site.

• Example 1: NGG Thumbs with default settings
a gallery was created in NGG plugin and then selected from drop down list in Lightbulb options for this shortcode, tips and random options are selected – tooltip text is displayed when you hover mouse over image, 9 images set to display

[dcs_ngg  id="3"  w="80"  h="80"  number="9"  random="true"  tips="true"  group="Helga Weber" /]
Top

• Example 2: NGG Thumbs Single

shortcode creates a gallery with images form various NGG galleries selected by image ID numbers, padding 4px for thumbnails is set to create a nice frame for each thumb
[dcs_ngg_single  list="198,119,301,318,389,367,226"  w="80"  h="80"  padding="4"  group="Tim Wang Photography"  /]
Top

• Example 3: NGG Thumbs Last
shortcode creates a gallery with latest 5 images form NGG gallery with ID number 15, if gallery is not selected – there is no id parameter in shortcode – last 5 images added to NGG would be displayed

[dcs_ngg_last  id="15"  w="80"  h="80"  number="5"  group="Tim Wang Lamborghini"  /]
Top

• Example 4: NGG Thumbs Random
shortcode creates a gallery with some random images from all NGG galleries created for site, it is also possible to select gallery and display random images only from this gallery

[dcs_ngg_random  w="80"  h="80"  number="9"  group="random images"  /]
Top

• Example 5: NGG Thumbs – different size, border color and padding
proportions of thumbnails changed to 80x140px, modified border color and padding set to 5px

[dcs_ngg  id="4" w="80" h="140" number="16" random="true" padding="5" group="Chris Willis - Fashion" bcolor="#CC81A1" bwidth="1" /]
Top

• Example 6: NGG Thumbs – no margins, no padding and no border
the same gallery like in example 5, but with no borders and margins for thumbnails

[dcs_ngg id="4" w="80" h="140" number="24" random="true" bshow="false" margin="0px 0px 0px 0px" group="Fashion - Chris Willis" /]
Top

• Example 7: NGG Thumbs – background color and padding
background color changes are visible only if padding parameter is used

[dcs_ngg  id="15"  w="120"  h="80"  number="12"  random="true"  padding="6"  group="Photo by Tim Wang"  bcolor="#FFDD00"
bgcolor="#FFEE55"  /]
Top

• Example 8: NGG Thumbs – border width and color
in Lightbulb options – with parameter in the code – you can change border width and border color, in this example border width is set to 5px and to black color

[dcs_ngg  id="7"  w="120"  h="140"  number="10"  random="true"  tips="true"  group="Tony Chen Photos"  bcolor="#000000"  bwidth="5"
mbottom="10"  /]
Top

• Example 9: NGG Thumbs – rounded corners (padding and border)
in Lightbulb options – with parameter rounded – it is possible to set a rounded corners for thumbs, you can also set the size for rounded corners (works only with padding)

[dcs_ngg  id="3"  w="88"  h="88"  number="18"  random="true"  tips="true"  bshow="true"  group="Helga Webber rounded gallery"
padding="6" bgcolor="#E2E2E2" rounded="10"  /]
Top

• Example 10: NGG Thumbs – in one-third column
by settings the right size of thumbnails you can create for example vertical galleries

Rutrum augue at dolor neque, quam vel sed ligula, magna egestas cras congue nullam, malesuada ut blandit consectetuer nunc fringilla sem. Libero laoreet donec arcu eros erat sed, adipiscing felis vel aliquam in, tincidunt mollis porro, pede metus eu aenean, duis cum ut non proin pede etiam. Pellentesque velit pellentesque consectetuer id nec. Eget bibendum in, sed duis sit fusce, libero rutrum, mus in vel. Class est ornare, felis mi lobortis magna posuere, orci consectetuer dictum eget facilisis lorem rem.

Tellus massa adipiscing morbi suscipit, non condimentum molestie. Sem eu ac, vulputate non suscipit nisl ligula volutpat, aliquet placerat vel at non, et fermentum eget. Aliquam sit sit condimentum orci dictum, pede aliquam ultricies suscipit nec eget. Nec aliquam leo velit nam id mattis. Tempor commodo ac et, tellus per integer at suspendisse. Diam feugiat vivamus montes iaculis, quam duis sodales iaculis morbi. Augue tempus nec quis metus quis, rhoncus eros vivamus lacus et leo et, quam aliquet, fermentum ante vehicula suspendisse lorem, non integer donec eu ut. Vulputate massa risus. Curabitur lectus ligula tortor nam in, cursus hac sed rhoncus eget blandit scelerisque, rerum amet, pellentesque nullam, et placerat ac diam. Pellentesque gravida arcu tortor, lectus accumsan, at elit maecenas.

Ultrices aenean, nullam consequat vel ligula per. Quis sit tincidunt ac, ligula ornare at fusce tellus sapien et. Proin et aenean hymenaeos praesent, litora eget turpis pellentesque a ut, eros arcu velit tempor eget, donec lacinia consectetuer fames, urna eget gravida et eros. At orci blandit vehicula feugiat, nisl sed vivamus purus etiam non, amet dolor. Porttitor dignissim pellentesque cursus, dapibus lacus pede nulla. Accumsan amet cras velit sed modi nullam, sed scelerisque vel mattis lectus.

Sem eu ac, vulputate non suscipit nisl ligula volutpat, aliquet placerat vel at non, et fermentum eget. Aliquam sit sit condimentum orci dictum, pede aliquam ultricies suscipit nec eget. Nec aliquam leo velit nam id mattis. Tempor commodo ac et, tellus per integer at suspendisse. Diam feugiat vivamus montes iaculis, quam duis sodales iaculis morbi. Augue tempus nec quis metus quis, rhoncus eros vivamus lacus et leo et, quam aliquet, fermentum ante vehicula suspendisse lorem, non integer donec eu ut. Vulputate massa risus.

Curabitur lectus ligula tortor nam in, cursus hac sed rhoncus eget blandit scelerisque, rerum amet, pellentesque nullam, et placerat ac diam. Pellentesque gravida arcu tortor, lectus accumsan, at elit maecenas. Ultrices aenean, nullam consequat vel ligula per. Quis sit tincidunt ac, ligula ornare at fusce tellus sapien et.

Proin et aenean hymenaeos praesent, litora eget turpis pellentesque a ut, eros arcu velit tempor eget, donec lacinia consectetuer fames, urna eget gravida et eros. At orci blandit vehicula feugiat, nisl sed vivamus purus etiam non, amet dolor. Porttitor dignissim pellentesque cursus, dapibus lacus pede nulla.

Accumsan amet cras velit sed modi nullam, sed scelerisque vel mattis lectus. Vulputate massa risus. Curabitur lectus ligula tortor nam in, cursus hac sed rhoncus eget blandit scelerisque, rerum amet, pellentesque nullam, et placerat ac diam.

Pellentesque velit pellentesque consectetuer id nec. Eget bibendum in, sed duis sit fusce, libero rutrum, mus in vel. Class est ornare, felis mi lobortis magna posuere, orci consectetuer dictum eget facilisis lorem rem.

Photography: Tim Wang

Tempor commodo ac et, tellus per integer at suspendisse. Diam feugiat vivamus montes iaculis, quam duis sodales iaculis morbi. Augue tempus nec quis metus quis, rhoncus eros vivamus lacus et leo et, quam aliquet, fermentum ante vehicula suspendisse lorem, non integer donec eu ut. 

[dcs_ngg  id="17"  w="294"  h="93"  number="5"  random="true"  bshow="false"  margin="0px 0px 2px 0px"  group="F1 Tim Wang photos"
mbottom="5"  /]
Top

• Example 11: NGG Thumbs – big size (3 images)
this shortcode is perfect also for big galleries that can work for example some presentation at the top of a page

[dcs_ngg  id="4"  w="320"  h="500"  number="3"  random="true"  bshow="false"  margin="0px 0px 15px 0px"  group="Photo Chris Willis"  /]
Top

• Example 12: NGG Thumbs – big size (4 images)
this shortcode is perfect also for big galleries that can work for example some presentation at the top of a page

[dcs_ngg  id="15"  w="480"  h="300"  number="4"  bshow="false"  margin="0px 0px 0px 0px"  mbottom="10"
group="Lamborghini photo by Tim Wang"  /]