Maybe you should hire someone for help? I am sure Q or others would take this up for you, for pay.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?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...
I've got it working. You can view a demo at http://www.fido-x.net/flipper.
Modules for OpenCart 2.3.0.2
Homepage Module [Free - since OpenCart 0.7.7]
Multistore Extensions
Store Manager Multi-Vendor/Multi-Store management tool
If you're not living on the edge ... you're taking up too much space!
Add the following to your stylesheet:-
Then, if using OpenCart 1.3.2 or ealier, insert the following into the layout.tpl file:-
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:-
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/).
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;
}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>
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>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/).
Modules for OpenCart 2.3.0.2
Homepage Module [Free - since OpenCart 0.7.7]
Multistore Extensions
Store Manager Multi-Vendor/Multi-Store management tool
If you're not living on the edge ... you're taking up too much space!
Thank you,
Quincaillerie, Fourniture industrielle Maroc
Opencart 1.5.1.3 French edition.
IX web hosting
Who is online
Users browsing this forum: No registered users and 20 guests
