w.bear

An idea would be inline-css:

Goto Design->Editor->functions.php

(Please be careful when editing the functions.php)

Paste the following after <?php

if ( !wp_is_mobile() ) {
function myStyleHover() {
echo ‘
<style type=”text/css”>
.ngg-gallery-thumbnail-box {
-moz-transition:-moz-transform 0.1s ease-in;
-webkit-transition:-webkit-transform 0.1s ease-in;
-o-transition:-o-transform 0.1s ease-in;
-ms-transition:-ms-transform 0.1s ease-in;
}
.ngg-gallery-thumbnail-box:hover {
-moz-transform:scale(1.5);
-webkit-transform:scale(1.5);
-o-transform:scale(1.5);
-ms-transform:scale(1.5);
z-index:10000;position:relative;
}
</style>
‘;
}
add_action( ‘wp_print_styles’, ‘myStyleHover’ );
}

And please delete or exclude the above css-code in nggallery.css ??

now it looks good – the scrollbars are away

mobile solution later ??

I see in the photoswipe-window vertical and horizontal scroll bars?! Your Site used normalize.css, which is probably not compatible with photoswipe.

You can try the following: (or disable normalize.css)
html {
overflow-y:visible!important;!
}

Hi zanchit,

I also use photoswipe. In my opinion it’s better than fancybox, shutter, thickbox etc. ??

I would use photoswipe for mobile AND desktop. In this case you have to select only “no lightbox” under NextGENGallery -> Other Options -> Lightbox effects.

ok for ie we need to add the following:

-ms-transition:-ms-transform 0.1s ease-in;

and

-ms-transform:scale(1.5);

??

PS: unfortunately only transform currently does not work in all browsers

In my opinion that looks now very professional. The pictures are also very cool. ??

Slideshow: Gallery Settings -> NextGEN Basic Thumbnails -> Show Slideshow link

hmm – you can edit the thumb under “Manage Galleries”. There you can crop the right part of the image.

Otherwise you can e.g. change the zoom factor to 1.3 or so. Even a hint text would not be wrong.

@tizz

No – the difference is: “ngg-gallery-thumbnail-box” and “z-index: 10000; position: relative;”

@zanchit
I see it works ??
I would prefer this code and everything looks good:

.ngg-galleryoverview {
overflow:visible!important;
}

.ngg-gallery-thumbnail-box {
-moz-transition:-moz-transform 0.1s ease-in;
-webkit-transition:-webkit-transform 0.1s ease-in;
-o-transition:-o-transform 0.1s ease-in;
}
.ngg-gallery-thumbnail-box:hover {
-moz-transform:scale(1.5);
-webkit-transform:scale(1.5);
-o-transform:scale(1.5);
z-index:10000;position:relative;
}

Please try this:

.ngg-gallery-thumbnail-box {
-moz-transition:-moz-transform 0.1s ease-in;
-webkit-transition:-webkit-transform 0.1s ease-in;
-o-transition:-o-transform 0.1s ease-in;
}
.ngg-gallery-thumbnail-box:hover {
-moz-transform:scale(2);
-webkit-transform:scale(2);
-o-transform:scale(2);
z-index:10000;position:relative;
}

oops tizz was faster.

The! “!important” is important. ??

This should work:

.ngg-gallery-thumbnail img {
background-color:transparent!important;
border:none!important;
border-radius:10px!important;
}
.ngg-gallery-thumbnail img:hover {
background-color:red!important;
}

An easy way to do that is something like this:

Set: Gallery Settings -> NextGEN Basic Thumbnails -> Number of columns to display = 1

Add CSS under Other Options -> Styles:

.ngg-gallery-thumbnail img {
float:left!important;
margin-right:50px!important;
}
.ngg-gallery-thumbnail span {
float:right!important;
text-align:left!important;
}

Manage Galleries -> Gallery -> Description-Field: (Example)

<table><tr><td>Name:</td><td>
last name, first name
</td></tr><tr><td>Bio:</td><td>
bla bla
bla bla
blabla
</td></tr></table>

btw:
Description for beta 2.0.12 beta:
WHAT’S FIXED?
– Custom CSS path: slashes are stripped out for some windows servers

This error is not resolved in version 2.0.12 beta, because the windows-backslash (php-const DIRECTORY_SEPARATOR) does’nt work in an URL.

This should work:

.ngg-album-compact p {
display:none!important;
}