• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.
  • This forum is for release discussion only. Discussions that do not relate specifically to the resource release should be discussed in another, more appropriate forum.
  • 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

XenForo moderator
Staff member
#1
(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.png

'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.
 

Jake Bunce

XenForo moderator
Staff member
#2
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',
 

psTubble27

Well-known member
#4
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.