effet reflect
8 years 11 months ago #31500
by petitof
Replied by petitof on topic effet reflect
Parfait merci 
Please Log in or Create an account to join the conversation.
8 years 11 months ago #31513
by petitof
Replied by petitof on topic effet reflect
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.250 seconds
