NextGen Gallery Slideshow

Click for Album

In the first post of this series, I talked about my decision-making with regard to how to format my blog. Generally, each post has a left-justified thumbnail with a graphic element. The primary elements include an external image, a video, or a slideshow of photos that integrated into a NextGen Gallery on my blog. Typically I create a box (division), using HTML which allows me to control that the contents be left justified on the page, the size of the graphic, and justification of text within the box. This slideshow illustrates a box (division) without border. The caption is centered using a style option.

Centered Caption

Here the box (division) is shown with the optional border and centered caption. I am including the simple coding within WordPress for those who choose to try the NextGen Gallery plug-in.

<div style=”border: 1px solid black; margin: 3px; padding: 3px; text-align: center; float: left; width: 232px;”>[ slideshow id=1 w=226 h=170]Centered Caption</div>

Leave out the blank before the keyword ‘slideshow’.

If you don’t already have this plug-in installed in WordPress, go to your WordPress dashboard>Plugins>Plugin Browser/Installer

Input the name NextGen Gallery in the search box. Click on NextGEN Gallery in the results. Click on Install Now and wait for it to install. A new heading will appear in your dashboard called Gallery. Go there to set up and manage your albums, galleries, and pictures.

This concludes my series on formatting a WordPress blog.  I hope you found it helpful.

UPDATE (2012-01-25): I did not include the hyperlink code for the caption. Sorry. Here you go:

<div style=”margin: 3px; padding: 3px; text-align: center; float: left; width: 232px;”>[ slideshow id=1 w=226 h=170 ]<a href=”http://url_of_album_you_want_to_link_to_goes_here” target=”_blank”>Click for Album</a></div>

Leave out the blank before the keyword ‘slideshow’.

This entry was posted in Geeky, Tree Hugging and tagged , , , , , , . Bookmark the permalink.

15 Responses to NextGen Gallery Slideshow

  1. avatar weirdrubikscube says:

    how do you display the caption only ?? I’m trying to find the way to since hours but i don’t get it :/

    thanks !

  2. avatar Tom says:

    I’m not sure I really understand your question. Are you asking how to have a caption that is not a hyperlink to an album?

    If you click on the link at the bottom of the summary it will take you to the full post. The sample text shows a caption with no hyperlink.

    ‘float’ specifies where the division block is placed relative to the text.

    ‘text-align’ specifies how text within the division, including the caption, is justified. I hope this answers your question.

  3. avatar iconico says:

    I think weirdrubikscube was looking for a way to always show the caption in a NextGen slideshow, so am I.

    But it’s always the same: captions are shown until you put your mouse over the image, then captions are autohiding (unless you have the mouse over the caption)… Do you know how to keep the caption always visible?

  4. avatar Tom says:

    Agree. Even with the latest version, there is no option within NextGen to always to display the alt text after a mouse over.

  5. avatar eileen says:

    This is exactly what I would like to do – can you tell me where to put this code? I tried on the page where I want the slideshow to appear, without any luck

  6. avatar Tom says:

    Eileen, are you in the edit window in html mode instead of visual mode? (Be sure you clicked on the ‘HTML’ tab above the edit window.) Also make sure you deleted the space in front of the keyword ‘slideshow.’ Good luck.

  7. avatar Ryan says:

    Hi,
    I want to line up a nextgen slideshow on the left with text wrapping to the right like you showed in your sample without a caption, without the loading icon, and without the nav bar. I can keep the icon and nav bar off with the nextgen settings, but for the love of god, I can’t get the slideshow to go anywhere but centered. Help please. http://atahoeweddingtoremember.com/wordpress/
    Home page, slidshow in the top center. I want the text starting “what makes us different” on the right of the page, and the slideshow directly next to it on the left. Thanks…

  8. avatar Ryan says:

    Thank you so much for the reply, but I am not getting it to work.. 🙁 I put the code in where I had the slideshow, and it still looked the same. Now, do I just put the text your code? How do I code the heading for the text? Sorry to be a pain, and thanks for your excellent help.

    • avatar Ruben says:

      Hi Ryan,

      I had the same thing happen to me, I couldn’t get the slideshow to left-justify with text-wrap, even with Tom’s example. What I ended up doing is taking Tom’s example, hard coded this into NextGen’s css:

      float: left;

      and it worked like a charm for me. Just add it to the .slideshow elements.

  9. avatar Daniel says:

    How can I make the slideshow go faster? Spend less time to change from picture to picture without having to click on it.

    • avatar Tom Long says:

      Assuming you are using WordPress, go to the dashboard and scroll down the left sidebar to ‘Gallery’. If the Gallery submenus aren’t already visible, click the down arrowhead to the right of ‘Gallery’. Then go to ‘Options>Slideshow>duration and change that setting.

  10. avatar Zakir says:

    Hi , good tips, i also using nextgen gallery in http://gorilla.londonmagento.com/. its in bottom left. Everything works fine except one thing lacks which is pagination. I want to display e.g 5 images so i need 5 button or number lists e.g. 1 2 3 4 5. When user clicks 4, image 4 will be displayed.

    I’m not sure whether it is possible with nextgen gallery.

  11. avatar Jen says:

    I have tried what you suggested and I can get a caption to appear but
    a) its not centred
    b) the caption is static and says” centred caption” rather than displaying the alt/description text that is associated with the images

    How do I do this…?

    • avatar Tom Long says:

      Jen,

      Welcome to LSS. The code that says “text-align: center;” in the division style must be included to center the caption. The caption is not the alt/description text from the gallery but the caption you add. So instead of typing “Centered Caption” you type “Click for Album” or whatever caption you want below the slideshow. The slideshow width must be set wide enough so that will the padding it will fill up the division forcing the caption to the line below it in order for the caption to be centered.

      As for being static, I apologize that my example did not include the hyperlink code. I have updated the post to include this.

Comments are closed.