• This forum has been archived. New threads and replies may not be made. All add-ons/resources that are active should be migrated to the Resource Manager. See this thread for more information.

Changing transition for image resizing in posts

Jake Bunce

Well-known member
(in response to Panupat's post)

For example, the little yoyo-bounce when changing page navigation or viewing images full size. How do I change it to ease-in, ease-out without the bounce?

Edit this file:

js/xenforo/xenforo.js

Find this code:

Code:
		/**
		 * Shows and hides a full-size version of the image
		 *
		 * @param event
		 */
		toggleFullSize: function(e)
		{
			var currentWidth = this.$image.width(),
				offset, scale,
				scrollLeft, scrollTop,
				layerX, layerY,
				$fullSizeImage,
				speed = XenForo.speed.normal,
				easing = 'easeOutBack';

			//TODO: speed up response in slow browsers

			if (this.actualWidth > currentWidth)
			{
				offset = this.$image.offset();
				scale = this.actualWidth / currentWidth;
				layerX = e.pageX - offset.left;
				layerY = e.pageY - offset.top;

This is the line you need to change:

Code:
				easing = 'easeOutBack';

Here are some different transitions you can use:

http://hosted.zeh.com.br/tweener/docs/en-us/misc/transitions.html

Screen shot 2011-06-01 at 12.33.44 PM.webp

'linear' works well:

Code:
				easing = 'linear';

Be sure to do a hard refresh of the page after editing this code to ensure the browser has loaded the new js.
 
And I'll just add the other one to this thread...

To change the transition for the pagenav scroller you need to edit the same file:

js/xenforo/xenforo.js

Find this code:

Code:
	/**
	 * Handles the scrollable pagenav gadget, allowing selection of any page between 1 and (end)
	 * while showing only {range*2+1} pages plus first and last at once.
	 *
	 * @param jQuery .pageNav
	 */
	XenForo.PageNav = function($pageNav) { this.__construct($pageNav); };
	XenForo.PageNav.prototype =
	{
		__construct: function($pageNav)
		{
			var $scroller = $pageNav.find('.scrollable');
			if (!$scroller.length)
			{
				return false;
			}

			console.info('PageNav %o', $pageNav);

			this.start = parseInt($pageNav.data('start'));
			this.page  = parseInt($pageNav.data('page'));
			this.end   = parseInt($pageNav.data('end'));
			this.last  = parseInt($pageNav.data('last'));
			this.range = parseInt($pageNav.data('range'));
			this.size  = (this.range * 2 + 1);

			this.baseurl = $pageNav.data('baseurl');
			this.sentinel = $pageNav.data('sentinel');

			$scroller.scrollable(
			{
				speed: XenForo.speed.slow,
				easing: 'easeOutBounce',
				keyboard: false
			});

			this.api = $scroller.data('scrollable').onBeforeSeek($.context(this, 'beforeSeek'));

			this.$prevButton = $pageNav.find('.PageNavPrev').click($.context(this, 'prevPage'));
			this.$nextButton = $pageNav.find('.PageNavNext').click($.context(this, 'nextPage'));

Again you will see an easing setting:

Code:
				easing: 'easeOutBounce',

I like 'linear', but you can use any of the transitions from the previous screenshot:

Code:
				easing: 'linear',
 
With the advent of minified xF code, editing xenforo.js has become a little tricky. The minified xenforo.js doesn't contain the syntax mentioned here, and the full xenforo.js does, but is apparently not read by the xF engine.
 
Top Bottom