viewerjs icon indicating copy to clipboard operation
viewerjs copied to clipboard

change zoom-in animation when viewer loaded

Open marcarc opened this issue 3 years ago • 5 comments

Hi! Thank you for your work, i was wondering about the following:

Is your feature request related to a problem? Please describe. If I use transition: false, then turns off all transition effect. But if I set custom transition in css, still using zoom-in animation when a new picture is loaded.

Describe the solution you'd like I would like to have an option to edit this zoom-in animation. Or just separate from the transition attribute.

Thank you!

marcarc avatar Apr 08 '21 20:04 marcarc

No support it. I'm sorry.

fengyuanchen avatar Apr 10 '21 05:04 fengyuanchen

Hi! I just find an "ugly" and limited solution. Notice, after these changes, the zoomable function will not use transition anymore, so it will not smooth anymore, also the closing the viewer will not fade-out....

CSS

.viewer-fade-in {
    	animation-name: fadeInOpacity;
	animation-timing-function: ease-in;
	animation-duration: 0.5s;
          }
@keyframes fadeInOpacity {
	0% {opacity: 0;	}
	100% {opacity: 1;}
}

viewer.js

  1. add new variable to the classes var CLASS_FADEIN = "".concat(NAMESPACE, "-fade-in");
  2. find the following code:
image.style.cssText = 'height:0;' + "margin-left:".concat(viewerData.width / 2, "px;") + "margin-top:".concat(viewerData.height / 2, "px;") + 'max-width:none!important;' + 'position:absolute;' + 'width:0;';
      this.initImage(function () {
        toggleClass(image, CLASS_MOVE, options.movable);
        toggleClass(image, CLASS_TRANSITION, options.transition);
   
  1. Comment out this line: toggleClass(image, CLASS_TRANSITION, options.transition);
  2. insert the under that the following: toggleClass(image, CLASS_FADEIN, options.movable);
  3. Turn off transition and zoomable options:
zoomable: false,
    transition: false,

marcarc avatar Apr 11 '21 19:04 marcarc

No support it. I'm sorry.

Is there any plan to give an interface to switch/close image loading animation?

有计划给出切换/关闭 图片加载动画的接口嘛

I'm using this library for an image viewer project, but when I encounter large images, the animation makes the image viewer run extremely laggy

Thank you~

Edge-coordinates avatar Jan 28 '24 04:01 Edge-coordinates

No support it. I'm sorry.

Is there any plan to give an interface to switch/close image loading animation?

有计划给出切换/关闭 图片加载动画的接口嘛

I'm using this library for an image viewer project, but when I encounter large images, the animation makes the image viewer run extremely laggy

Thank you~

No plans at the moment.

fengyuanchen avatar Feb 02 '24 07:02 fengyuanchen

No support it. I'm sorry.

Is there any plan to give an interface to switch/close image loading animation?

有计划给出切换/关闭 图片加载动画的接口嘛

I'm using this library for an image viewer project, but when I encounter large images, the animation makes the image viewer run extremely laggy Thank you~

No plans at the moment.

OK. thanks.

Edge-coordinates avatar Feb 02 '24 08:02 Edge-coordinates