[SOLVED] screen position of a popup picture when using slimbox

Hello

I’m using &embedtype=`slimbox` and when I click on a thumb the popup picture is displayed normally. However I noticed that the position of this popup picture is a little bit too low on the screen. Is there a way adjust the picture position? E.g. set the top and left coordinates so it displays the I way I’d like to.

Your help is appreciated.

Mc

Sorry I forgot to mention I’m also using &display=`embedded`

Any ideas?

You can adjust its css in /assets/snippets/maxigallery/slimbox/css/slimbox.css

Quote from: doze at Aug 05, 2009, 04:25 PM

You can adjust its css in /assets/snippets/maxigallery/slimbox/css/slimbox.css

Doze,

Thanks for the tip. I edited slimbox.css and managed to modify the horizotal position of the picture by changing "left:" :

#lbCenter, #lbBottomContainer {
z-index: 9999999999;
position: absolute;
left: 50%;
overflow: hidden;
background-color: #fff;
top: 100px; /* Added by Mc */
}
However, I can’t change the vertical position. I placed "top:100px;" but it seems to have no effect at all. I also placed "top" on several other sections on this same file, but it has no effect.

This happened to you?

I have never had to change slimbox css to position it differently. By default slimbox positions itself to the center of the screen. If it’s not in center, you have css collision(s) between slimbox css and your site css.

Quote from: doze at Aug 06, 2009, 04:55 PM

I have never had to change slimbox css to position it differently. By default slimbox positions itself to the center of the screen. If it’s not in center, you have css collision(s) between slimbox css and your site css.

Yes slimbox is being positiond at the center without problems. I just needed to change the "top" or "y" position but it has no effect as I mentioned in my last post.

Yeah.. Unfortunately I don’t know what exactly in the css you need to modify to get it positioned off from the default position. Try adding "!important" to that top setting. If that doesn’t do it, try googling for better help.

Quote from: doze at Aug 09, 2009, 02:48 PM

Yeah.. Unfortunately I don’t know what exactly in the css you need to modify to get it positioned off from the default position. Try adding "!important" to that top setting. If that doesn’t do it, try googling for better help.

Doze,

Your suggestions worked!

Here’s what I changed to make it work: I found that if you specify a top position for #lbCenter then you have to specify a top position for #lbBottomContainer as well in order to keep the location of the title & description below the image. So, in slimbox.css I added a new #lbCenter and #lbBottomContainer as shown:

#lbCenter {
top: 0px !important;
}
#lbBottomContainer {
top: 550px !important;
}

I discovered that the top position for #lbBottomContainer should be: the desired top + the height of the image + 20 extra pixels. In my particular case every image has the same height of 530px so if I wanted to place all images at a top position of 0px then the top for #lbBottomContainer should be: 0px + 530px + 20px = 550px

Thanks a lot!

Mc