Support » Plugins » [Plugin: NextGEN Gallery] Adding Close Button [x] and customizing controls

  • Ive seen several posts with people asking how to add a close button to the lightbox feature on next gen gallery, but no answers. I’m hoping someone has some answers as to how to do this. I understand that simply clicking on the photo closes the slide show, but not everyone is as web savvy as us here on the forums. I’ve been asked to add a close button for a client, but I cant seem to find where to add this.

    Additionally any help on customizing the “>>” arrows on the navigation would be great.

    Thanks again.

Viewing 14 replies - 1 through 14 (of 14 total)
  • Customizing the ‘>>’ arrows is pretty simple with a little css. You’ll need to edit the shutter-reloaded.css file found at wp-content/plugins/nextgen-gallery/shutter/shutter-reloaded.css.
    Before you get started, it would be a good idea to save a copy of the shutter-reloaded.css to something like shutter-reloaded_orig.css just in case you make a blunder and need to revert back to the original.

    Modify the following lines in shutter-reloaded.css:

    #shDisplay div#shNext{
    #shDisplay div#shPrev {

    to the following, but you may need to change the percentage based on the size of your photos: (Don’t forget to save and reload the gallery page in your browser.)

    #shDisplay div#shNext {
    	bottom: 50%;
    	position: fixed;
    	right: 15%;
    #shDisplay div#shPrev {
    	position: fixed;
    	bottom: 50%;
    	left: 15%;

    Once you get those to work, you can add the [x]. Add the following lines of code immediately following the last example:

    #shDisplay div#clbtn {
    	position: fixed;
    	top: 0%;
    	right: 0%;
    	margin-right: 10px;
    	margin-top: 10px;

    Now, you’ll need to modify the shutter-reloaded.js file (found in the same directory). Again, not a bad idea to make a backup first. On line 125, add the following:

    closebtn = '<a href="#" onclick="shutterReloaded.hideShutter();">[x]</a>';

    Then change line 128 from:

    NavBar = '<div id="shTitle"><div id="shPrev">' + prevlink + '</div><div id="shNext">' + nextlink + '</div><div id="shName">' + shutterLinks[ln].title + '</div>' + imgNum + '</div>';


    NavBar = '<div id="shTitle"><div id="clbtn">' + closebtn + '</div><div id="shPrev">' + prevlink + '</div><div id="shNext">' + nextlink + '</div><div id="shName">' + shutterLinks[ln].title + '</div>' + imgNum + '</div>';

    That should render a nice [x] in the upper right hand corner. You can also customize the font sizes and other properties of your [x] and >> in the #shDisplay div#shTitle a { area of the shutter-reloaded.css file.

    Good luck!

    Is there any way to get the close link to stick to the top right of the image? Currently mine is in the top right of the browser window and I don’t think it’s instantly noticeable to users.


    Do the following:

    #shDisplay #shWrap #imgContainer> #clbtn >a {
    	right: 1%;
    body {
    	height: 100%;
    #shShutter *, #shDisplay * {
    	padding: 0;
    	margin: 0;

    and change line 129 to:

    D.innerHTML = '<div id="shWrap"><div id="imgContainer"><div id="clbtn">' + closebtn + '</div><img src="'+shutterLinks[ln].link+'" id="shTopImg" title="' + t.msgClose + '" onload="shutterReloaded.showImg();" onclick="shutterReloaded.hideShutter();" /></div>' + NavBar +'</div>';

    I’ve found a pretty nice solution to this problem. dmuir suggested a good workaround on this thread: I tried it, and it is perfect!

    Thank you all. this generally does just what we need

    freaking awesome thanks rwhall

    Hello, nice thread. Thanks!

    One additional question, how can I get the custom fields i have used to display in the shutter nav bar?

    My gallery has a number of custom fields I use for price, artist name, region etc and I would like to show the price, artist name and title in the shutter gallery. here it is:

    I assume its a couple of lines of extra code in the shutter.js file and some css tweaking, but I know nothing about javascript so wouldn’t even know where to start!

    Any help would be appreciated! Thanks!!

    Thank you for your reply. It was very clear and easy to understand ! I do appreciate your post !

    Great post!
    There is a way, such moving the modified .css and .js files in the theme directory, to save the customizations during NextGen Gallery upgrades?

    Thank you!

    rwhall Thanks Buddy.

    Useful Post. This .JS file in tag pls add class and make it.
    this is too use full.

    But I want to change loading Img How to do ?
    if youa have any idea please told me

    Thank you Buddy.

    Great info..thanks..just what I’ve been working on trying to figure out…

    Here’s a way of adding a close button without hacking away at any code. This will give you a light box with a close button which I think is easier to use.

    1. Download the JW image rotator. Upload the imagerotator folder to your web server.

    2. In the WordPress admin go to Gallery > Options > Slideshow. Configure the path to the imagerotator.swf. For example:

    Click save changes

    3. Go to Gallery > Options > Effects. Change JavaScript Thumbnail effect: to ‘Thickbox’. Save changes.

    4. Now you have a nicer lightbox with a close button 🙂

    5. Some extra text may appear before your thumbnails, something like – [show in slideshow]. To remove this, go to Gallery > Options > Gallery. Remove all text in the first box next to ‘Integrate Slideshow’.

    6. Excellent!

    does not work with [x] botton.
    maybe I’m wrong with line 125
    how do I exactly know wich one is 125?
    thank u

    2 rwhall
    how can I add thums with album photos to shutter window (zoom in view)
    I need almost the same like this (see left side)
    thanx in advance

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘[Plugin: NextGEN Gallery] Adding Close Button [x] and customizing controls’ is closed to new replies.