サーキュラーモーションエフェクト JQUEY

今日はjQueryを使って見事な円を描く効果を作成しようとしている。我々は、jQuery.pathは、ポートフォリオの例ではメニューの円の動きをアニメーション化するプラグインを使用することになります。

アイデアは、メインメニューと丸みのコンテンツ領域を持つことです。メニュー項目のいずれかの上にマウスを移動すると、サブメニュー要素がコンテンツエリアのまわりで循環し、表示されます。

■デモサイト

■サンプルダウンロード

■HTML CODE

<div class="wrapper">
	<div id="images" class="images">
		<img id="image_about" src="images/1.png" alt="1" style="display:block;"/>
		<img id="image_portfolio" src="images/2.png" alt="2"/>
		<img id="image_contact" src="images/3.png" alt="3"/>
	</div>
	<div class="circleBig">
		<div id="menu" class="menu">
			<a id="about" class="about" href="">About me</a>
			<a id="portfolio" class="portfolio" href="">Portfolio</a>
			<a id="contact" class="contact" href="">Contact</a>
		</div>
	</div>
</div>
<div id="circle_about" class="circle">
	<div class="description">
		<ul>
			<li><a href="#">Who I am</a></li>
			<li><a href="#">What I do</a></li>
			<li><a href="#">My CV</a></li>
		</ul>
	</div>
</div>
<div id="circle_portfolio" class="circle">
	<div class="description">
		<div class="thumbs">
			<a href="#"><img src="thumbs/1.jpg" alt=""/></a>
			<a href="#"><img src="thumbs/2.jpg" alt=""/></a>
			...
		</div>
	</div>
</div>
<div id="circle_contact" class="circle">
	<div class="description">
		<ul>
			<li><a href="#">Email</a></li>
			<li><a href="#">Twitter</a></li>
			<li><a href="#">Facebook</a></li>
		</ul>
	</div>
</div>

■CSS CODE

.wrapper{

    font-family: Verdana;

    font-size:11px;

    width:600px;

    height:600px;

    position:relative;

    top:150px;

    left:200px;

}

.images img{

    display:none;

    position:absolute;

    left:6px;

    top:6px;

}

.circleBig{

    position:absolute;

    top:0px;

    left:0px;

    width:418px;

    height:418px;

    background:transparent url(../images/circlebg.png) no-repeat top left;

}





.menu{

    position:absolute;

    width:101px;

    height:74px;

    top:240px;

    left:260px;

    z-index:999;

}

a.about, a.portfolio, a.contact{

    float:left;

    clear:both;

    height:23px;

    margin-bottom:10px;

    width:105px;

    text-indent:-2000000px;

    opacity:0.8;

    background:transparent url(../images/menu.png) no-repeat top left;

}

a.portfolio{

    width:90px;

    background-position:-105px 0px;

}

a.contact{

    width:88px;

    background-position:-199px 0px;

}

a.about:hover, a.portfolio:hover, a.contact:hover{

    opacity:1.0;

}






.circle{

    margin-top:-88px;

    margin-left:-88px;

    width:176px;

    height:176px;

    position:absolute;

    left:0;

    top:0;

    background:transparent url(../images/circle.png) no-repeat top left;

    z-index:10;

    opacity:0;

    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);

}






.description{

    width:120px;

    margin:40px auto;

    text-align:center;

}

.description ul{

    list-style:none;

    text-align:center;

}

.description ul a{

    line-height:30px;

    font-weight:bold;

    color:#fff;

    text-decoration:none;

    text-transform:uppercase;

    font-size:11px;

    text-shadow:1px 1px 1px #aaa;

}

.description ul a:hover{

    color:#f0f0f0;

}

.thumbs a img{

    border:3px solid #f9f9f9;

    -moz-box-shadow:1px 1px 2px #999;

    -webkit-box-shadow:1px 1px 2px #999;

    box-shadow:1px 1px 2px #999;

}

■JS CODE

