如何在Galleria中添加水印？
是否可以在 Galleria 全屏中添加（某种）html 水印（Galleria 有一个名为 Fullscreen 的主题）？我不希望将 HTML“打印”到图像上，就像使用 GD 那样。我只想将 HTML 放在所有图像之上，模仿水印效果。顺便说一句，我现在并不担心透明度。
只要它始终位于图像上，这样的东西就可以解决问题：
<div id="logo">
<a href="/"><img src="logo.png"></a>
<h2>Slogan.</h2>
</div>
这是我正在使用的CSS：
#logo { position:absolute; left: 20px; top: 40px; z-index: 5; }
可以在此处看到一个工作示例： http://namourphoto.com
但是，加载第一张图像后图像就会消失。我猜这是因为他们在 JQuery 中使用了一些东西，使图像加载到最后一个顶部图像的顶部......所以我必须以某种方式“绑定”该层。
有什么想法吗？
实际代码
CSS：
#logo { width: 300px; height: 150px; border: 1px solid red; position: absolute; left: 20px; top: 40px; z-index: -5; }
HTML：
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>Fotografia de Casamento: Namour Art Photo Cine</title>
<meta name="description" content="Contamos Sua História com Arte">
<meta name="keywords" content="Fotografia de Casamento">
<meta name="author" content="Rogério Madureira - Atipico.com.br">
<meta name="robots" content="noarchive, noodp, notranslate, noimageindex">
<link rel="icon" href="http://namourphoto.com/namour.ico" type="image/x-icon">
<link type="text/css" rel="stylesheet" href="http://namourphoto.com/style.css" media="all">
<link type="text/css" rel="stylesheet" href="http://namourphoto.com/g/themes/fullscreen/galleria.fullscreen.css" media="all">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="http://namourphoto.com/g/galleria-1.2.5.min.js"></script>
<script type="text/javascript" src="http://namourphoto.com/g/themes/fullscreen/galleria.fullscreen.min.js"></script>
<script type="text/javascript" src="http://namourphoto.com/g/plugins/flickr/galleria.flickr.min.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-656362-77']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<script type="text/javascript">
$(document).ready(function() {
var referrer=document.referrer;
var url=$.trim(referrer.substring(7,referrer.length));
var site=$(location).attr('href');//Pega a uri do site atual
});
</script>
</head>
<body onClick="document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);document.documentElement.mozRequestFullScreen();document.documentElement.requestFullScreen();">
<div id="logo">
<a href="/"><img src="logo_namour_md.png" title="Estúdio Namour"></a>
<h2>Contando Sua História com Arte.</h2>
</div>
<div id="content">
<div id="galleria"></div>
<script>
//Galleria.loadTheme('http://namourphoto.com/g/themes/fullscreen/galleria.fullscreen.min.js');
$('#galleria').galleria({
// debug: true,
// pauseOnInteraction: true,
preload: 2,
showInfo: true,
idleMode: false,
imageTimeout: 90000,
// initialTransition: fadeslide,
transition: 'fade',
transitionSpeed: 500,
autoplay: 5000,
imageCrop: true,
thumbnails: false, //dependendo desse set, os outros de baixo não funcionarão
// thumbCrop: 'height',
// easing: 'galleriaOut',
// _hideDock: false,
// _closeOnClick: false,
flickr: 'set: 72157628259563719',
flickrOptions: {
max: 30,
imageSize: 'big',
description: true,
},
/* extend: function(options) {
var gallery = this; // "this" is the gallery instance
this.bind(Galleria.IMAGE, function(e) {
var current = gallery.getData(gallery.getIndex());
var currImg = current.original;
var altText = $(currImg).attr('alt');
console.log(altText, current.title);
});
}*/
});
</script>
</div><!--fecha content-->
<div id="footer">
<p>Copyright © 2000-2011. Todos os direitos reservados. Desenvolvido e hospedado por <a href="http://atipico.com.br" title="Atípico">Atípico</a></p>
</div><!--fecha footer-->
</body>
</html>
Is it possible to add (kind of) a html watermark in galleria fullscreen (Galleria has a theme called Fullscreen)? I am not expecting to "print" the HTML onto the image, like it would be possible to do with GD. I just want to have the HTML above all images, imitating a watermark effect. By the way, I am not worried about the transparency at this moment.
Something like this would do the trick as long as it is always over the images:
<div id="logo">
<a href="/"><img src="logo.png"></a>
<h2>Slogan.</h2>
</div>
This is the css I am using:
#logo { position:absolute; left: 20px; top: 40px; z-index: 5; }
A working example can be seen here: http://namourphoto.com
However, the image disappears after the load of the first images. I guess it is because they are using something in JQuery that makes the images to be load on top of the last top image... So I'd have to "bind" the layer somehow.
Any ideas?
ACTUAL CODE
CSS:
#logo { width: 300px; height: 150px; border: 1px solid red; position: absolute; left: 20px; top: 40px; z-index: -5; }
HTML:
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>Fotografia de Casamento: Namour Art Photo Cine</title>
<meta name="description" content="Contamos Sua História com Arte">
<meta name="keywords" content="Fotografia de Casamento">
<meta name="author" content="Rogério Madureira - Atipico.com.br">
<meta name="robots" content="noarchive, noodp, notranslate, noimageindex">
<link rel="icon" href="http://namourphoto.com/namour.ico" type="image/x-icon">
<link type="text/css" rel="stylesheet" href="http://namourphoto.com/style.css" media="all">
<link type="text/css" rel="stylesheet" href="http://namourphoto.com/g/themes/fullscreen/galleria.fullscreen.css" media="all">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="http://namourphoto.com/g/galleria-1.2.5.min.js"></script>
<script type="text/javascript" src="http://namourphoto.com/g/themes/fullscreen/galleria.fullscreen.min.js"></script>
<script type="text/javascript" src="http://namourphoto.com/g/plugins/flickr/galleria.flickr.min.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-656362-77']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<script type="text/javascript">
$(document).ready(function() {
var referrer=document.referrer;
var url=$.trim(referrer.substring(7,referrer.length));
var site=$(location).attr('href');//Pega a uri do site atual
});
</script>
</head>
<body onClick="document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);document.documentElement.mozRequestFullScreen();document.documentElement.requestFullScreen();">
<div id="logo">
<a href="/"><img src="logo_namour_md.png" title="Estúdio Namour"></a>
<h2>Contando Sua História com Arte.</h2>
</div>
<div id="content">
<div id="galleria"></div>
<script>
//Galleria.loadTheme('http://namourphoto.com/g/themes/fullscreen/galleria.fullscreen.min.js');
$('#galleria').galleria({
// debug: true,
// pauseOnInteraction: true,
preload: 2,
showInfo: true,
idleMode: false,
imageTimeout: 90000,
// initialTransition: fadeslide,
transition: 'fade',
transitionSpeed: 500,
autoplay: 5000,
imageCrop: true,
thumbnails: false, //dependendo desse set, os outros de baixo não funcionarão
// thumbCrop: 'height',
// easing: 'galleriaOut',
// _hideDock: false,
// _closeOnClick: false,
flickr: 'set: 72157628259563719',
flickrOptions: {
max: 30,
imageSize: 'big',
description: true,
},
/* extend: function(options) {
var gallery = this; // "this" is the gallery instance
this.bind(Galleria.IMAGE, function(e) {
var current = gallery.getData(gallery.getIndex());
var currImg = current.original;
var altText = $(currImg).attr('alt');
console.log(altText, current.title);
});
}*/
});
</script>
</div><!--fecha content-->
<div id="footer">
<p>Copyright © 2000-2011. Todos os direitos reservados. Desenvolvido e hospedado por <a href="http://atipico.com.br" title="Atípico">Atípico</a></p>
</div><!--fecha footer-->
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
向页面添加一个 div 并将背景设置为 X & Y 具有透明背景的重复水印图像。
进入全屏后，设置宽度和宽度。 div 的高度与宽度的比值浏览器的高度，设置插件上方的z-index，并显示div。
它应该看起来像带有水印的图像。当然不是，但它会达到您想要的效果。
画廊 API： http://galleria.aino.se/docs/1.2/api /方法/#display
Add a div to the page and set the background to an X & Y repeating watermark image with a transparent background.
Upon entering fullscreen, set the width & height of the div to the width & height of the browser, set the z-index above the plugin, and show the div.
It should appear like the image is watermarked. Of course, it's not but it will have the effect that you're looking for.
Gallery API: http://galleria.aino.se/docs/1.2/api/methods/#display
所有的问题是我还必须声明 div#galleria 和 z-index 。
All the problem was that I had to declare div#galleria with z-index also.