Positioned close button in the top right of a pop up image WordPress
- SOLVED
How can I get the close button [x] http://bit.ly/uHrh3E in the top right handside of the pop up image (Click on the thumbnails in the main content to get the popup image)?
CHANGE:
Ok if you go here you can see the thumbnails which will yield the pop ups sorry about that. http://bit.ly/sZ9ob6 Currently the [x] is located in the top right of the browser window. However I would prefer it to be in the top right of the image.
I did find a solution: http://wordpress.org/support/topic/adding-close-button-x-and-customizing-controls which I have implemented but I can't seem to get it to work as you can see:
I'm using Next Gen Gallery and this is the fix I have used on the nextgen-gallery > shutter > shutter-reloaded.css page
Currently using the below as recommended by Christianto - but I would like the [x] to be in the top right corner of the image not the browser. Thank you.
#clbtn{
position: fixed;
top: 0%;
right: 0%;
margin-right: 10px;
margin-top: 10px;
}
nextgen-gallery > shutter > shutter-reloaded.js
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>';
Answers (5)
Christianto answers:
Hi,
It is better to use fixed position..
#shDisplay div#clbtn {
position: fixed;
top: 0%;
right: 0%;
margin-right: 10px;
margin-top: 10px;
}
or change #clbtn to
#clbtn{
position: fixed;
top: 0%;
right: 0%;
margin-right: 10px;
margin-top: 10px;
}
gerardweiz comments:
Thank you for your response but it has put it in the top right corner of the browser, not the pop up image. Is there anyway to get it on the pop up image itself on the top right hand corner please.
http://bit.ly/sZ9ob6
Christianto comments:
Its not possible, without editing shutter-reloaded.js
the container should have the correct width because image width is different, each time an images is clicked. And by position it to absolute, that means the position is depend on the wrapper or viewport.
Change your code on shutter-reloaded.js
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>';
to
var checkWidthImage = new Image();
checkWidthImage.src = shutterLinks[ln].link;
D.innerHTML = '<div id="shWrap"><div id="imgContainer" style="width:'+checkWidthImage.width+'px"><div id="clbtn">' + closebtn + '</div><img src="'+shutterLinks[ln].link+'" id="shTopImg" title="' + t.msgClose + '" onload="shutterReloaded.showImg();" onclick="shutterReloaded.hideShutter();" /></div>' + NavBar +'</div>';
and the stylesheet change #clbtn and add #imgContainer style rule
#imgContainer{
position:relative;
margin: 0 auto;
}
#clbtn{
position: absolute;
top: 0%;
right: 0%;
margin-right: 10px;
margin-top: 10px;
}
please vote me.. :)
gerardweiz comments:
Thank you for the prompt reply but that doesn't seem to work I have implemented it here: http://bit.ly/sZ9ob6
Any ideas?
Christianto comments:
sorry, please try again,
replace shutter-reloaded.js with file attach below..
of topic, have you tried my solution on your other question [[LINK href="http://wpquestions.com/question/showLoggedIn/id/3585"]]here[[/LINK]]?