Support Forum

Close behavioral of light box

CH Charles
Charles
Member

Hi guys, I was just wondering if there is way to change couple of things about picture light box.

When you click on image in post it opens new pop window (light box).  I watched a few people to see how they will close the window and I saw that most of the people were confused.

1. X – close button is  hard to notice at first glance in ICE theme that I use. I was wondering if there is way to change it to “Close picture” instead of “x”. This way it would be more noticeable  Even better I would like to change the color.

2. I would like to to close the picture when you click on light box rather then opening new window.  Correct me if I am wrong but it looks like light box/ pop windows will open in max screen size or max picture resolution size.  When I click on light box in my case I’ll get new window with exactly same picture size. I have to close new window and then close original light box.  

I don’t get the benefit of opening a new window when clicking on light box. Please let me know if I am missing something. 

Anyway, I would find it more beneficial if I could close light box just by clicking on picture again. 

 

Can you guys give me a direction where to look to make desired changes?   Thanks for any advice. 

 

                      Charles

15 Answers

New Answer

BR Brandon
Brandon
Member

1) The image used for the “X” is close.gif located in the themes styles/images folder. It should be black with a white X. You can edit that image or create a new one or replace it. 
You should have a custom theme if you start editing or changing files in your theme.

2) It does open up an new tab to show the full size picture if you click on the popped up one. There may be a way to change that or add some kind of dialog to say what will happen when the popup image is clicked. Something maybe the guys can take a look at. On some of my sites I allow large images to be uploaded because most are pics of circuit boards. The extra click to be able to see the large image is very handy when looking at small parts. So it gives a user 3 pics, the small one in the forum post itself, the medium size one in the popup and a large one in it’s own window.

But I can see how depending on your forum image constraints how you may not need nor want the 3rd one. I don’t think there is a way now to turn off the full size display but maybe Andy or Steve have an idea.

CH Charles
Charles
Member

Hi Brandon, thanks for the reply. 

1. That should be easy enough for me to do.  Thanks for the tip. 

2. I see what you are saying. On the other hand I think you are probably very small percentage of users that need such a big pictures.  I think most people will use pictures that are smaller pixel size than screen resolution and in that case there is really no point of having an extra window window with visually same picture. It might be good thing to have that option of closing the window (via settings) when clicking on light box. Just an idea…  Let’s see what Andy or Steve have to say. 

I bet if you get 10 average computer users that don’t know the SP interface, 8 of them will either close tab or open new window with full res picture actually trying to close light box.  

    Anyway, thanks for help..    Charles

CH Charles
Charles
Member

Does the same thing apply when using overlay theme? Like for example I am using ICE…   I see there is ice.php with some css styles….  Are you sure “x” is image because my “x” is white almost like letter x…

BR Brandon
Brandon
Member

It does not look like this X ?
screenshot_04.png

 

 

 

That’s from the ice overlay on my test site.

Maybe your WP theme is overriding it. Is your site online and I can see it myself? I would be glad to check and see if different than what it should be.

CH Charles
Charles
Member

It looks like this on my screen. You can see how it can be easily overlooked by many users… x.jpg 

BR Brandon
Brandon
Member

Strange but the close.gif file is not being found in your theme so it’s not being shown.

Can you check your theme’s folder styles/images for close.gif? Here it is if you need it.

CH Charles
Charles
Member

There is no image with that name… I have no idea why it would be missing and where is white x comming from if the image is missing?  

I have only closeRes.gif

So, even when using overlay theme ICE, it still should use same image as default theme? 

Also when I inspect the element it uses  class=”ui-icon ui-icon-closethick”…   That sounds right? 

 

    Charles

 

PS: Sorry for quick edit..

CH Charles
Charles
Member

Thanks Brandon.  It is showing now…  I wonder what else I am missing..   I did standard install and I swear I did not delete anything. 

I guess at this point I can just create custom picture and to be safe start separate theme for that…

           Charles 

BR Brandon
Brandon
Member

It’s possible that the polls plugin was bleeding through and that’s why you saw something there as apposed to nothing. That’s a different issue though. :)

.ui-dialog .ui-dialog-titlebar-close is the CSS it uses from the theme. The one you show is from the Jquery part but that shouldn’t be getting in the way.

Hard to say why it wasn’t there or if there is anything else missing. If you are going to create a custom theme I would suggest you download the default one manually, change it to a custom theme and then upload it to the site. That way you are no working with your old one that may or may not be complete.

Nice job editing that horse pic though. The whiskers must have been tricky to work with.

CH Charles
Charles
Member

Thanks…  Yes, it can be tricky.. lol

I made new close gif but I guess I will have to change place holder size for that gif or some other stuff as it show only X ..

Just in case someone else want to use it it’s attached to this post. I think it will be more obvious for some people. 

  Thanks  Charles

close.gif
CH Charles
Charles
Member

Ok… I have changed width in default.php

I guess I will need to start custom theme if I try to make some changes like that…

 

Charles 

.ui-dialog .ui-dialog-titlebar-close {
position: absolute;
right: 12px;
top: 14px;
width: 144px;
margin: -10px 0 0 0;
padding: 0;
height: 18px;
background-image: <?php echo($ImageClose); ?>;
}

BR Brandon
Brandon
Member

The close.gif image is used elsewhere for popups. Like the profile, about Simple:Press, etc. It should probably just say ‘close’.

The CSS will also affect other popups so be sure to check them too.

CH Charles
Charles
Member

I see…   I did not know that ..   Easy to fix…  

I would probably find hard way later..  🙂

close-2.gif

      Thanks!