$(function() {
	/* when page loads animate the about section by default */

	//move($('#about'),2000,2);
	$('#menu > a').mouseover(

		function(){

			var $this = $(this);

			move($this,800,1);

		}

	);
	/*

	function to animate / show one circle.

	speed is the time it takes to show the circle

	turns is the turns the circle gives around the big circle

	 */

	function move($elem,speed,turns){

		var id = $elem.attr('id');

		var $circle = $('#circle_'+id);
		/* if hover the same one nothing happens */

		if($circle.css('opacity')==1)

			return;
		/* change the image */

		$('#image_'+id).stop(true,true)

					   .fadeIn(650)

					   .siblings()

					   .not(this)

					   .fadeOut(650);
		/*

		if there's a circle already, then let's remove it:

		either animate it in a circular movement or just fading

		out, depending on the current position of it

		 */

		$('#content .circle').each(function(i){

			var $theCircle = $(this);

			if($theCircle.css('opacity')==1)

				$theCircle.stop()

			.animate({

				path : new $.path.arc({

					center	: [409,359],

					radius	: 257,

					start	: 65,

					end     : -110,

					dir	: -1

				}),

				opacity: '0'

			},1500);

			else

				$theCircle.stop()

			.animate({opacity: '0'},200);

		});
		/* make the circle appear in a circular movement */

		var end = 65 - 360 * (turns-1);

		$circle.stop()

		.animate({

			path : new $.path.arc({

				center	: [409,359],

				radius	: 257,

				start	: 180,

				end		: end,

				dir		: -1

			}),

			opacity: '1'

		},speed);

	}

});

美しい背景画像ナビゲーション

このチュートリアルでは、背景画像のスライド効果を持つ美しいナビゲーションを作成しようとしている。主なアイデアは、別の位置が同じ背景画像を含む3つのリスト項目を持つことです。各項目の背景画像は本当に素晴らしい効果を作成し、異なる時間内の所定の位置にスライドしてアニメーション化されます。右から来る、それは左と逆からスライドされます：中央のリスト項目から背景画像をスライド方向はどの項目が、ユーザーが以前に依存します。

■デモページ

■サンプルダウンロード

■HTML　CODE

<div id="menuWrapper" class="menuWrapper bg1">
	<ul class="menu" id="menu">
		<li class="bg1" style="background-position:0 0;">
			<a id="bg1" href="#">Our Passion</a>
			<ul class="sub1" style="background-position:0 0;">
				<li><a href="#">Submenu 1</a></li>
				<li><a href="#">Submenu 2</a></li>
				<li><a href="#">Submenu 3</a></li>
			</ul>
		</li>
		<li class="bg1" style="background-position:-266px 0px;">
			<a id="bg2" href="#">Our Brands</a>
			<ul class="sub2" style="background-position:-266px 0;">
				<li><a href="#">Submenu 1</a></li>
				<li><a href="#">Submenu 2</a></li>
				<li><a href="#">Submenu 3</a></li>
			</ul>
		</li>
		<li class="last bg1" style="background-position:-532px 0px;">
			<a id="bg3" href="#">Contact</a>
			<ul class="sub3" style="background-position:-266px 0;">
				<li><a href="#">Submenu 1</a></li>
				<li><a href="#">Submenu 2</a></li>
				<li><a href="#">Submenu 3</a></li>
			</ul>
		</li>
	</ul>
</div>

■CSS　CODE

.menuWrapper{

    font-family: "Trebuchet MS", Arial, sans-serif;;

    font-size: 15px;

    font-style: normal;

    font-weight: normal;

    text-transform:uppercase;

    letter-spacing: normal;

    line-height: 1.45em;

    position:relative;

    margin:20px auto;

    height:542px;

    width:797px;

    background-position:0 0;

    background-repeat:no-repeat;

    background-color:transparent;

}

ul.menu{

    list-style:none;

    width:797px;

}

ul.menu > li{

    float:left;

    width:265px;

    height:542px;

    border-right:1px solid #777;

    background-repeat:no-repeat;

    background-color:transparent;

}

ul.menu > li.last{

    border:none;

}


.bg1{

    background-image: url(../images/1.jpg);

}

.bg2{

    background-image: url(../images/2.jpg);

}

.bg3{

    background-image: url(../images/3.jpg);

}


ul.menu > li > a{

    float:left;

    width:265px;

    height:50px;

    margin-top:450px;

    text-align:center;

    line-height:50px;

    color:#ddd;

    background-color:#333;

    letter-spacing:1px;

    cursor:pointer;

    text-decoration:none;

    text-shadow:0px 0px 1px #fff;

}


ul.menu > li ul{

    list-style:none;

    float:left;

    margin-top:-180px;

    width:100%;

    height:110px;

    padding-top:20px;

    background-repeat:no-repeat;

    background-color:transparent;

}


ul.menu > li ul li{

    display:none;

}


ul.menu > li ul.sub1{

    background-image:url(../images/bg1sub.png);

}

ul.menu > li ul.sub2{

    background-image:url(../images/bg2sub.png);

}

ul.menu > li ul.sub3{

    background-image:url(../images/bg3sub.png);

}


ul.menu > li ul li a{

    color:#fff;

    text-decoration:none;

    line-height:30px;

    margin-left:20px;

    text-shadow:1px 1px 1px #444;

    font-size:11px;

}
ul.menu > li ul li a:hover{

    border-bottom:1px dotted #fff;

}




ul.menu > li ul.sub1 li{

    display:block;

}

■JS CODE

$(function() {

	/* position of the 
 that is currently shown */

	var current = 0;
	$('#bg1,#bg2,#bg3').mouseover(function(e){
		var $this = $(this);

		/* if we hover the current one, then don't do anything */

		if($this.parent().index() == current)

			return;
		/* item is bg1 or bg2 or bg3, depending where we are hovering */

		var item = e.target.id;
		/*

		this is the sub menu overlay. Let's hide the current one

		if we hover the first 
 or if we come from the last one,

		then the overlay should move left -> right,

		otherwise right->left

		 */

		if(item == 'bg1' || current == 2)

			$('#menu .sub'+parseInt(current+1))

			    .stop()

				.animate({backgroundPosition:"(-266px 0)"},300,function(){

					$(this).find('li').hide();

				});

		else

			$('#menu .sub'+parseInt(current+1))

				.stop()

				.animate({backgroundPosition:"(266px 0)"},300,function(){

					$(this).find('li').hide();

				});
		if(item == 'bg1' || current == 2){

			/*

			if we hover the first 
 or if we come from

			the last one, then the images should move left -> right

			*/

			$('#menu > li')

				.animate({backgroundPosition:"(-800px 0)"},0)

				.removeClass('bg1 bg2 bg3')

				.addClass(item);

			move(1,item);

		}

		else{

			/*

			if we hover the first 
 or if we come

			from the last one, then the images should move

			right -> left

			*/

			$('#menu > li')

				.animate({backgroundPosition:"(800px 0)"},0)

				.removeClass('bg1 bg2 bg3')

				.addClass(item);

			move(0,item);

		}
		/*

		We want that if we go from the first one to the last one

		(without hovering the middle one), or from the last one

		to the first one, the middle menu's overlay should also

		slide, either from left to right or right to left.

		 */

		if(current == 2 && item == 'bg1'){

			$('#menu .sub'+parseInt(current))

			.stop()

			.animate({backgroundPosition:"(-266px 0)"},300);

		}

		if(current == 0 && item == 'bg3'){

			$('#menu .sub'+parseInt(current+2))

			.stop()

			.animate({backgroundPosition:"(266px 0)"},300);

		}
		/* change the current element */

		current = $this.parent().index();
		/* let's make the overlay of the current one appear */
		$('#menu .sub'+parseInt(current+1))

			.stop().animate({backgroundPosition:"(0 0)"},300,function(){

				$(this).find('li').fadeIn();

			});

	});

	/*

	dir:1 - move left->right

	dir:0 - move right->left

	 */

	function move(dir,item){

		if(dir){

			$('#bg1').parent()

					 .stop()

					 .animate({backgroundPosition:"(0 0)"},200);

			$('#bg2').parent()

					 .stop()

					 .animate({backgroundPosition:"(-266px 0)"},300);

			$('#bg3').parent()

					 .stop()

					 .animate({backgroundPosition:"(-532px 0)"},400,function(){

						$('#menuWrapper').removeClass('bg1 bg2 bg3')

										 .addClass(item);

					 });

		}

		else{

			$('#bg1').parent()

					 .stop()

					 .animate({backgroundPosition:"(0 0)"},400,function(){

						$('#menuWrapper').removeClass('bg1 bg2 bg3')

										 .addClass(item);

					 });

			$('#bg2').parent()

					 .stop()

					 .animate({backgroundPosition:"(-266px 0)"},300);

			$('#bg3').parent()

					 .stop()

					 .animate({backgroundPosition:"(-532px 0)"},200);

		}

	}

});

ｊQuerｙで実装するマウスカーソルについてくくるメニュー Cursor Following Menu

スクリプトの背後にある考え方は、ページ全体のカーソル移動を、次の浮動小数点のナビゲーションを作成することでした。目標は、メニュー自体は出しゃばったを避けるために、使いやすさを助ける"控えめ"float型のアニメーションで可能な限り最小限にすることでした。最終的な結果は、単純なマークアップを、つのレベルのナビゲーションとスタイリングCSSを使っています。あなたが単一ページのデモでテストすることができますアンカーポイントをページをアニメーション化する機能ですプラグインの追加機能が含まれています。

