Changing Image Transitions

Is there a way to change the way an image enters the frame?

I would like it to fade in and out instead of how it currently it slides in at a strange angle, "gk_the_real_design".

Can someone from Gavickpro answer this question?

Hi,

Please open the following file: modules/mod_image_show_gk4/styles/gk_the_real_design/engine.js

and change fragment:

Code: Select all

new Fx.Tween(slides[actual], {property:'right', duration: $G['anim_speed']}).start(-999);
      new Fx.Tween(slides[which], {property:'right', duration: $G['anim_speed']}).start(-999, $G['image_x']);   
      new Fx.Tween(slides[actual], {property:'bottom', duration: $G['anim_speed']}).start(999);
      new Fx.Tween(slides[which], {property:'bottom', duration: $G['anim_speed']}).start(-999, $G['image_y']);
      new Fx.Tween(slides[actual], {property:'opacity', duration: $G['anim_speed']/2}).start(1, 0);
      (function() {
         new Fx.Tween(slides[which], {property:'opacity', duration: $G['anim_speed']/2}).start(0, 1);
      }).delay($G['anim_speed']/2);
      
      new Fx.Tween(textBlocks[actual], {property:'left', duration: $G['anim_speed']}).start(-999);
      new Fx.Tween(textBlocks[which], {property:'left', duration: $G['anim_speed']}).start(-999, $G['text_x']);   
      new Fx.Tween(textBlocks[actual], {property:'top', duration: $G['anim_speed']}).start(999);
      new Fx.Tween(textBlocks[which], {property:'top', duration: $G['anim_speed']}).start(-999, $G['text_y']);   
      new Fx.Tween(textBlocks[actual], {property:'opacity', duration: $G['anim_speed']/2}).start(1, 0);


to:

Code: Select all

new Fx.Tween(slides[actual], {property:'right', duration: $G['anim_speed']}).start($G['image_x']);
      new Fx.Tween(slides[which], {property:'right', duration: $G['anim_speed']}).start($G['image_x'], $G['image_x']);   


      new Fx.Tween(slides[actual], {property:'bottom', duration: $G['anim_speed']}).start($G['image_y']);
      new Fx.Tween(slides[which], {property:'bottom', duration: $G['anim_speed']}).start($G['image_y'], $G['image_y']);


      new Fx.Tween(slides[actual], {property:'opacity', duration: $G['anim_speed']/2}).start(1, 0);
      (function() {
         new Fx.Tween(slides[which], {property:'opacity', duration: $G['anim_speed']/2}).start(0, 1);
      }).delay($G['anim_speed']/2);
      
      new Fx.Tween(textBlocks[actual], {property:'left', duration: $G['anim_speed']}).start($G['text_x']);
      new Fx.Tween(textBlocks[which], {property:'left', duration: $G['anim_speed']}).start($G['text_x'], $G['text_x']);   
      new Fx.Tween(textBlocks[actual], {property:'top', duration: $G['anim_speed']}).start($G['text_y']);
      new Fx.Tween(textBlocks[which], {property:'top', duration: $G['anim_speed']}).start($G['text_y'], $G['text_y']);   
      new Fx.Tween(textBlocks[actual], {property:'opacity', duration: $G['anim_speed']/2}).start(1, 0);


Thanks for the reply, unfortunately that didn't seem to work. It is still coming in the same way.

Could you provide me details to your installation ? Please use PM and remember to include link to created forum topic.

Did you receive my PM? If not I can resend.

Yes I'm get it and waiting for FTP details.

Hi,

Please open the following file: modules/mod_image_show_gk4/styles/gk_the_real_design/engine.js

and change fragment:

Code: Select all

new Fx.Tween(slides[actual], {property:'right', duration: $G['anim_speed']}).start(-999);
      new Fx.Tween(slides[which], {property:'right', duration: $G['anim_speed']}).start(-999, $G['image_x']);   
      new Fx.Tween(slides[actual], {property:'bottom', duration: $G['anim_speed']}).start(999);
      new Fx.Tween(slides[which], {property:'bottom', duration: $G['anim_speed']}).start(-999, $G['image_y']);
      new Fx.Tween(slides[actual], {property:'opacity', duration: $G['anim_speed']/2}).start(1, 0);
      (function() {
         new Fx.Tween(slides[which], {property:'opacity', duration: $G['anim_speed']/2}).start(0, 1);
      }).delay($G['anim_speed']/2);
      
      new Fx.Tween(textBlocks[actual], {property:'left', duration: $G['anim_speed']}).start(-999);
      new Fx.Tween(textBlocks[which], {property:'left', duration: $G['anim_speed']}).start(-999, $G['text_x']);   
      new Fx.Tween(textBlocks[actual], {property:'top', duration: $G['anim_speed']}).start(999);
      new Fx.Tween(textBlocks[which], {property:'top', duration: $G['anim_speed']}).start(-999, $G['text_y']);   
      new Fx.Tween(textBlocks[actual], {property:'opacity', duration: $G['anim_speed']/2}).start(1, 0);


to:

Code: Select all

new Fx.Tween(slides[actual], {property:'right', duration: $G['anim_speed']}).start($G['image_x']);
      new Fx.Tween(slides[which], {property:'right', duration: $G['anim_speed']}).start($G['image_x'], $G['image_x']);   


      new Fx.Tween(slides[actual], {property:'bottom', duration: $G['anim_speed']}).start($G['image_y']);
      new Fx.Tween(slides[which], {property:'bottom', duration: $G['anim_speed']}).start($G['image_y'], $G['image_y']);


      new Fx.Tween(slides[actual], {property:'opacity', duration: $G['anim_speed']/2}).start(1, 0);
      (function() {
         new Fx.Tween(slides[which], {property:'opacity', duration: $G['anim_speed']/2}).start(0, 1);
      }).delay($G['anim_speed']/2);
      
      new Fx.Tween(textBlocks[actual], {property:'left', duration: $G['anim_speed']}).start($G['text_x']);
      new Fx.Tween(textBlocks[which], {property:'left', duration: $G['anim_speed']}).start($G['text_x'], $G['text_x']);   
      new Fx.Tween(textBlocks[actual], {property:'top', duration: $G['anim_speed']}).start($G['text_y']);
      new Fx.Tween(textBlocks[which], {property:'top', duration: $G['anim_speed']}).start($G['text_y'], $G['text_y']);   
      new Fx.Tween(textBlocks[actual], {property:'opacity', duration: $G['anim_speed']/2}).start(1, 0);


Hi,

How do I add custom effect? Should I create an helper file also?

Thanks

You need to modify engine.js file to add your own effect only. All JavaScript code for style is only at this file.