ImageAlignCenter issue with Gallery in LightBox

aleksoff's Avatar


12 Dec, 2012 10:06 AM

Hello Dmitry,

I'm using your plugin to create multi gallery. The images are placed in rows. Example here:

I'm using one of your template "Slider in LightBox". So, the idea is. When I press on one of the image, appropriate gallery have opened in LightBox.
As you proposed in your template I'm using jQuery ColorBox plugin. The main problem that images is not centered although option imageAlignCenter set as true, look at the example here.

However, if I use gallery without LightBox this issue does not exists.

Any suggestion how I can fix this issue in LightBox??

  1. 1 Posted by aleksoff on 12 Dec, 2012 03:26 PM

    aleksoff's Avatar

    Seems I have found solution. The issue occurs when I only using CSS Example 2 from ColorBox downloaded package. When I switched to Example 1, issue gone. So, looks like problem lies in Color Box Example 2 CSS.

    Sorry for bother.

  2. 2 Posted by aleksoff on 12 Dec, 2012 09:16 PM

    aleksoff's Avatar

    OK back to problem. When I have changed ColorBox CSS to example 2 everything started work properly on Firefox,

    Chrome and Opera. when I have been starting test on IE7 and IE8 the problem still exist. Here is example:

    I have tried all CSS Examples from ColorBox but no effect.

    If I use full screen on IE7/8 all photos align to right not center. Here is example

    Any advice how to handle this issue on IE7/8??

  3. Support Staff 3 Posted by Dmytro Semenov on 12 Dec, 2012 10:32 PM

    Dmytro Semenov's Avatar


    If you send me link or attach all files to message - I'll tell you what's wrong. This can be anything.


  4. 4 Posted by aleksoff on 13 Dec, 2012 11:18 AM

    aleksoff's Avatar

    Hi Dmitry,

    thank you for your response and intention to help. But I have found the issue already. In the project, I have been using Blueprint CSS Framework, which if you open page in IE browser attaches CSS file ie.css. This file contains some css fix for IE5/6/7 browsers. The issue was in these lines of ie.css

    /* Make sure the layout is centered in IE5 */
    body { text-align: center; }
    .container { text-align: left; }

    I just removed them, because the is no sense to use RoyalSlider with IE5/6 browsers. So, I have removed all fix for IE5/6 leave only those which suitable for IE7. Also it is important to add condition which wouldn't attach ie.css file for IE browsers IE 8 and greater.

    <!--[if lt IE 8]>
      <link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection">
  5. Support Staff 5 Posted by Dmytro Semenov on 13 Dec, 2012 07:15 PM

    Dmytro Semenov's Avatar

    Thanks for posting solution.

  6. Dmytro Semenov closed this discussion on 13 Dec, 2012 07:15 PM.

Comments are currently closed for this discussion. You can start a new one.

Keyboard shortcuts


? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac