Flip image

cmym
Inactive member
Topic Author
New Member

11 years 4 months ago #32437 by cmym

Flip image was created by cmym

Hello. You have a flip image in the upper right of the template Hot It Starts!, And I want to know how I can use it to put it in the template, I'm using is Hot Restaurant.
I would appreciate if you can help.

Please Log in to join the conversation.

ivan.milic
Support Staff
Moderator

11 years 4 months ago #32440 by ivan.milic

Replied by ivan.milic on topic Flip image

You need this script at bottom of had section of index.php:

Code:

<script type="text/javascript"> 
jQuery(document).ready(function(){

//Page Flip on hover

	jQuery("#pageflip").hover(function() {
		jQuery("#pageflip img , .msg_block").stop()
			.animate({
				width: '307px', 
				height: '319px'
			}, 500); 
		} , function() {
		jQuery("#pageflip img").stop() 
			.animate({
				width: '50px', 
				height: '52px'
			}, 220);
		jQuery(".msg_block").stop() 
			.animate({
				width: '50px', 
				height: '50px'
			}, 200);
	});

	
});
</script> 

You need this css:

Code:

#pageflip {
position:relative;
background:#fff;
z-index:400;
}

#pageflip img {
width:50px;
height:52px;
z-index:400;
position:absolute;
right:0;
top:0;
}

#pageflip .msg_block {
width: 50px;
height: 50px;
position: absolute;
z-index: 300;
right: 0;
top: 0;
background: url(http://demo.hotjoomlatemplates.com/itstarts/templates/hjt_itstarts/images/subscribe.gif) no-repeat right top;
text-indent: -9999px;
}

in layout.css

and this is HTML you would put as first thing in <body> tag of index.php of temlate:

Code:

<div id="pageflip">
	<a href="http://www.hotjoomlatemplates.com">
		<img src="http://demo.hotjoomlatemplates.com/itstarts/templates/hjt_itstarts/images/page_flip.png" alt="" id="flip" style="width: 50px; height: 52px; overflow: hidden;">
		<span class="msg_block" style="width: 50px; height: 50px; overflow: hidden;">Page Peel</span>
	</a>
</div>

Please Log in to join the conversation.

cmym
Inactive member
Topic Author
New Member

11 years 4 months ago #32441 by cmym

Replied by cmym on topic Flip image

Wonderful!, we stay very well, thank you very much

Please Log in to join the conversation.

Time to create page: 0.136 seconds