Changing transition for image resizing in posts

[Jake Bunce]

(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:

		/**
		 * 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:

				easing = 'easeOutBack';

Here are some different transitions you can use:

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



'linear' works well:

				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.

 

[Jake Bunce]

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:

	/**
	 * 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:

				easing: 'easeOutBounce',

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

				easing: 'linear',

 

[Kier]

I'd recommend 'swing' rather than 'linear'.

 

[psTubble27]

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.