Change lightbox plugin navigation features

I am using fancybox 1.3.4 - however, we need to change some of the

navigation functionalities of the plugin.

Some of the css has already been changed.

Now all that is left is to change the arrows and the pagination (ex. page 1 of 3) at the bottom in the following way:

----Arrows - first only right arrow is visible, after moving once to the right - both arrows are visible all the time, not only on mouseover

----pagination is with three dots - a blue dot is showing the actual page (instead of "page 1 of 3")

In the image gallery I am going to add new images in the following way:

I will add a div that includes 4 links.

The first one has an image - like for example a button img that the user can click on to open the lightbox.

the rest of the links will only have a link to an image that is published somewhere else and has a url.

[url removed, login to view]:

<a rel="example_group" href="./example/[url removed, login to view]" title=""><img alt="" src="./example/[url removed, login to view]" /></a>

<a rel="example_group" href="./example/[url removed, login to view]" title=""></a>

<a rel="example_group" href="./example/[url removed, login to view]" title=""></a>

<a rel="example_group" href="./example/[url removed, login to view]" title=""></a>

So when clicking on the button ([url removed, login to view]), the lightbox will open up with the three images.

TASK:

1. add dots (active dot is blue) to show which page the visitor is on (instead of "page 1 of 3")

2. change the arrows so that they are always visible on the left and right side of the image (not only on mouseover) (please observe - if the slideshow consisting of 3 pages have gotten to the end - the arrow should not be there)

I will provide psd files and the plugin files.

This needs to be done perfectly and urgently.

HTML JavaScript jQuery / Prototype Script Install Software Architecture

Project ID: #900993

About the project