Hallo,
alter code
PHP
document.writeln("<script language="JavaScript">");
document.writeln("document.write(\'<script language="JavaScript">\');");
document.writeln("document.write(\'function get_pagepeelroot() {\');");
document.writeln("document.write(\'return "http://localhost/pagepeel/";\');");
document.writeln("document.write(\'}\');");
document.writeln("document.write(\'function get_catcherimage() {\');");
document.writeln("document.write(\'return "http://localhost/pagepeel/klein.gif";\');");
document.writeln("document.write(\'}\');");
document.writeln("document.write(\'function get_pagepeelimage() {\');");
document.writeln("document.write(\'return "http://localhost/pagepeel/gross.gif";\');");
document.writeln("document.write(\'}\');");
document.writeln("document.write(\'function gc_cl() {\');");
document.writeln("document.write(\'window.open ("http://localhost/pagepeel/click.php");\');");
document.writeln("document.write(\'}\');");
document.writeln("document.write(\'<\\/script>\');");
document.writeln("document.write(\'<script src=http://localhost/pagepeel/jquery-1.5.2.min.js><\\/script>\');");
document.writeln("document.write(\'<script src=http://localhost/pagepeel/jquery.peelback.js><\\/script>\');");
document.writeln("</script>");neuer code der per index.html geht es wird es so aufgerufen:
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>jQuery Peelback Demo</title> </head> <body> <script src="../assets/jquery-1.5.2.min.js"></script> <script src="../jquery.peelback.js"></script> <script> $(function() { $('body').peelback({ adImage : 'peel-ad.png', peelImage : '../assets/peel-image.png', clickURL : 'http://www.thebestdinosaur.com/', smallSize: 50, bigSize: 500, gaTrack : true, gaLabel : '#1 Stegosaurus', autoAnimate: true }); }); </script> </body> </html>und die jquery.peelback.js sieht so aus:
JavaScript
/*! * jQuery Peelback * Copyright 2011, Rob Flaherty * * Dual licensed under the MIT and GPL licenses * http://www.opensource.org/licenses/mit-license.php * http://www.gnu.org/licenses/gpl.html * */ (function($) { $.Peelback = function(el, settings) { //Caching var base = this; base.$el = $(el); base.el = el; base.$el.data("Peelback", base); //Main stuff base.init = function() { //Vars var peelHTML, peelImage, peelMask, smallSize, bigSize, smallMaskSize, bigMaskSize; //Defaults, meet Settings base.settings = $.extend({},$.Peelback.defaultSettings, settings); //If ad image is missing, stop the show if (typeof(base.settings.adImage) !== 'string' || base.settings.adImage === '') { if ( base.settings.debug === true) { console.log('Ad image missing'); } return; } //If peel image is missing, stop the show if (typeof(base.settings.peelImage) !== 'string' || base.settings.peelImage === '') { if ( base.settings.debug === true) { console.log('Peel effect image missing'); } return; } //If click URL is missing, stop the show if (typeof(base.settings.clickURL) !== 'string' || base.settings.clickURL === '') { if ( base.settings.debug === true) { console.log('Click URL missing'); } return; } //Convenience vars and set mask size smallSize = base.settings.smallSize + 'px'; bigSize = base.settings.bigSize + 'px'; smallMaskSize = (base.settings.smallSize - 3) + 'px'; bigMaskSize = Math.floor((base.settings.bigSize * 0.96)) + 'px'; //Assemble peelHTML = $('<div id="peelback"><a href="' + base.settings.clickURL + '" target="_blank"><img src="' + base.settings.peelImage +'" alt="" border="0" /></a><div></div></div>'); peelImage = peelHTML.find('img'); peelMask = peelHTML.find('div'); $(peelImage).css({ 'width': '0', 'height': '0', 'z-index': '9001', 'position': 'absolute', 'right': '0', 'top': '0', '-ms-interpolation-mode': 'bicubic' }); $(peelMask).css({ 'width': '0', 'height': '0', 'overflow': 'hidden', 'position': 'absolute', 'right': '0', 'top': '0', 'z-index': '9000', 'background': 'url(' + base.settings.adImage + ') no-repeat right top' }); //Insert base.$el.prepend(peelHTML); //Auto animate option if (base.settings.autoAnimate === false) { $(peelImage).css({ 'width' : smallSize, 'height' : smallSize }); $(peelMask).css({ 'width' : smallMaskSize, 'height' : smallMaskSize }); } else { $(peelImage).delay(500).animate({ width: smallSize, height: smallSize }, 500); $(peelMask).delay(500).animate({ width: smallMaskSize, height: smallMaskSize }, 500); } //Hover behavior peelHTML.hover( //Mouseover function() { $(peelImage).stop().animate({ width: bigSize, height: bigSize }, 500); $(peelMask).stop().animate({ width: bigMaskSize, height: bigMaskSize }, 500); //If GA tracking enabled if (base.settings.gaTrack === true) { if (typeof(_gaq) != 'undefined') { _gaq.push(['_trackEvent', 'Ad_Interaction', 'Peelback', base.settings.gaLabel]); } else { if (base.settings.debug === true) { console.log('Google Analytics _gaq object undefined'); } } } }, //Mouseout function() { $(peelImage).stop().animate({ width: smallSize, height: smallSize }, 400); $(peelMask).stop().animate({ width: smallMaskSize, height: smallMaskSize }, 400); } ); }; // Run initializer base.init(); }; $.Peelback.defaultSettings = { adImage : null, peelImage : null, clickURL : null, smallSize : 58, bigSize : 510, gaTrack : false, gaLabel : 'default', autoAnimate : true, debug : false }; $.fn.peelback = function(settings) { return this.each(function() { (new $.Peelback(this, settings)); }); }; })(jQuery);jetzt wollte ich gern den code in der Index.html so anpassen wie der alte code.
kann man das machen ?
mfg jens