■デモページ

■サンプルダウンロード

<link href="malihu.cfm.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script src="jquery.easing.1.3.js" type="text/javascript"></script>



<div id="cf_menu">
<div class="container">
<div class="title">MENU</div>
<ul>
<li><a href="#home">↑ Home</a></li>
<li><a href="#about">About me</a></li>
<li><a href="work">+ Work</a>
<ul>
<li><a href="#recent">Recent</a></li>
<li><a href="#web">Web</a></li>
<li><a href="#print">Print</a></li>
</ul>
</li>
<li><a href="#blog">Blog</a></li>
<li><a href="links">+ Interesting links</a>
<ul>
<li><a href="#freebies">Freebies & Resources</a></li>
<li><a href="#people">People</a></li>
</ul>
</li>
<li><a href="#contact">Contact</a></li>
<li><a href="info">+ Script info</a>
<ul>
<li><a href="http://manos.malihu.gr/cursor-following-menu/">See the post</a></li>
<li><a onclick="javascript:pageTracker._trackPageview('/downloads/tuts/cursor_following_menu.zip');" href="http://manos.malihu.gr/tuts/cursor_following_menu.zip">↓ Download</a></li>
</ul>
</li>
<li><a href="http://manos.malihu.gr">malihu</a></li>
</ul></div>
</div>




<script>
//cursor following menu config
$mouseover_title="+ MENU"; //menu title text on mouse-over
$mouseout_title="MENU"; //menu title text on mouse-out
$menu_following_speed=2000; //the speed in which the menu follows the cursor (in milliseconds)
$menu_following_easing="easeOutCirc";
$menu_cursor_space=30; //space between cursor and menu
$menu_show_speed="slow"; //menu open animation speed
$menu_show_easing="easeOutExpo"; //menu open animation easing type
$menu_hide_speed="slow"; //menu close animation speed
$menu_hide_easing="easeInExpo"; //menu close animation easing type
</script>
 
<script src="malihu.jquery.cfm.js"></script>

画像をターンテーブルの様にクルクル回せるJquery

ラウンドアバウトは、jQueryは、高度にカスタマイズ可能なターンテーブルのようなインタラクティブな領域に静的なHTML要素の構造を変換するプラグインです。 （そして今だけではなく、ターンテーブルが、多くの形！）

順不同-リストには、いくつかの簡単な設定が後、ラウンドアバウトは、ネストされた要素のセットで動作することができます命じたとして最も単純な構成では、ラウンドアバウトは動作します。

■デモページ

■サンプルダウンロード

拡大したり縮小して一覧化したりできるイメージギャラリー

ここではマイクロイメージギャラリープラグインの改良版です。私はコメントで提案いくつかの機能は、具体的に自動再生機能は、各画像の説明を追加する可能性は、サイクルモードが追加されている。サイクルオプションが設定されている場合、自動再生機能にのみ設定することができることに注意してください。ただ、画像タグのalt属性内のテキストを配置すると、画像の説明を追加するには、さらにHTMLの構造部に示すように好きです。

■デモページ

■サンプルダウンロード

質問をクリックしたら答えが上からスライドしてくるエフェクト

■デモサイト

■サンプルダウンロード

■設置方法

衣装をドラッグして着せ替えが楽しめるjQuery Interactive Image Vamp up

今日、私たちは、どのようにいくつかのおかしい有効打突をイメージに与えることのオンラインアプリケーションを作成するかをあなたに示すつもりです。 私たちは、口髭と眼鏡のような少量のピッカピカ要素を引きずってリサイズするのにjQueryとjQuery UIを使用するでしょう。 PHPと共に、イメージとピッカピカ要素を合併するでしょう、そして、結末を見ることができます。

■デモサイト

■サンプルダウンロード

■HTML CODE

<div id="content">
	<div id="background" class="background">
		<img id="obj_0" width="640" height="480" src="background.jpg"/>
	</div>

	<div id="tools">
	</div>

	<div id="objects">
		<div class="obj_item">
			<img id="obj_1" width="50" class="ui-widget-content" src="elements/bowtie.png" alt="el"/>
		</div>
		<div class="obj_item">
			<img id="obj_2" width="50" class="ui-widget-content" src="elements/mus1.png" alt="el"/>
		</div>
		<div class="obj_item">
			<img id="obj_3" width="50" class="ui-widget-content" src="elements/beard.png" alt="el"/>
		</div>
	</div>

	<a id="submit"><span></span></a>

	<form id="jsonform" action="merge.php" method="POST">
		<input id="jsondata" name="jsondata" type="hidden" value="" autocomplete="off"></input>
	</form>

