Page Peel Ad

[AlexInAustria]

Hi,

nachdem mir der Effekt gut gefällt für irgendwelche Aktionen, ich aber die Flash-Varianten zu aufdringlich finde, habe ich ein bisschen herumgesucht und einen reinen CSS/JavaScript Page-Peel-Effekt gefunden und dachte, dass das eventuell dem Einen oder Anderen auch gefallen könnte. Eine DEMO und eine englische Anleitung zum Einbau findet ihr unter den Links.

lg, Alex



Linkback: https://www.modified-shop.org/forum/index.php?topic=1803.0

[Tomcraft]

Hab ich mal in die Bastelecke verschoben.

[Trucker05]

Hallo Leute,

bin ich vielleicht zu doof??

Möchte das Pagepeel in meinen modified Shop einbauen!

Bei der Such nach einer Anleitung lande ich immer wieder hier!
Mit der englischen Anleitung kann ich leider nichts anfangen!

Gibt es irgendwo in den Tiefen des Forums eine genaue Anleitung, wie ich das oben rechts im Shop hinbekomme??
Welche Dateien muß ich wo ändern?

Danke

[Modulfux]

bin ich vielleicht zu doof??

Scheint so. *lach*. Nein Spaß beiseite:
Gehe in die index.html vom Template und setze das

Code: PHP  [Auswählen]

<div id="pageflip">
        <a href="#">
                <img src="page_flip.png" alt="" />
                <span class="msg_block">Subscribe via RSS</span>
        </a>
</div>
 

Nach ganz oben. Dann fügst du die zusätzlichen CSS-Styles noch in die Stylesheet und das jQuery Snippet kommt in die general.js.php.

Gruß
Ronny

[Trucker05]

Hallo,

so weit war ich schon!

Wenn ich das jQuery Snippet in die general.js.php einfüge bekomme ich folgende Fehlermeldung:

Code: [Auswählen]

Parse error: syntax error, unexpected '(', expecting T_VARIABLE or '$' in /home/www/web50/html/templates/i24-css-universal-gruen-SEO-modified/javascript/general.js.php on line 25
Hier noch der komplette Code:

Code: PHP  [Auswählen]

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-3707857-1");
pageTracker._trackPageview();
</script>

<?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 every template page in shop, you can add your template specific

   // js scripts here

?>

<script src="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/javascript/jquery.min.js" type="text/javascript"></script>

<script src="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/javascript/stuHover.js" type="text/javascript"></script>
<script src="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/javascript/cloud-zoom.1.0.2.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/pro_dropdown_2.css" type="text/css" media="screen" />
<link rel="stylesheet" href="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/cloud-zoom.css" type="text/css" media="screen" />
<link rel="stylesheet" href="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/thickbox.css" type="text/css" media="screen" />
<script src="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/javascript/thickbox.js" type="text/javascript"></script>

[shopper_ed]

Hier habe ich etwas auf deutsch, dass auch funktioniert:

http://www.webpicasso.de/blog/kostenloses-pagepeel/

Der Effekt ist in Flash und kommt viel krasser rüber..
Unter dem Link ist es auch schon eingebaut.

[franky_n]

Hallo trucker05,

außerdem brauchst Du das:

Code: PHP  [Auswählen]

<script src="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/javascript/jquery.min.js" type="text/javascript"></script>
 

nicht einbauen, denn das Original modified eCommerce Shopsoftware 1.05 nutzt bereits schon das jQuery Framework.

Viele Grüße

Franky

[Trucker05]

Da ich mich gegen die Flash Variante entschieden habe, helfen mir die beiden Antworten recht wenig!

 

[franky_n]

Hallo trucker05,

uns hilft dafür diese Aussage recht wenig:

Da ich mich gegen die Flash Variante entschieden habe, helfen mir die beiden Antworten recht wenig!

 

Hast Du die Zeile die ich oben angegeben habe jetzt wieder raus genommen?
Geht's dann? Geht's nicht? Zeigt er nur teilweise was an?
Ohne Beschreibung können auch wir nicht supporten!

