Move Close to top right

classic Classic list List threaded Threaded
12 messages Options
Reply | Threaded
Open this post in threaded view
|

Move Close to top right

DFC005
Can someone give me an idea on how to do this?

Cheers!
Reply | Threaded
Open this post in threaded view
|

Re: Move Close to top right

ccollett
I too would like to know how to move the close to the top right. Any ideas?
Reply | Threaded
Open this post in threaded view
|

Re: Move Close to top right

aiwetir
i haven't tried it, but it seems to me, the easiest way might be to "float: right" a link in the title portion of shadowbox with href="javascript:parent.Shadowbox.close()" then go into the shadowbox.js and remove the text 'close'
Reply | Threaded
Open this post in threaded view
|

Re: Move Close to top right

DFC005
I'm using v2.0 and for the life of me, I can't move the X (close) to the top right. Has anyone done this yet?
Reply | Threaded
Open this post in threaded view
|

Re: Move Close to top right

gofrit
I'd also love to do this and still could not manage since my css knowledge is too limited... Does really no-one here have a clue how to do this?
Reply | Threaded
Open this post in threaded view
|

Re: Move Close to top right

Mitchell
I'd like to do this too... no one come up with solution yet?

i thought this would have been a pretty regular request. its the first thing i wanted to do.
Reply | Threaded
Open this post in threaded view
|

Re: Move Close to top right

Derms
Haven't tried, but look at this:

Move close to top right
Reply | Threaded
Open this post in threaded view
|

Re: Move Close to top right

Magnolia
Skin-files are not used in the latest builds (v3.0.3). To get the job done, put this script in a new or existing js-file, or just in the header of a page in which Shadowbox is applied.
function moveCloseLink(){ 
    var cb=document.getElementById('sb-nav-close'); 
    var tb=document.getElementById('sb-title'); 
    if(tb) tb.appendChild(cb); 
} 
Shadowbox.init({
        ...
        onOpen: moveCloseLink
});
In the file shadowbox.css, on line 22 add:
#sb-nav-close{background-image:url(close.png); position: absolute; top: 8px; right: 0; width:15px; height:15px; cursor:pointer;
Source: http://shadowbox-js.com/forum.html#nabble-td3004085i20|a4982060
Reply | Threaded
Open this post in threaded view
|

Re: Move Close to top right

Kate
Hi Magnolia,

Your fix isn't working for me. There appears to be a syntax error in your javascript. The ...


Any thoughts as to why it might not be working?


Kate
Reply | Threaded
Open this post in threaded view
|

Re: Move Close to top right

migf1
Magnolia's tip works nicely for me, thank you (there is a right bracket missing at the end of the css-line above, though)

However, there is a small but annoying glitch: a blinking cursor appears next to the Close icon on every subsequent call to Shadowbox except the very first time. Any fix for that? (Shadowbox 3.0.3)
Reply | Threaded
Open this post in threaded view
|

Re: Move Close to top right

Piwy
In reply to this post by Kate
Hi,
Magnolia's script didn't worked for me too. Script below, worked for me

Bye !

Shadowbox.init({
        onOpen: moveCloseLink
});

function moveCloseLink(){
    var cb=document.getElementById('sb-info');
    $(cb).css("position","absolute");
    $(cb).css("right","0");
    $(cb).css("top","0");
    $(cb).css("z-index","100");
}
Reply | Threaded
Open this post in threaded view
|

Re: Move Close to top right

dt192
In reply to this post by DFC005
I just edited the js file changing T.markup to be:

T.markup='<div id="sb-container"><div id="sb-overlay"></div><div id="sb-wrapper"><div id="sb-info"><div id="sb-info-inner"><div id="sb-counter"></div><div id="sb-nav"><a id="sb-nav-close" title="{close}" onclick="Shadowbox.close()"><a id="sb-nav-next" title="{next}" onclick="Shadowbox.next()"><a id="sb-nav-play" title="{play}" onclick="Shadowbox.play()"><a id="sb-nav-pause" title="{pause}" onclick="Shadowbox.pause()"><a id="sb-nav-previous" title="{previous}" onclick="Shadowbox.previous()"></div></div></div><div id="sb-wrapper-inner"><div id="sb-body"><div id="sb-body-inner"></div><div id="sb-loading"><div id="sb-loading-inner">{loading}</div></div></div></div><div id="sb-title"><div id="sb-title-inner"></div></div></div></div>';