Antwort #15 am: 09. Januar 2011, 10:13:44
Hallo!
Darf ich dieses Thema noch einmal aufgreifen?
Ich bekomme es einfach nicht hin.
Ich erhalte zwar keine Fehlermeldungen, dafür aber auch keine schöne Animation.
Ich hänge hier mal meine Codeschnipsel an und das Ergebnis als Screenshot:
templates/index.html
<div id
="pageflip"> <a href
="http://www.twitter.com/CoHauS_Berlin" target
="_blank"> <img src
="flip.png" alt
="Test" /> <span
class="msg_block">Twitter
</span
> </a
></div
>{config_load
file="$language/lang_$language.conf" section
="index"}<div id
="wrap"> <div
{if $language == 'german'}id
="header-german"{else}id
="header-english"{/if}> <div id
="logo"><img src
="{$tpl_path}img/spacer.gif" width
="400" alt
="{$store_name}" /></div
> <div id
="cart">{$box_CART}{$box_POPCART}</div
></div
>... templates/stylesheet.css (am Ende eingefügt)
/*Page Peel Ad*/
#pageflip {
position: relative;
}
#pageflip img {
width: 50px; height: 52px;
z-index: 99;
position: absolute;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px; height: 50px;
position: absolute;
z-index: 50;
right: 0; top: 0;
background: url(flipb.png) no-repeat right top;
text-indent: -9999px;
}
/*Page Peel Ad*/
templates/javascript/general.js.php
<?php
/* -----------------------------------------------------------------------------------------
$Id: general.js.php 1262 2005-09-30 10:00:32Z mz $
XT-Commerce - community made shopping
http://www.(( Wir dulden keine kommerziellen Werbelinks - Bitte <a href="index.php?topic=3013.0">Forenregeln</a> beachten! ))
Copyright (c) 2003 XT-Commerce
-----------------------------------------------------------------------------------------
Released under the GNU General Public License
---------------------------------------------------------------------------------------*/
// this javascriptfile get includes at the BOTTOM of every template page in shop
// you can add your template specific js scripts here
?>
<script src="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/javascript/jquery.js" type="text/javascript"></script>
<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>
<script src="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/javascript/jquery.cycle.all.js" type="text/javascript"></script>
<script src="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/javascript/jquery.easing.1.3.js" type="text/javascript"></script>
...
Bitte helft mir - danke.
Gruß AEOne
[ Für Gäste sind keine Dateianhänge sichtbar ]
