Results 1 to 3 of 3

Thread: convert image gallery into website portfolio

  1. #1

    Thread Starter
    Addicted Member seditives's Avatar
    Join Date
    Jan 2011
    Location
    South of England
    Posts
    151

    Cool convert image gallery into website portfolio

    Hi, so I sound this code online (image gallery) that I would like to change into a website portfolio, but instead of just a image coming up I would like the whole website to come up as a background, unfortunately i am a complete newbie at JS and therefore do not know where to start with this so I would appreciate any help. thank you in advanced

    demo: http://manos.malihu.gr/tuts/malihu-j...e-gallery.html

    Code:
    // t: current time, b: begInnIng value, c: change In value, d: duration
    jQuery.easing['jswing'] = jQuery.easing['swing'];
    
    jQuery.extend( jQuery.easing,
    {
    	def: 'easeOutQuad',
    	swing: function (x, t, b, c, d) {
    		//alert(jQuery.easing.default);
    		return jQuery.easing[jQuery.easing.def](x, t, b, c, d);
    	},
    	easeInQuad: function (x, t, b, c, d) {
    		return c*(t/=d)*t + b;
    	},
    	easeOutQuad: function (x, t, b, c, d) {
    		return -c *(t/=d)*(t-2) + b;
    	},
    	easeInOutQuad: function (x, t, b, c, d) {
    		if ((t/=d/2) < 1) return c/2*t*t + b;
    		return -c/2 * ((--t)*(t-2) - 1) + b;
    	},
    	easeInCubic: function (x, t, b, c, d) {
    		return c*(t/=d)*t*t + b;
    	},
    	easeOutCubic: function (x, t, b, c, d) {
    		return c*((t=t/d-1)*t*t + 1) + b;
    	},
    	easeInOutCubic: function (x, t, b, c, d) {
    		if ((t/=d/2) < 1) return c/2*t*t*t + b;
    		return c/2*((t-=2)*t*t + 2) + b;
    	},
    	easeInQuart: function (x, t, b, c, d) {
    		return c*(t/=d)*t*t*t + b;
    	},
    	easeOutQuart: function (x, t, b, c, d) {
    		return -c * ((t=t/d-1)*t*t*t - 1) + b;
    	},
    	easeInOutQuart: function (x, t, b, c, d) {
    		if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
    		return -c/2 * ((t-=2)*t*t*t - 2) + b;
    	},
    	easeInQuint: function (x, t, b, c, d) {
    		return c*(t/=d)*t*t*t*t + b;
    	},
    	easeOutQuint: function (x, t, b, c, d) {
    		return c*((t=t/d-1)*t*t*t*t + 1) + b;
    	},
    	easeInOutQuint: function (x, t, b, c, d) {
    		if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
    		return c/2*((t-=2)*t*t*t*t + 2) + b;
    	},
    	easeInSine: function (x, t, b, c, d) {
    		return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
    	},
    	easeOutSine: function (x, t, b, c, d) {
    		return c * Math.sin(t/d * (Math.PI/2)) + b;
    	},
    	easeInOutSine: function (x, t, b, c, d) {
    		return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
    	},
    	easeInExpo: function (x, t, b, c, d) {
    		return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
    	},
    	easeOutExpo: function (x, t, b, c, d) {
    		return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
    	},
    	easeInOutExpo: function (x, t, b, c, d) {
    		if (t==0) return b;
    		if (t==d) return b+c;
    		if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
    		return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
    	},
    	easeInCirc: function (x, t, b, c, d) {
    		return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
    	},
    	easeOutCirc: function (x, t, b, c, d) {
    		return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
    	},
    	easeInOutCirc: function (x, t, b, c, d) {
    		if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
    		return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
    	},
    	easeInElastic: function (x, t, b, c, d) {
    		var s=1.70158;var p=0;var a=c;
    		if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
    		if (a < Math.abs(c)) { a=c; var s=p/4; }
    		else var s = p/(2*Math.PI) * Math.asin (c/a);
    		return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
    	},
    	easeOutElastic: function (x, t, b, c, d) {
    		var s=1.70158;var p=0;var a=c;
    		if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
    		if (a < Math.abs(c)) { a=c; var s=p/4; }
    		else var s = p/(2*Math.PI) * Math.asin (c/a);
    		return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
    	},
    	easeInOutElastic: function (x, t, b, c, d) {
    		var s=1.70158;var p=0;var a=c;
    		if (t==0) return b;  if ((t/=d/2)==2) return b+c;  if (!p) p=d*(.3*1.5);
    		if (a < Math.abs(c)) { a=c; var s=p/4; }
    		else var s = p/(2*Math.PI) * Math.asin (c/a);
    		if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
    		return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
    	},
    	easeInBack: function (x, t, b, c, d, s) {
    		if (s == undefined) s = 1.70158;
    		return c*(t/=d)*t*((s+1)*t - s) + b;
    	},
    	easeOutBack: function (x, t, b, c, d, s) {
    		if (s == undefined) s = 1.70158;
    		return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
    	},
    	easeInOutBack: function (x, t, b, c, d, s) {
    		if (s == undefined) s = 1.70158; 
    		if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
    		return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
    	},
    	easeInBounce: function (x, t, b, c, d) {
    		return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b;
    	},
    	easeOutBounce: function (x, t, b, c, d) {
    		if ((t/=d) < (1/2.75)) {
    			return c*(7.5625*t*t) + b;
    		} else if (t < (2/2.75)) {
    			return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
    		} else if (t < (2.5/2.75)) {
    			return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
    		} else {
    			return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
    		}
    	},
    	easeInOutBounce: function (x, t, b, c, d) {
    		if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b;
    		return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b;
    	}
    });
    A subtle thought that is in error may yet give rise to fruitful inquiry that can establish truths of great value. - Isaac Asimov

  2. #2
    Freelancer akhileshbc's Avatar
    Join Date
    Jun 2008
    Location
    Trivandrum, Kerala, India
    Posts
    7,652

    Re: convert image gallery into website portfolio

    If the page you want to load is part of a different site, then I think it would be better to load them up in iframes. Otherwise, if it is just a separate content, say a different page of your site, maybe you could embed them in a separate div with "display" set to none and upon clicking the button, load them up in the main div via jQuery.


    If my post was helpful to you, then express your gratitude using Rate this Post.
    And if your problem is SOLVED, then please Mark the Thread as RESOLVED (see it in action - video)
    My system: AMD FX 6100, Gigabyte Motherboard, 8 GB Crossair Vengance, Cooler Master 450W Thunder PSU, 1.4 TB HDD, 18.5" TFT(Wide), Antec V1 Cabinet

    Social Group: VBForums - Developers from India


    Skills: PHP, MySQL, jQuery, VB.Net, Photoshop, CodeIgniter, Bootstrap,...

  3. #3

    Thread Starter
    Addicted Member seditives's Avatar
    Join Date
    Jan 2011
    Location
    South of England
    Posts
    151

    Re: convert image gallery into website portfolio

    sorry i have just realized how stupid i was, so court up in the JS and just realized all i had to do was change the link in the main code and do iframes like you have pointed out XD ty
    A subtle thought that is in error may yet give rise to fruitful inquiry that can establish truths of great value. - Isaac Asimov

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width