Hi,

1. You can use CSS to place the close button on the outside but the lightbox was designed with all of the elements – arrows, close button, image description – on the inside and it might be better to have all of them consistent, on the inside.

If you consider than the close button is hiding any content, I would advise that you use the “Hide controls: Yes” and “Hide description: Yes” settings to make the buttons and description be hidden and only be shown on mouseover. They have a nice fading in effect as well.

2. This is a simple change. If you would like this modification made, please use the contact form on my profile page to send me a private email and I will reply with the modified file for you to use.

Regards.

Hi. It looks like the theme CSS affects some of the gallery CSS. You just need to add some resets where there are conflicts, such as ul, li margins, paddings.

I can give you specific instructions if you enable the gallery again so that I can look over the source code and see where there are conflicts.

You can change the size of the tags from the CSS file (nice-gallery/public/css/nice-gallery.css, line 47):

.ng-tags li {
    font-size: 12px;
    padding: 3px 7px;
    ...
}

To increase the space between the big image and the thumbs panel, you can change the left margin of the thumbs panel:

CSS file (public/css/nice-gallery.css), line 165:

.ng-side-thumbs .ng-thumbs {
    ...
    margin-left: 5px;
    ...
}

You can make it any size that is needed.

Duplicate question of the above.

The thumbnails are generated automatically by WP when the big images are uploaded, there is no option to input a separate thumb URL.

Also, based on how you described, it would mean that no thumb is selected by default and only on click a thumb would be selected. This is not how the gallery functions, when an image is open, the corresponding thumbnail is also shown/selected.

But my suggestion is that a better user experience would be to show the viewer the first option as selected as it makes it clearer, easier to understand.

You have a green product showing and the green thumbnail is selected, to show the user that from the available options, this is currently chosen. Then you have the other thumbs available from which he can select to show another, such as the blue one.

i change the area of ”/* LIGHTBOX */” and i think will be ok. if i need help , i’ll reply. thanks

Did you extract the archive you downloaded from CodeCanyon? You can find the plugin ”.zip” in the “Plugin” folder.

Yes, I downloaded the following zip rom codecanyon: codecanyon-21134797-nice-gallery-for-wordpress.zip

I tried uploading that zip directly into the plugin uploader in the wordpress dashboard and I tried unpacking that zip and uploading the nice gallery to the plugin folder via ftp.

Extract the “codecanyon-21134797-nice-gallery-for-wordpress.zip” archive that you downloaded. Then, in the “Nice Gallery WP v1.1/Plugin” folder you will find the “nice-gallery-v1.1.zip” file. Install this file into WP using the plugin uploader.

These modifications can be made through CSS, as you pointed out. It is recommended that plugin CSS changes be added to the theme CSS file so that they remain safe there when the plugin is updated.

You can look in the gallery CSS file (public/css/nice-gallery.css) to find the styles that you want to change.

(The following line numbers may change slightly with future updates.)

The thumb dimensions can be changed from the following style (line 176):

.ng-thumbs li {
    width: 60px;
    height: 60px;
    ...
}

The thumb border dimensions will also need to be changed (this is for the square border) (line 202):

.ng-border {
    width: 62px;
    height: 62px;
    ...
}

The following is for the width of the thumbs panel when it is on the side. This also determines the number of thumb columns.

It is calculated by [number of colums] * [thumb width] + [number of colums] * [thumb space]. For the default dimensions: 60 * 3 + 3 * 3 = 189. The following is the style (line 165):

.ng-side-thumbs .ng-thumbs {
    width: 189px;
    ...
}

The space between the images and the thumbs panel is again controlled by the following style (line 165):

.ng-side-thumbs .ng-thumbs {
    ...
    margin-left: 5px;
    ...
}

You can take these styles, change the properties that you need and place them in the theme CSS file. You might want to add a “div” to the selectors as well so that they have higher specificity and make sure they override the gallery styles:

div.ng-thumbs li {}
div.ng-side-thumbs .ng-thumbs {}
...

Let me know if everything is clear and if you have any questions.

To change the thumbs dimensions, you need to edit the gallery CSS file.

You can find it in the plugin folder, “wp-content/nice-gallery”, at “public/css/nice-gallery.css”.

The line numbers given below are subject to change as new updates are made.

The following sets the size of the thumb itself (~ line 171):

.ng-thumbs li {
    width: 60px;
    height: 60px;
    ...
}

You also need to change the size of the thumb border. By default, both dimensions should be 2px bigger than above (~ line 197):

.ng-border {
    width: 62px;
    height: 62px;
    ...
}

You may also need to change the gallery width from the admin page so that the thumbs and the big image align well.

This should be all that is needed for the default settings. Other changes may be needed based on the settings that you use.

For example, if you use the thumbs panel on the side, the width of the thumbs panel needs to be changed, based on how many thumb columns you want to have (~ line 160):

.ng-side-thumbs .ng-thumbs {
    width: 189px;
    ...
}

Or, if you are using only top or bottom thumb borders (~ lines 215 and 223):