</div>

■CSS CODE

#content{

    position:relative;

    width:1105px;

    height:500px;

    margin:40px auto 0px auto;

    background-color:#F9F9F9;

    -moz-border-radius:6px;

    -webkit-border-radius:6px;

    border-radius:6px;

    -moz-box-shadow:0px 0px 8px #ccc;

    -webkit-box-shadow:0px 0px 8px #ccc;

    box-shadow:0px 0px 8px #ccc;

}

.background{

    position:absolute;

    width:640px;

    height:480px;

    top:10px;

    left:215px;

    -moz-box-shadow:0px 0px 3px #bbb;

    -webkit-box-shadow:0px 0px 3px #bbb;

    box-shadow:0px 0px 3px #bbb;

}

#objects{

    width:210px;

    height:486px;

    top:10px;

    left:10px;

    position:absolute;

}

.obj_item{

    width:70px;

    height:70px;

    float:left;

}


#tools{

    width:230px;

    top:8px;

    right:10px;

    position:absolute;

    height:420px;

    overflow-y:scroll;

    overflow-x:hidden;

}

.item{

    border:3px solid #fff;

    background-color:#ddd;

    height:60px;

    position:relative;

    margin:2px 5px 2px 2px;

    -moz-border-radius:3px;

    -webkit-border-radius:3px;

    border-radius:3px;

    -moz-box-shadow:0px 0px 2px #999;

    -webkit-box-shadow:0px 0px 2px #999;

    box-shadow:0px 0px 2px #999;

}


.thumb{

    width:50px;

    height:50px;

    margin:5px;

    float:left;

}

.slider{

    float: left;

    width: 115px;

    margin: 30px 0px 0px 5px;

    background-color:#fff;

    height:10px;

    position:relative;

}

.slider span{

    font-size:10px;

    font-weight:normal;

    margin-top:-25px;

    float:left;

}

.slider span.degrees{

    position:absolute;

    right:-22px;

    top:20px;

    width:20px;

    height:20px;

}

.slider .ui-slider-handle {

    width:10px;

    height:20px;

    outline:none;

}

a.remove{

    width:16px;

    height:16px;

    position:absolute;

    top:0px;

    right:0px;

    background:transparent url(../images/cancel.png) no-repeat top left;

    opacity:0.5;

    cursor:pointer;

}

a.remove:hover{

    opacity:1.0;

}

■JAVASCRIPT CODE

var data = {

	"images": [

		{"id" : "obj_0" ,"src" : "background.jpg", "width" : "640", "height" : "480"}

	]

};

$('#objects img').resizable({

	handles	: 'se',

	stop	: resizestop

}).parent('.ui-wrapper').draggable({

    revert	: 'invalid'

});


$('#background').droppable({

	accept	: '#objects div', /* accept only draggables from #objects */

	drop	: function(event, ui) {

		var $this 		= $(this);

		++count_dropped_hits;

		var draggable_elem = ui.draggable;

		draggable_elem.css('z-index',count_dropped_hits);

		/* object was dropped : register it */

		var objsrc 		= draggable_elem.find('.ui-widget-content').attr('src');

		var objwidth 	= parseFloat(draggable_elem.css('width'),10);

		var objheight 	= parseFloat(draggable_elem.css('height'),10);
		/* for top and left we decrease the top and left of the droppable element */

		var objtop		= ui.offset.top - $this.offset().top;

		var objleft		= ui.offset.left - $this.offset().left;
		var objid		= draggable_elem.find('.ui-widget-content').attr('id');

		var index 		= exist_object(objid);

		if(index!=-1) { //if exists update top and left

			data.images[index].top 	= objtop;

			data.images[index].left = objleft;

		}

		else{

			/* register new one */

			var newObject = {

				'id' 		: objid,

				'src' 		: objsrc,

				'width' 	: objwidth,

				'height' 	: objheight,

				'top' 		: objtop,

				'left' 		: objleft,

				'rotation'  : '0'

			};

			data.images.push(newObject);

			/* add object to sidebar*/
			$('
',{

				className	:	'item'

			}).append(

				$('
',{

					className	:	'thumb',

					html		:	''

				})

			).append(

				$('
',{

					className	:	'slider',

					html		:	'Rotate0'

				})

			).append(

				$('',{

					className	:	'remove'

				})

			).append(

				$('',{

					type		:	'hidden',

					value		:	objid		// keeps track of which object is associated

				})

			).appendTo($('#tools'));

			$('.slider').slider({

				orientation	: 'horizontal',

				max			: 180,

				min			: -180,

				value		: 0,

				slide		: function(event, ui) {

					var $this = $(this);

					/* Change the rotation and register that value in data object when it stops */

					draggable_elem.css({

						'-moz-transform':'rotate('+ui.value+'deg)',

						'-webkit-transform':'rotate('+ui.value+'deg)'

					});

					$('.degrees',$this).html(ui.value);

				},

				stop		: function(event, ui) {

					newObject.rotation = ui.value;

				}

			});

		}

	}

});

