David's Technical Musings

34 Responses to “NextGEN Gallery Review – Displaying Images – ImageBrowser”

1. Davidsays:
   May 15th, 2008 at 4:48 am

   Nice. I was really hoping you would get to FlashViewer and the TiltViewer wp plugin. they are so cool. I managed to get them working in my flickr account but just can’t make it happen on the NextGen Gallery in my blog.

   You have some great suggestions for Alex. And this is one for you! Please do it (unless you already have and I have not found it yet)

   Thanks
   David

2. David Pottersays:
   May 15th, 2008 at 1:14 pm

   Thanks. Hopefully I’ll get to those soon.

3. Shaun Morrisonsays:
   June 5th, 2008 at 2:37 am

   Hi David – thanks for doing this fantastic writeup.

   However, I am having issues with both getting the Category Title () of a post to display and menu highlighting using the Image Browser.

   When viewing a post with an Image Browser style gallery inserted and clicking ‘Next’ for the next images I notice that the Category Title of the post no longer displays. Also the dynamic menu highlighting that relies on the category no longer works. I notice that the URL totally changes from the first page as well (although this is not an issue per se) e.g. http://www.something.com/newgallery/ to http://www.something.com/nggallery/post/newgallery/page/2/ – I notice this does not happen on your site’s example of the Image Browser. Do you know of a way to trick/hack the Image Browser pages to pull the category information from the post page that the subsequent Image Browser pages belong to?

   Many thanks,
   Shaun

4. Shaun Morrisonsays:
   June 5th, 2008 at 2:56 am

   I have solved the Category Title issue (simply using the wrong tag – duh), but the menu highlighting issue remains.

   …..
   Shaun

5. farasays:
   June 30th, 2008 at 10:29 pm

   how do l rotate images?

6. David Pottersays:
   July 1st, 2008 at 4:04 am

   @fara – NextGEN Gallery doesn’t provide a facility to rotate images. You will need to do that before you upload the image. If you need to rotate images you’ve already uploaded, you can simply download them, rotate them in your favorite image editor, and then re-upload them in the same spot.

7. Lucky Dog » Announcement !!says:
   August 5th, 2008 at 12:55 am

   [...] NextGEN Gallery Review – Displaying Images – ImageBrowser [...]

8. Simonsays:
   October 10th, 2008 at 2:52 am

   I’m having some problems with the thickbox effect and was trying to find the cause when I stumbled upon your site.

   Clicking the picture on your site (IE7) the thickbox opens halfway below the bottom of the screen. I dont have same problem on other PC’s so guessing some setup porblem rather than a browser or version problem. Any clues? Thanks Simon

9. Melsays:
   December 10th, 2008 at 10:11 pm

   Hi!

   How do I move the <> above the image?
   Also, how can I remove the alt txt from appearing above the image?
   Not sure which file to update.
   I’m not a coder but I can manipulate code okay. =D
   My images are larger and I do not want the viewers having to scroll down to see the image browser controls.

   Thanks!

   ~ Mel

10. Michaelsays:
    December 15th, 2008 at 12:36 pm

    I would like to have just a text link to a gallery slideshow and I can’t figure out how to do this. I do not want a text link above a single image, but just a text link to the gallery slideshow. How do I code this?

11. Paolosays:
    January 10th, 2009 at 5:19 pm

    Hi!

    thanks for doing this great work,

    I would like different behaviour when I click on the image. My thumbnails are enough large, and I don’t need to open in larger view. So, instead of open the thickbox or any other image effect, I’d like simply to go to the next image. Often is boring to click on next/back button (you have to move the pointer exactly on these buttons) while if you just can click on any part of the image, you go to the next image. Any suggestion? Thanks

12. Josh Fialkoffsays:
    January 15th, 2009 at 8:25 am

    Hi David,

    I am having trouble customizing the look and feel of the NGG Widget on http://019d900.netsolhost.com/Wordpress/.

    I would like to:

    1) move the image down so that it does not interfere with the title
    2) put a CSS box around the image
    3) add a description and image title to each image

    Can you please tell me if this is possible, and if so, how?

    Thanks so much!
    -Josh

13. Arafat Rahmansays:
    January 17th, 2009 at 4:32 am

    I like to display thumbs images in list order, and when clicks on thumbs the big image will display in a div within the page, not in pop up div.
    How to do this? any idea?

14. Chandrusays:
    January 31st, 2009 at 9:01 pm

    If you put the imagebrowser tag in a div with specified width, then the image size will be changed accordingly. Thats how I have restricted the image sizes in my blog.

15. wyophilsays:
    February 15th, 2009 at 9:36 pm

    I’m having the same Thickbox/IE issue as Simon stated. Any suggestions? Thanks for the forum.

