I've incorporate CSS image gallery into a clients site as a sort of product catalogue display. See it in action at www.thevaletmalegrooming.com/Agua_de_Colonia.php – one of several pages on the site that use it. This works fine and as expected.

I've now had to convert the site to WordPress for this client, and the conversion has gone well. However, I have lost some functionality of the CSS Image Gallery and I cannot work out why this is happening.

If you look at the equivalent new page in the Wordpress site (www.thevaletmalegrooming.com/wp/shop/shop-by-brand/agua_de_colonia.html) you will notice that the circular arrow buttons have lost their functionality, although the thumbnails will still advance the gallery. I assume it is a problem with the path to a .js file or a js conflict, but I am at a loss to track down the problem.

Could you offer any help as to why this is happening and how I can rectify it. Many thanks in advance.

Did check the site, it seems that the custom.css has some rules that breaks the image gallery.

at line 113:

.custom .format_text a:active {
  position: relative;
  top: 1px;
  color: #846e41;	
}

The rule positions the buttons relative causing them to go to the left top corner when pressing them. There are probably some more problems, but it seems the custom.css is where you have to search.

Patrick

You are a star - That has fixed it - it was really doing my head in so thank you.

Any idea why I get the blue keyline around the dmxGallery when active and viewed in Safari?

that's an outline, try adding

.dmxGallery {
  outline: none;
}

I'm trying to set up an image gallery for a website I'm making for my web design class, but it isn't cooperating. I have to follow directions in a book and it still isn't working.
Nutra Science