Page 1 of 2
Re: Page page flip/peel jquery and css effects
Posted: Tue Dec 22, 2009 6:54 pm
by Yakiv
espc wrote:you're right, comparing the fact that one is free and the other is not!
anyway, could I ask you a help? I got stuck with this tutorial:
http://www.sohtanaka.com/web-design/sim ... query-css/
I only know that I have to edit (according to qphoria) header.tpl file, but I don't know which code I have to paste in there and I don't know in what folder of my opencart, the files which I downloaded, must be uploaded...
I'm lost mate, I will be grateful...
Maybe you should hire someone for help? I am sure Q or others would take this up for you, for pay.
Re: Page page flip/peel jquery and css effects
Posted: Tue Dec 22, 2009 7:59 pm
by adecer
espc wrote:you're right, comparing the fact that one is free and the other is not!
anyway, could I ask you a help? I got stuck with this tutorial:
http://www.sohtanaka.com/web-design/sim ... query-css/
I only know that I have to edit (according to qphoria) header.tpl file, but I don't know which code I have to paste in there and I don't know in what folder of my opencart, the files which I downloaded, must be uploaded...
I'm lost mate, I will be grateful...
have you resolved it?
Re: Page page flip/peel jquery and css effects
Posted: Tue Dec 22, 2009 9:23 pm
by fido-x
I've got it working. You can view a demo at
http://www.fido-x.net/flipper.
Re: Page page flip/peel jquery and css effects
Posted: Tue Jan 05, 2010 6:18 am
by michellescott
So how did you copy and paste it, Well in OC 3.0?
curious?
Re: Page page flip/peel jquery and css effects
Posted: Tue Jan 05, 2010 7:09 am
by fido-x
Add the following to your stylesheet:-
Code: Select all
#pageflip {
position: absolute;
top: 0px;
right: 0px;
}
#pageflip img {
width: 50px; height: 52px;
z-index: 99;
position: absolute;
top: 0px;
right: 0px;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px; height: 50px;
position: absolute;
z-index: 50;
top: 0px;
right: 0px;
background: url('../image/subscribe.png') no-repeat right top;
text-indent: -9999px;
}
Then, if using OpenCart 1.3.2 or ealier, insert the following into the layout.tpl file:-
Code: Select all
<div id="pageflip">
<a href="#">
<img src="catalog/view/theme/YOUR_TEMPLATE/image/page_flip.png" alt="" />
<span class="msg_block">Subscribe via RSS</span>
</a>
</div>
at the beginning of the file, either after the <body> tag or as the first item inside the "container". Then at the end of that file, add the following:-
Code: Select all
<script type="text/javascript"><!--
$("#pageflip").hover(function() { //On hover...
$("#pageflip img , .msg_block").stop()
.animate({ //Animate and expand the image and the msg_block (Width + height)
width: '307px',
height: '319px'
}, 500);
} , function() {
$("#pageflip img").stop() //On hover out, go back to original size 50x52
.animate({
width: '50px',
height: '52px'
}, 220);
$(".msg_block").stop() //On hover out, go back to original size 50x50
.animate({
width: '50px',
height: '50px'
}, 200); //Note this one retracts a bit faster (to prevent glitching in IE)
});
//--></script>
If using 1.3.3 or later, insert the above code snippets into the header.tpl file.
Put the images (page_flip.png and subsribe.png) in your template's image folder. You can get the images from the tutorial site (
http://www.sohtanaka.com/web-design/sim ... query-css/).
Re: Page page flip/peel jquery and css effects
Posted: Wed Oct 27, 2010 5:50 pm
by clippitch
Can you please make it detailed im confused with the tutorials.
I cant find the layout.tpl as stated. Im using 1.4.9.1
Re: Page page flip/peel jquery and css effects
Posted: Fri Dec 31, 2010 1:31 am
by Mitch
Simple enough.. Someone should just make this an extension...I guess I could uh?!?
Re: Page page flip/peel jquery and css effects
Posted: Fri Jul 29, 2011 5:37 pm
by FTIndustriels
Thank you,