.ng-top-border .ng-border {
    width: 60px;
    ...
}

.ng-bottom-border .ng-border {
    width: 60px;
    ...
}

Let me know if you have any questions and if you can get everything working well.

Well, there isn’t any more space and that is why the 5th thumbnail drops on the next row.

You can make the gallery width bigger from the admin page so that all 5 thumbs fit in a row and are aligned with the image.

Or, the thumbs slightly smaller so that they all fit in a row.

Can you send me a link to where I can look over your implementation?

The navigation should work as it is shown on the preview page.

Well I thought that also.

The WP theme is poorly coded. The CSS uses a lot of id based styles instead of class styles. They have high specificity and overwrite gallery styles which in turn cause layout problems.

For something like a WP theme which has its functionality extended by plugins, this is a bad coding practice.

I will look over the theme styles that cause problems and prepare some specific changes to the gallery CSS code for you.

Use the contact email from the gallery Guide file or the contact form on my profile page to send me an email and I will reply back with the new CSS file when ready.

If you can give me FTP access to the gallery plugin folder only so that I can upload the new CSS file and test, that might be faster in case other modifications are still needed. If not, I will just send you the file, you upload it and test it. If any subsequent changes are needed, we repeat this process.

1. Only this version is a plugin for WordPress. The other is a standalone jQuery plugin. You get the HTML, CSS and JS files to implement manually in your site.

2. As far as I know, there is no native WP gallery code. Everything is from the currently used theme.

In the next update to the gallery, an option to open the image in a lightbox on click will be added.

3. Installing the plugin will not change anything about your existing images. All of your images and image data are safely in the WP files and database.

Once you have the gallery installed, you can go to the gallery admin page and simply select and image and then add the necessary text, all within the gallery admin page, nothing external to that will be changed.

4. In this layout design, the thumbs have equal dimensions so that they fit well. They are not cropped but simply hidden outside of view.

When an image is opened, regardless of its dimensions, it will display fully and centered within the available space.

Let me know if everything is clear about these points and if you have any other questions.

This project is a plugin for WordPress. If you want to use the ticker in a normal HTML site, there is available a standlone jQuery plugin of the ticker here: https://codecanyon.net/item/modern-news-ticker/2347950

Yes, the text description is optional and can be disabled if not needed on any template.

Okay nice.

Hi. The gallery does not have the option to open the images in a lightbox. If that is something that you need and if you are familiar with coding, it is something that can be added.

With JS, capture the click on the images, retrieve the image URL and open/display it in the lightbox element. That would be the general functionality behind it.

A couple of people have mentioned this and I have made a note of it to develop in a future update.

Ok unfortunaly, iam not a pro coder Do you thinck you can do it for me as a “pro service” ? and let me know how will cost ? tks

Update: In the 1.1 version, lightbox support has been added. This is enabled by default. There is also a new metabox on the admin page called “Lightbox” which contains 7 settings that can be used to customize the lightbox functionality.

Sorry, they are separate plugins and do not have any data transfer functionality.

Do you have a high number of galleries that you would like to transfer?

Yes. and they all have custom description & titles.. maybe and import + export function and switching the XML from sharp to nice?

I’ll make a note of the export/import suggestion between my gallery plugins and keep it in mind for future updates.

In the meantime, can you let me know how many galleries do you need to transfer?

If you have so many galleries that it takes a lot of time to do them manually, I can maybe make a custom plugin with the purpose of copying/transferring the data from the Sharp Gallery plugin to the Nice Gallery plugin.

Duplicate question of the above.

The gallery does not have an auto slide option. I found this to not be such an useful option as people usually want to go through the gallery themselves and not have it slide automatically.

But I have made a note of it and I will add it in the next update, just so that it is available, if needed.

Update: In the 1.1 version, autoplay support has been added. A new setting is available called “Autoplay” which can be set to the image display time (in ms) or to 0 to disable it.

By default, the thumbs are square but they have support for images with other dimensions. In this case, a part of the thumb image will be hidden.

You can see this effect on the preview page: http://creativetier.com/nice-gallery-wp/preview.php

Even though the big images are rectangular and the thumb images are as well, the thumbs themselves have a square shape and a part of the thumb image is hidden.

If you would like however to change the dimensions of the thumbs, you can do this from the CSS file. You can find it in the “plugins” folder of your WP installation, in “nice-gallery/public/css/nice-gallery.css”.

On line 170, you can change the dimension of the thumb itself:

/* Thumb */
.ng-thumbs li {
    width: 60px;
    height: 60px;
    ...
}

You will also need to change the dimension of the thumb border, on line 196:

/* Thumb border */
.ng-border {
    width: 62px;
    height: 62px;
    ...
}

Regarding putting the thumbs on top, there is no default option to do this. I felt that with this design, the thumbs on bottom or on the side looks best.

But if you really need them on top, you can send me an email, using the contact email from the guide, and I can make a customization to the plugin PHP file for you so that the thumbs are generated on the top side.