$('.remove',$('#tools')).live('click',function(){

	var $this = $(this);
	/* the element next to this is the input that stores the obj id */

	var objid = $this.next().val();

	/* remove the object from the sidebar */

	$this.parent().remove();

	/* ,from the picture */

	var divwrapper = $('#'+objid).parent().parent();

	$('#'+objid).remove();

	/* add again to the objects list */

	var image_elem 		= $this.parent().find('img');

	var thumb_width 	= image_elem.attr('width');

	var thumb_height 	= image_elem.attr('height');

	var thumb_src 		= image_elem.attr('src');

	$('',{

		id 			: 	objid,

		src			: 	thumb_src,

		width		:	thumb_width,

		//height		:	thumb_height,

		className	:	'ui-widget-content'

	}).appendTo(divwrapper).resizable({

		handles	: 'se',

		stop	: resizestop

	}).parent('.ui-wrapper').draggable({

		revert: 'invalid'

	});

	/* and unregister it - delete from object data */

	var index = exist_object(objid);

	data.images.remove(index);

});

■PHP　CODE

$res = JSON_decode(stripslashes($_POST['JSONdata']), true);

/* get data */

$count_images 	= count($res['images']);

/* the background image is the first one */

$background 	= $res['images'][0]['src'];

$photo1 		= imagecreatefromjpeg($background);

$foto1W 		= imagesx($photo1);

$foto1H 		= imagesy($photo1);

$photoFrameW 	= $res['images'][0]['width'];

$photoFrameH 	= $res['images'][0]['height'];

$photoFrame 	= imagecreatetruecolor($photoFrameW,$photoFrameH);

imagecopyresampled($photoFrame, $photo1, 0, 0, 0, 0, $photoFrameW, $photoFrameH, $foto1W, $foto1H);
/* the other images */

for($i = 1; $i < $count_images; ++$i){

	$insert 		= $res['images'][$i]['src'];

	$photoFrame2Rotation = (180-$res['images'][$i]['rotation']) + 180;
	$photo2 		= imagecreatefrompng($insert);
	$foto2W 		= imagesx($photo2);

	$foto2H 		= imagesy($photo2);

	$photoFrame2W	= $res['images'][$i]['width'];

	$photoFrame2H 	= $res['images'][$i]['height'];
	$photoFrame2TOP = $res['images'][$i]['top'];

	$photoFrame2LEFT= $res['images'][$i]['left'];
	$photoFrame2 	= imagecreatetruecolor($photoFrame2W,$photoFrame2H);

	$trans_colour 	= imagecolorallocatealpha($photoFrame2, 0, 0, 0, 127);

	imagefill($photoFrame2, 0, 0, $trans_colour);
	imagecopyresampled($photoFrame2, $photo2, 0, 0, 0, 0, $photoFrame2W, $photoFrame2H, $foto2W, $foto2H);
	$photoFrame2 	= imagerotate($photoFrame2,$photoFrame2Rotation, -1,0);

	/*after rotating calculate the difference of new height/width with the one before*/

	$extraTop		=(imagesy($photoFrame2)-$photoFrame2H)/2;

	$extraLeft		=(imagesx($photoFrame2)-$photoFrame2W)/2;
	imagecopy($photoFrame, $photoFrame2,$photoFrame2LEFT-$extraLeft, $photoFrame2TOP-$extraTop, 0, 0, imagesx($photoFrame2), imagesy($photoFrame2));

}

// Set the content type header - in this case image/jpeg

header('Content-type: image/jpeg');

imagejpeg($photoFrame, $targetfile);

imagedestroy($photoFrame);