NextGen Gallery & NextGen GalleryView Plugin Problems

I have been working on another blog that I intend to include a lot of pictures in. The default wordpress gallery was not meeting my needs so I decided to try some free gallery plugins to see if I could get any of those to work for me. The NextGen Gallery plug-in seemed to fit the bill, and then after a bit more digging I found a plug-in extension called the NextGen GalleryView (yeah I know names are very similar) which did exactly what I wanted.

 After installing and uploading a gallery and adding “[galleryview id=1]” it to one of my posts, the filmstrip / carousel at the bottom of the gallery (the single feature that I was most interested in) was not working properly. The thumbnail images showed up on two different lines which messed up the whole filmstrip. Also, there was a strange black box in between each one of the thumbnails.

 In the dashboard under the NextGen GalleryView options when I would view the example / preview it appeared the whole thing was working just fine. However when I paste in the short code and try to view the blog post itself the filmstrip would be all messed up. I am not a word press expert, but I am assuming that if the gallery preview is working in the dashboard but not your posts, then it is likely a theme conflict you are dealing with.

 To me it seemed like the spacing between each image was off and a HTML bullet was being added into the list between each picture. I troubleshooted (is that a word?) the problem in the Chrome developer tools by disabling the different styles one by one to help me narrow down what was causing the problem. I tried to disable anything that had to do with spacing, margins, padding etc until the filmstrip looked like it should. I eventually found that my chosen theme (Adventure Journal Theme) was adding a margin-left to everything as well as adding a stylized bullet to all the list items on the page.

To solve the spacing problem and get all the thumbnail images on to the same line I set margin to 0px in the “frame” class which is found at about line 63 in wordpress-nextgen-galleryview/GalleryView/css/galleryview.css file

/* FILMSTRIP FRAMES (contains both images and captions) */

.frame {}

to

/* FILMSTRIP FRAMES (contains both images and captions) */

.frame {margin:0px}

To get rid of the square bullet that was being inserted between each thumbnails I had to edit the style sheet for the theme. For my theme it was located at wp-content/themes/adventure-journal/style.css. I changed

ul li{

list-style:square;

}

to

ul li{

list-style:none;

}

And viola…I now have a working image gallery with an awesome filmstrip at the bottom.  I imagine using this plugin with other themes you might have similar problems which can be solved in similar ways.