WordPress.org

Ready to get started?Download WordPress

Forums

[Plugin: NextGEN Gallery] Adding Close Button [x] and customizing controls (15 posts)

  1. GabyVazquez
    Member
    Posted 4 years ago #

    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.

  2. rwhall
    Member
    Posted 4 years ago #

    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{
    	float:right;
    }
    
    #shDisplay div#shPrev {
    	float:left;
    }

    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>';

    to:

    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!

  3. greencode
    Member
    Posted 4 years ago #

    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.

  4. elanio
    Member
    Posted 4 years ago #

    Yep.

    Do the following:

    #shDisplay #shWrap #imgContainer> #clbtn >a {
    	font-size:18px;
    	margin-bottom:10px;
    	color:#fff;
    	text-align:right;
    	right: 1%;
    }
    
    body {
    	height: 100%;
    }
    
    #shShutter *, #shDisplay * {
    	padding: 0;
    	margin: 0;
    }
    #clbtn{
    	margin-right:-50%;
    	margin-bottom:10px;
    }

    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>';
  5. scruffypuppy
    Member
    Posted 4 years ago #

    I've found a pretty nice solution to this problem. dmuir suggested a good workaround on this thread: http://wordpress.org/support/topic/333195 I tried it, and it is perfect!

  6. myfairladyah
    Member
    Posted 4 years ago #

    Thank you all. this generally does just what we need

  7. GabyVazquez
    Member
    Posted 4 years ago #

    freaking awesome thanks rwhall

  8. ciaranm
    Member
    Posted 4 years ago #

    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: http://zhoom.com.au/mason/galleries/mason-test-1/

    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!!

  9. beibicris
    Member
    Posted 4 years ago #

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

  10. gpz500
    Member
    Posted 4 years ago #

    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!

  11. om4ezee
    Member
    Posted 4 years ago #

  12. Setab
    Member
    Posted 4 years ago #

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

  13. mfieldhouse
    Member
    Posted 3 years ago #

    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: http://www.plansforextensions.com/imagerotator/imagerotator.swf

    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!

  14. Leomeskys
    Member
    Posted 3 years ago #

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

  15. etoja
    Member
    Posted 3 years ago #

    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) http://petemitch.110mb.com/shadowboxmods/1_thumbnails/shadowbox1a/
    thanx in advance

Topic Closed

This topic has been closed to new replies.

About this Topic