Viele Grüße

Franky

[Trucker05]

Auch wenn ich den jquery raus nehme,gleicher Fehler:

Code: [Auswählen]

Parse error: syntax error, unexpected '(', expecting T_VARIABLE or '$' in /home/www/web50/html/templates/i24-css-universal-gruen-SEO-modified/javascript/general.js.php on line 26Hier nochmals der ganze Code, der die Fehlermeldung erzeugt!

Code: PHP  [Auswählen]

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-3707857-1");
pageTracker._trackPageview();
</script>

<?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 every template page in shop, you can add your template specific

   // js scripts here
   $("#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 src="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/javascript/stuHover.js" type="text/javascript"></script>
<script src="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/javascript/cloud-zoom.1.0.2.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/pro_dropdown_2.css" type="text/css" media="screen" />
<link rel="stylesheet" href="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/cloud-zoom.css" type="text/css" media="screen" />
<link rel="stylesheet" href="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/thickbox.css" type="text/css" media="screen" />
<script src="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/javascript/thickbox.js" type="text/javascript"></script>

Hab ich vielleicht das jQuery Snippet an der falschen Stelle eingefügt??

[franky_n]

Hallo trucker05,

der Zwischenteil sollte wahrscheinlich so sein (Rest stehen lassen wie er ist. Nur das zwischen dem <?php und ?>):

Code: PHP  [Auswählen]

<?php
/* -----------------------------------------------------------------------------------------
   $Id: general.js.php 1262 2005-09-30 10:00:32Z mz $

   XT-Commerce - community made shopping
   <a target="_blank" href="http://www.%28%28%20Wir%20dulden%20keine%20kommerziellen%20Werbelinks%20-%20Bitte%20Forenregeln%20beachten%21%20%29%29" rel="nofollow">http://www.(( Wir dulden keine kommerziellen Werbelinks - Bitte Forenregeln beachten! ))</a>
   Copyright (c) 2003 XT-Commerce
   -----------------------------------------------------------------------------------------
   Released under the GNU General Public License
   ---------------------------------------------------------------------------------------*/
   // this javascriptfile get includes at every template page in shop, you can add your template specific
   // js scripts here
?>
<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>
 

PS: Das jquery weiterhin raus lassen denn das ist schon drin. Sonst wird es doppelt aufgerufen und es können weitere Fehler entstehen.

Viele Grüße

Franky

[Trucker05]

Besten Dank schon mal!

Zumindest habe ich keine Fehlermeldung mehr! D.h. in der englischen Anleitung fehlte die erste und die letzte Zeile (14+33) für das script!

Allerdings reagiert das Feld noch nicht??
Hier mal noch der Shop: zum Shop

[franky_n]

Hallo trucker05,

Du hast sicherlich dies hier:

Code: PHP  [Auswählen]

<script src="templates/i24-css-universal-gruen-SEO-modified/javascript/jquery.min.js" type="text/javascript"></script>
 

in die includes/header.php gemacht....

Mach das mal da raus und nach Z.118:

Code: PHP  [Auswählen]

function popupImageWindow(url) {
  window.open(url,'popupImageWindow','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=yes,copyhistory=no,width=100,height=100,screenX=150,screenY=150,top=150,left=150')
}
//--></script>

vor dem <?php wieder rein.

Viele Grüße

Franky

[Modulfux]

Bevor hier weiter rumorakelt wird. Das jQuery-Snippet für das PagePeel muss auf jeden Fall unterhalbd der Zeile, in der das jQuery geladen wird. Andersherum kann es nicht funktionieren, weil $("...") noch undefiniert ist, wenn das jQuery-Framework noch nicht geladen ist.

Gruß
Ronny

[franky_n]

Hallo Webkiste,

genau das habe ich ihm damit gesagt!
Nur das er 2 Fehler drin hatte denn das Javascript war nicht als Javascript eingebunden!

Viele Grüße

Franky