16. fretbuzzsays:
    February 25th, 2009 at 10:35 am

    How can I create an image browser page that uses more than one gallery? This doesn’t work: [imagebrowser id=1,3]

17. cheddarsays:
    April 3rd, 2009 at 5:57 am

    Hi
    Is this possible to add “description” for each picture? I’m dying to have this function

18. scorpionisays:
    April 8th, 2009 at 6:13 am

    Hi,

    It would be nice to have a first and last button on the image browser, as well as a dropdown selection menu to directly go to a particular picture (I use this plugin for my webcomic because it’s so userfriendly!)

19. davidsays:
    April 15th, 2009 at 12:15 pm

    Hi David,
    Thanks for your amazing notes, this is a great resource! I’m having some basic trouble with my Nextgen gallery. I have photos uploaded into a gallery (http://test.cosmiccoach.com/?page_id=11), and I would like for the photos to appear much larger when I click on them. However, when I click on each photo it opens at exactly the same size as my thumbnail. I’m building this site to replace my old one, and I noticed that the same things happen with the images there as well (http://davidharel.com/Portfolio.php). This leads me to believe that I saved them incorrectly the first time, can you help me? I also want to make the background of my gallery black to match my site theme, but I figured one thing at a time…

20. Adriaansays:
    June 10th, 2009 at 10:38 pm

    Hi David, I would like to have the image displayed after I click on the thumb to display in my sidebar, is their any shortcodes for this or how should I call the fuction?

    Thanks.

21. Arunsays:
    June 12th, 2009 at 1:09 am

    when we click on the next and back button, the page as a whole is reloading
    is there any solution to load image alone?

22. Garysays:
    July 4th, 2009 at 6:08 am

    For anyone new, please take my advice which is non-technical.
    NextGEN gallery may well be free, but it is NOT easy to work out, it is NOT intuitive to use, it does NOT have very many functions and it is VERY difficult to use.
    I still have not been able to get it to work after all this time and even if it did work for me, you can only upload one image at a time, so a large gallery of images as I have will take you a long time to post up.
    Others have managed with help to get it to work so you might also but be warned, the path is long and frustrating.
    PS if you do get it to work can you please tell me how the hell you did it!!!!

23. Wojteksays:
    July 30th, 2009 at 12:34 am

    Hi David!

    Put this css in Album Styles Extend section and you won’t have any problems with resizing images. But, there is a css for the site I’m building, you have to look for this and check with default css file. Cheers!

    .ngg-albumoverview {
    margin-top: 10px;
    width: 500px;
    clear:both;
    display:block !important;
    }

    .ngg-album {
    height: 100%;
    float:left;
    position:relative;
    margin-bottom: 17px;
    }

    /* IE6 will ignore this , again I hate IE6 */
    /* See also http://www.sitepoint.com/article/browser-specific-css-hacks */
    html>body .ngg-album {
    float:left;
    margin-bottom: 17px;
    }

    .ngg-album {
    overflow: hidden;
    }

    .ngg-albumtitle a {
    text-align: left;
    margin:0px;
    padding:1px 3px;
    font-size: 1em;
    font-family:Verdana;
    text-transform:uppercase;
    background:#3A3B36;
    text-decoration:none;
    color:#ffffff;
    }

    .ngg-thumbnail {
    float: left;
    margin-right: 15px;
    }

    .ngg-thumbnail img {
    margin:0;
    padding:0;
    width:232px;
    height:90px;
    margin-bottom:8px;
    }

24. Wojteksays:
    July 30th, 2009 at 1:30 am

    ugh! i’m lookin’ for this and i put the wrong section! you’ll have nearly all of my code if you can – delete previous post. i’m sorry for this mistake!

    /* ———– Image browser style ————-*/

    .ngg-imagebrowser {
    max-width:480px;float:left;
    }

    .ngg-imagebrowser img {
    margin:0;
    display:block !important;
    padding:0;
    max-width:480px;
    }

    .ngg-imagebrowser-nav {
    padding:0
    margin:0
    background:#3A3B36;
    margin-top:10px;
    }

    .ngg-imagebrowser-nav .back {
    float:left;
    border:1px solid #3A3B36;
    background:#3A3B36;
    padding:1px 3px;
    margin-bottom:44px;
    }

    .ngg-imagebrowser-nav .next {
    float:right;
    border:1px solid #3A3B36;
    background:#3A3B36;
    padding:1px 3px;
    margin-bottom:44px;
    }

    and my imagebrowser.php file:
    <div class=”ngg-imagebrowser” id=”anchor ?>”>
    href_link ?>
    alttext ?>

    <a class=”ngg-browser-prev” id=”ngg-prev-previous_pid ?>” href=”previous_image_link ?>”>

    <a class=”ngg-browser-next” id=”ngg-next-next_pid ?>” href=”next_image_link ?>”>

    description ?>

25. Bambangsays:
    August 8th, 2009 at 3:39 am

    Thanks David for this useful sharing. But I have a question..How can I remove the alt text above the image? Thanks

26. Pat Bloomfieldsays:
    August 15th, 2009 at 8:45 am

    I was almost at the point of thinking that I’d need to add single images into my posts as I want images displayed at full resolution without being resized. Imagebrowser looked ideal except as David says it fills the space available.

    After playing around with several ideas I have a solution that works assuming you use a standard width image throughout your website. You need to modify the css code as follows:

    .ngg-imagebrowser img {
    border:1px solid #A9A9A9;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left:55px;
    width: 500px;
    display:block !important;
    padding:5px;
    }

    .ngg-imagebrowser-nav {
    width:500px;
    padding:5px;
    margin-left:55px;
    }

    Both block of code need to be modified so the image and buttons correctly align.

    I’ve set the width to 500px and added a margin-left tag to the img block and then tweaked the values to position the browser central in my blog posts. This value may vary depending on the theme you use.

    Hope that helps.

27. TechieZonesays:
    September 27th, 2009 at 7:44 am

    Is there anyway to prevent linking to the original image while clicking on the image in image browser view.

    For example if I ma viewing an image in image browser it shows the original image like http://dpotter.net/Technical/wp-content/multiblog/Technical/gallery/salamanca-spain/img_0617.jpg

    Is thr a way to prevent this?

28. Elizabethsays:
    December 3rd, 2009 at 9:51 am

    Hey I am working with the image browser, I have placed it in the middle of my post, and each time you click on the arrow to view the next image it takes you to the next image but the beginning of the page so you cannot see the image and have to scroll down. Is there away to make it stay on the image?
    When I use the example on this page that you supply it also does this. I have to scroll down again to see the next image.
    Thnx

29. Tepeesays:
    December 22nd, 2009 at 4:45 am

    Hello,

    I have a tip to have a normal size for the images when using Image Browser : the max-width !
    In the .css file defining the style that you have chosen for your Nextgen Gallery (for exemple ngg_k2.css), replace the “.ngg-imagebrowser img” section by this one :

    .ngg-imagebrowser img {

    border:0px;

    margin-top: 10px;

    margin-bottom: 10px;

    margin-left: auto;

    margin-right: auto;

    max-width: 100%;

    display:block !important;

    padding:5px;

    }

    It will preserve the original size of your pictures, and prevent it to be bigger than your blog…
    Cheers

30. Double Rsays:
    February 19th, 2010 at 5:55 pm

    ThanK you so very much David Potter for this excellent and helpful resource for this plugin. I did not know what I was doing when I installed it and now, an hour later, I do. Much appreciated!

31. Hélio Cristóvãosays:
    March 3rd, 2010 at 1:47 am

    Hi there.
    1st of all, Tepee – Thanks for the tip – working 100% the “max-width: 100%;” tag on imagebrowser. Highly recommended

    David, great info. about NextGen, keep it up!
    I have a question on imagebrowser feature: how – when clicking the image – do we override linking to original file (opening popup with the effect), I really don´t want this, my original image is already shown in imagebrowser, and I have caption fields filled with html tags, etc. What I wanted is, when clicking the image, to link back to the gallery, or show next image, one of them would do.

    Thanks for helping.

32. Hélio Cristóvãosays:
    March 9th, 2010 at 3:07 am

    Hi again.

    I noticed on imagebrowser that on cursor moving above an image, Alternative text appears as the content in my image Caption/Description. The thing is, I´m using caption/description field to add multiple info., links and other HTML tags, that´s really not appropriate to appear as Alternative text.
    Any hints to fix this?
    Thanks

33. Sankarsays:
    March 9th, 2010 at 6:24 am

    Hi,

    First of all thanks to david. I have 2 questions.

    1. How to move the back and next buttons to up in image browser?

    2. How to remove hyphens in file name (and also alt text) which is above image in image browser?

    It would be great if some one could help me.

    Thanks
    Sankar

34. Andysays:
    March 11th, 2010 at 3:10 pm

    hi David

    Thanks for a great guide to NextGen.

    With NextGen when I’ve got 1 thumb in a post, if I click on that thumb then the NextGen style larger ‘lightbox’ pic pops up and that’s fine.

    What’s I’m trying to work out is, still with just 1 thumb in the post, is it possible for the lightbox pop up to then have “next” and “back” options for a gallery. For example….1 thumb but say 6 larger images in the lightbox.

    Would be very grateful for any ideas on this.

    Thanks.
    Andy

Leave a Reply