Hi Tai,
Thanks for downloading NextGEN Gallery Optimizer Premium!
What you’re seeing is actually the default layout of NextGEN’s album list page. It’s not broken at all, it’s just the way it’s styled. It should be possible to modify the layout by tweaking the template at nextgen-gallery/view/album-extend.php, and/or your NextGEN stylesheet. I’ll try and come up with something tomorrow for you.
Just a heads-up also…the Fancybox lightbox you’re seeing on your site is actually coming from another Fancybox instance embedded in your theme. That version is not as refined as the one in Optimizer Premium, and it’s loading on every page of your site…so it would be best to remove those scripts if possible.
Cheers,
Mark.
Hi Tai,
I just put together some custom css that achieves the side-by-side album list appearance you’re after…
At the top of your NextGEN stylesheet (in your case “hovereffect.css”), replace the “Album Styles Extend” section with the following:
*/
/* ----------- Album Styles Extend -------------*/
/*
.ngg-albumoverview {
margin-top: 10px;
float: left;
display:inline;
}
.ngg-album {
margin: 5px 10px 5px 5px;
}
.ngg-albumtitle {
border-bottom:1px dashed #AAAAAA;
text-align: left;
font-weight: bold;
margin:0px;
padding-bottom: 3px;
font-size: 1.4em;
margin-bottom: 10px;
}
.ngg-thumbnail {
float: left;
background:#EEEEEE none repeat scroll 0% 50%;
border-color:#DDDDDD rgb(187, 187, 187) rgb(170, 170, 170) rgb(204, 204, 204);
border-style:solid;
border-width:1px;
color:inherit;
padding:5px;
}
.ngg-thumbnail img {
filter: alpha(opacity=100);
-moz-opacity: .99;
opacity: .99;
background:#FFFFFF none repeat scroll 0%;
border-color:#AAAAAA rgb(204, 204, 204) rgb(221, 221, 221) rgb(187, 187, 187);
border-style:solid;
border-width:1px;
color:inherit;
padding:2px;
vertical-align:top;
}
.ngg-thumbnail img:hover {
filter: alpha(opacity=90);
-moz-opacity: .9;
opacity: .9;
border-color:#000000;
}
.ngg-description {
text-align:left;
clear:both;
}
If you like the changes, it would be best to copy your newly customized stylesheet to your theme folder, so it won’t be lost during the next upgrade of NextGEN.
Enjoy!
Cheers,
Mark.
Hello Mark.
Thanks for the help so far. But sadly i does not seem to work. It got rid of the stapled lines in between, but the album pictures are still not side by side?
About the Scripts from the theme that adds another version of Fancybox, i would like to remove them, but don’t know where to start. So i will work on that after i get the albums to work.
Hi Tai,
I’ve just been testing your site’s source code locally, and have modified the css further to get it working with your particular theme and setup.
I’ve got your albums displaying side-by-side, however, you might want to resize the images to be the same height so they display better.
Just replace the top of hovereffect.css down to the bottom of the “Album Styles Extend” section with the following…
/*
CSS Name: Hovereffect Styles
Description: Hover Stylesheet based on the idea of Hoverbox from http://host.sonspring.com/hoverbox/
Author: Alex Rabe - Orginal by Nathan Smith
Version: 1.60
This is a template stylesheet which doesn't support description below the thumbnails. It's a experimental version.
*/
/* ----------- Album Styles Extend -------------*/
.ngg-albumoverview {
margin-top: 10px;
float: left;
display:inline;
}
.ngg-album {
margin: 5px 10px 5px 5px;
float: left;
display:inline;
}
.ngg-albumtitle {
border-bottom:1px dashed #AAAAAA;
text-align: left;
font-weight: bold;
margin:0px;
padding-bottom: 3px;
font-size: 1.4em;
margin-bottom: 10px;
}
.ngg-thumbnail {
float: left;
background:#EEEEEE none repeat scroll 0% 50%;
border-color:#DDDDDD rgb(187, 187, 187) rgb(170, 170, 170) rgb(204, 204, 204);
border-style:solid;
border-width:1px;
color:inherit;
padding:5px;
}
.ngg-thumbnail img {
filter: alpha(opacity=100);
-moz-opacity: .99;
opacity: .99;
background:#FFFFFF none repeat scroll 0%;
border-color:#AAAAAA rgb(204, 204, 204) rgb(221, 221, 221) rgb(187, 187, 187);
border-style:solid;
border-width:1px;
color:inherit;
padding:2px;
vertical-align:top;
}
.ngg-thumbnail img:hover {
filter: alpha(opacity=90);
-moz-opacity: .9;
opacity: .9;
border-color:#000000;
}
.ngg-description {
text-align:left;
clear:both;
}
Hope this helps!
Cheers,
Mark.
PS. The first place I’d look for the extra Fancybox scripts is in your theme’s header.php and footer.php files. If they’re added dynamically instead, you’ll need to check your functions.php file.
Hi,
I have the same problem but I am using the compact album. Editing nggallery.css has no effect whatsoever, as if it is suddenly being totally overridden. I just edited it yesterday to change the way the compact album looks and was satisfied but after installing the NGGOptimizer today the compact album view changed completely. I have Default style set in NGGOptimizer settings. I tried reverting to the original nggallery.css but it had no effect. The gallery view and fancybox both work fine and as expected.
The site is not online yet so I can’t provide a link. The theme is Twenty Eleven.
Thanks,
Nik
Hi Nik,
Thanks for downloading NextGEN Gallery Optimizer!
By design, Optimizer strips NextGEN’s sitewide scripts and styles, and adds them back in only where they’re needed. From your description, it sounds like you may be using the original basic version of the plugin, which currently only supports the [nggallery id=x] shortcode. As such, the necessary scripts, and more noticeably, your NextGEN stylesheet, aren’t being loaded when an album shortcode appears.
If you require support for albums, please consider donating for the Premium version (to which this topic refers), which supports all ten NextGEN shortcodes and much more. You can download it here, or from Optimizer’s settings page.
I’d be more than happy to help you customize your album styling – which will differ from my code above as the “compact” album uses different css classes from the “extend” template – but it shouldn’t be a problem.
Hope this helps!
Cheers,
Mark.
Thanks Mark, I’ll look into the Premium version!
I have exactly the same problem and this only happens when I enable the nextgen optimizer. This is what is happening:
I have [album id=1 template=compact][album id=2 template=compact] displaying 5 galleries. Before I activated the nextgen optimizer, my nextgen albums were displayed side by side.
I activate nextgen optimizer and the albums are now displayed vertical.
Where is this actually coming from? How may I fix it?
I am using a page not a post
thanks in advance
aussie
Hi aussie,
Are your [nggallery id=x] shortcodes displaying correctly, at all?
If so, please see my post above. It sounds like you’re using the original basic version of Optimizer which does not currently support album shortcodes.
Cheers,
Mark.
hi Mark
[nggallery id=x] works fine and I am using the 1.1 plugin. It appears to be screwing up the page where [album id=1 template=compact] is at. This is at the portfolio page where it appears to be that the nggallery.css will not load for the portfolio page when the nextgen optimizer is activated.
I had to add this to the styles.css to over ride it:
.ngg-albumoverview .ngg-album-compact { float: left; margin-right: 20px;}
– funny thing is whenever I change anything to the .ngg-albumoverview .ngg-album-compact class in the nggallery.css, the change will not apply.
I am curious to know the reason.
thanks in advance
aussie
Hi aussie,
The basic version of Optimizer you’re using (from WordPress.org) is written to strip out all of NextGEN’s scripts and styles sitewide, and only add them back in when it detects a post/page with an [nggallery id=x] shortcode…which is why your galleries are displaying correctly. I originally developed this for a client with that specific requirement (reducing load on the rest of their site considerably), and later turned it into a plugin for everyone to use.
The reason your stylesheet isn’t loading on album shortcodes is simply because the basic version only looks for [nggallery id=x], and if it finds it, loads the stylesheet (and the Fancybox lightbox scripts and styles if desired).
I wanted to develop the plugin further however, so I later created a Premium version for people who might require support for the more advanced features of NextGEN Gallery (such as albums, slideshows etc). If you’re enjoying the plugin so far, you might like to donate for the Premium version to add support for all ten of NextGEN’s shortcodes (including albums) and much more. You can download it here, or from Optimizer’s settings page.
Hope this helps!
Cheers,
Mark.
