1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.
  2. 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.
    Dismiss Notice
  3. 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

Discussion in 'Code Modifications [Archive]' started by Jake Bunce, Jun 1, 2011.

  1. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    (in response to Panupat's post)

    Edit this file:


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


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

    '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.
    R_A, EQnoble and Panupat like this.
  2. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    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:


    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');
    				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',
    Panupat likes this.
  3. Kier

    Kier XenForo Developer Staff Member

    I'd recommend 'swing' rather than 'linear'.
    R_A, Stormraven and Panupat like this.
  4. psTubble27

    psTubble27 Well-Known Member

    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.

Share This Page