effet reflect
Replied by petitof on topic effet reflect
Posted 8 years 4 months ago
Parfait merci 
Please Log in or Create an account to join the conversation.
Replied by petitof on topic effet reflect
Posted 8 years 4 months ago
Bonjour, ça ne fonctionne pas de mon côté, je pense m'y prendre comme un manche, voici le code mis dans le fichier index.php de man template :
<html>
<head>
<title>Document sans titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</script language='javascript' type='text/javascript'</script>
</head>;
<script LANGUAGE='javascript' type='text/javascript'></(function($) {
$.fn.reflect = function(options) {
options = $.extend({
height: 1/3,
opacity: 0.5
}, options);
return this.unreflect().each(function() {
var img = this;
if (img.tagName === 'IMG') {
function doReflect() {
var imageWidth = img.width, imageHeight = img.height, reflection, reflectionHeight, wrapper, context, gradient;
reflectionHeight = Math.floor((options.height > 1) ? Math.min(imageHeight, options.height) : imageHeight * options.height);
reflection = $("<canvas />")[0];
if (reflection.getContext) {
context = reflection.getContext("2d");
try {
$(reflection).attr({width: imageWidth, height: reflectionHeight});
context.save();
context.translate(0, imageHeight-1);
context.scale(1, -1);
context.drawImage(img, 0, 0, imageWidth, imageHeight);
context.restore();
context.globalCompositeOperation = "destination-out";
gradient = context.createLinearGradient(0, 0, 0, reflectionHeight);
gradient.addColorStop(0, "rgba(255, 255, 255, " + (1 - options.opacity) + ")");
gradient.addColorStop(1, "rgba(255, 255, 255, 1.0)");
context.fillStyle = gradient;
context.rect(0, 0, imageWidth, reflectionHeight);
context.fill();
} catch(e) {
return;
}
} else {
if (!window.ActiveXObject) return;
reflection = $("<img />").attr("src", img.src).css({
width: imageWidth,
height: imageHeight,
marginBottom: reflectionHeight - imageHeight,
filter: "FlipV progid:DXImageTransform.Microsoft.Alpha(Opacity=" + (options.opacity * 100) + ", FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=0, FinishY=" + (reflectionHeight / imageHeight * 100) + ")"
})[0];
}
$(reflection).css({display: "block", border: 0});
wrapper = $((img.parentNode.tagName === 'A') ? "<span />" : "<div />").insertAfter(img).append([img, reflection])[0];
wrapper.className = img.className;
$(img).data("reflected", wrapper.style.cssText = img.style.cssText);
$(wrapper).css({width: imageWidth, height: imageHeight + reflectionHeight, overflow: "hidden"});
img.style.cssText = "display: block; border: 0px";
img.className = "reflected";
}
if (img.complete) doReflect();
else $(img).load(doReflect);
}
});
}
$.fn.unreflect = function() {
return this.unbind("load").each(function() {
var img = this, reflected = $(this).data("reflected"), wrapper;
if (reflected !== undefined) {
wrapper = img.parentNode;
img.className = wrapper.className;
img.style.cssText = reflected;
$(img).data("reflected", null);
wrapper.parentNode.replaceChild(img, wrapper);
}
});
}
})(window.jQuery || window.Zepto);
$('.reflectck').each(function() {
$(this).reflect({});
});</script></body>
</body>
</html>
<?php
/**
* @package yoo_nano3
* @author YOOtheme www.yootheme.com
* @copyright Copyright (C) YOOtheme GmbH
* @license www.gnu.org/licenses/gpl.html GNU/GPL
*/
// no direct access
defined('_JEXEC') or die('Restricted access');
// get warp
$warp = require(__DIR__.'/warp.php');
// load main theme file, located in /layouts/theme.php
echo $warp->render('theme');
Et pourtant j'y met de la bonne volonté. merci de votre aide
<html>
<head>
<title>Document sans titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</script language='javascript' type='text/javascript'</script>
</head>;
<script LANGUAGE='javascript' type='text/javascript'></(function($) {
$.fn.reflect = function(options) {
options = $.extend({
height: 1/3,
opacity: 0.5
}, options);
return this.unreflect().each(function() {
var img = this;
if (img.tagName === 'IMG') {
function doReflect() {
var imageWidth = img.width, imageHeight = img.height, reflection, reflectionHeight, wrapper, context, gradient;
reflectionHeight = Math.floor((options.height > 1) ? Math.min(imageHeight, options.height) : imageHeight * options.height);
reflection = $("<canvas />")[0];
if (reflection.getContext) {
context = reflection.getContext("2d");
try {
$(reflection).attr({width: imageWidth, height: reflectionHeight});
context.save();
context.translate(0, imageHeight-1);
context.scale(1, -1);
context.drawImage(img, 0, 0, imageWidth, imageHeight);
context.restore();
context.globalCompositeOperation = "destination-out";
gradient = context.createLinearGradient(0, 0, 0, reflectionHeight);
gradient.addColorStop(0, "rgba(255, 255, 255, " + (1 - options.opacity) + ")");
gradient.addColorStop(1, "rgba(255, 255, 255, 1.0)");
context.fillStyle = gradient;
context.rect(0, 0, imageWidth, reflectionHeight);
context.fill();
} catch(e) {
return;
}
} else {
if (!window.ActiveXObject) return;
reflection = $("<img />").attr("src", img.src).css({
width: imageWidth,
height: imageHeight,
marginBottom: reflectionHeight - imageHeight,
filter: "FlipV progid:DXImageTransform.Microsoft.Alpha(Opacity=" + (options.opacity * 100) + ", FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=0, FinishY=" + (reflectionHeight / imageHeight * 100) + ")"
})[0];
}
$(reflection).css({display: "block", border: 0});
wrapper = $((img.parentNode.tagName === 'A') ? "<span />" : "<div />").insertAfter(img).append([img, reflection])[0];
wrapper.className = img.className;
$(img).data("reflected", wrapper.style.cssText = img.style.cssText);
$(wrapper).css({width: imageWidth, height: imageHeight + reflectionHeight, overflow: "hidden"});
img.style.cssText = "display: block; border: 0px";
img.className = "reflected";
}
if (img.complete) doReflect();
else $(img).load(doReflect);
}
});
}
$.fn.unreflect = function() {
return this.unbind("load").each(function() {
var img = this, reflected = $(this).data("reflected"), wrapper;
if (reflected !== undefined) {
wrapper = img.parentNode;
img.className = wrapper.className;
img.style.cssText = reflected;
$(img).data("reflected", null);
wrapper.parentNode.replaceChild(img, wrapper);
}
});
}
})(window.jQuery || window.Zepto);
$('.reflectck').each(function() {
$(this).reflect({});
});</script></body>
</body>
</html>
<?php
/**
* @package yoo_nano3
* @author YOOtheme www.yootheme.com
* @copyright Copyright (C) YOOtheme GmbH
* @license www.gnu.org/licenses/gpl.html GNU/GPL
*/
// no direct access
defined('_JEXEC') or die('Restricted access');
// get warp
$warp = require(__DIR__.'/warp.php');
// load main theme file, located in /layouts/theme.php
echo $warp->render('theme');
Et pourtant j'y met de la bonne volonté. merci de votre aide
Please Log in or Create an account to join the conversation.
Time to create page: 0.695 seconds
