How to hide the buttons of CSS Image Gallery

Question:

---

How to remove the buttons of the CSS Image Gallery?

Answer:

---

If you want to remove the buttons of the CSS Image Gallery you will have to change the file dmxgallery.css
By default, it is situated in styles folder of your site.

* Remove all the buttons of the Gallery: 

If you want to remove all the buttons of the Gallery you have to find the following line:

.dmxGallery a.dmxNext, .dmxGallery a.dmxPrevious, .dmxGallery a.dmxPlay, .dmxGallery a.dmxPause

Then add the following property: visibility: hidden;

The resulting code should look like this:

.dmxGallery a.dmxNext, .dmxGallery a.dmxPrevious, .dmxGallery a.dmxPlay, .dmxGallery a.dmxPause
{
    visibility: hidden;
    position: absolute;
    display: block;
    background-repeat: no-repeat;
    background-position: center center;
    z-index: 20;
}

* Remove only the buttons on the thumbnails:

If you want to remove only Previous and Next buttons on the thumbnails, find .dmxThumbList a.dmxPrevious and .dmxThumbList a.dmxNext classes and add the property: visibility: hidden;

The resulting code should look like this:

.dmxThumbList a.dmxPrevious
{
    visibility: hidden;
    bottom: 25px;
    left: 2px;
    z-index: 10;
    width: 40px;
    height: 40px;
    background-image: url( 'controlbl_prev.png' );
    background-position: left top;
}

.dmxThumbList a.dmxNext
{
    visibility: hidden;
    position: absolute;
    bottom: 25px;
    right: 2px;
    z-index: 10;
    width: 40px;
    height: 40px;
    background-image: url( 'controlbl_next.png' );
    background-position: right top;
}

* Remove only Play/Pause button:

If you want to remove only Play/Pause button, find .dmxGallery a.dmxPlay and .dmxGallery a.dmxPause classes and add the property: visibility: hidden;

The resulting code should look like this:

.dmxGallery a.dmxPlay
{
    visibility: hidden;
    position: absolute;
    bottom: 5px;
    left: 50%;
    margin-left: -20px;
    width: 40px;
    height: 40px;
    background-image: url( 'controlbl_play.png' );
    background-position: right top;
}

.dmxGallery a.dmxPause
{
    visibility: hidden;
    position: absolute;
    bottom: 5px;
    left: 50%;
    margin-left: -20px;
    width: 40px;
    height: 40px;
    background-image: url( 'controlbl_pause.png' );
    background-position: right top;
}

---

DISCLAIMER:

This is extra complimentary content which purpose is to show additional usage that is not part of the product, i.e. it suggests tips for extending the functionality of the product by the users themselves. It is provided "as is", without warranty of any kind, express or implied , including but not limited to the warranties of merchantability, fitness for a particular purpose and nonfringement of third party rights.

DMXzone does not take responsibility to support the suggested content to be fully compatible and working as intended and does not provide support for extended functionality which is not included in the current release of the extension.

It is highly recommended that only more advanced developers use it.