modify the zoom effect thumbs

hi there

would like to know how to modify or edit the little zoom/angular effect of the bike images. can it be disabled? would like a small zoom but no angle.

thanx
emel

Hi

I suppose you are referring to NSP on Portal Mode.

First, please go to template parameters > advanced settings and enable the use of css override.
Them open the follow file on BikeStore template directory:
../css/override.css
and add this lines:

Code: Select all

.norotate .nspMainPortalMode5 .nspArt:hover .nspImageGallery img {
   -webkit-transform: none;
   -moz-transform: none;
   -ms-transform: none;
   -o-transform: none;
   transform: none;
}


Now go to the NSP module that you see the zoom/rotation effect on thumbnails and add the following suffix:

"[space]norotate"

Cheers

sorry for the late reply. i just added your stuff, but this doesn't do tht trick....

what to do now? site is still hidden .

got it!

question: can you manipulate the rotation? i just want a minor zoom without rotating......

Hi

Sorry about the late reply.

Forget the previous instructions. My mistake.
If you want to disable zoom effect, you just need to remove "[space]zoom" suffix on NSP module.

Now make what you need, please add this code on ../css/override.css file:

Code: Select all

.zoom2 .nspArt a {
   -webkit-transform-style: preserve-3d;
      -moz-transform-style: preserve-3d;
       -ms-transform-style: preserve-3d;
        -o-transform-style: preserve-3d;
           transform-style: preserve-3d;
}
.zoom2 .nspArt img.nspImage {
   border: none;
   -webkit-transform: scale(1.0);
      -moz-transform: scale(1.0);
       -ms-transform: scale(1.0);
        -o-transform: scale(1.0);
           transform: scale(1.0);
   -webkit-transform-style: preserve-3d;
      -moz-transform-style: preserve-3d;
       -ms-transform-style: preserve-3d;
        -o-transform-style: preserve-3d;
           transform-style: preserve-3d;
   -webkit-transition: -webkit-transform 0.15s linear;
      -moz-transition:    -moz-transform 0.15s linear;
        -o-transition:      -o-transform 0.15s linear;
           transition:         transform 0.15s linear;
}
.zoom2 .nspArt img.nspImage:hover {
   -webkit-transform: scale(1.2);
      -moz-transform: scale(1.2);
       -ms-transform: scale(1.2);
        -o-transform: scale(1.2);
           transform: scale(1.2);
}


Now you just need to add "[space]zoom2" suffix on the NSP module.

Cheers