Question

是否可以在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 &copy; 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>

Answer 1

在页面中添加div并将背景设置为X＆amp; Y重复水印图像，背景透明。

进入全屏后，设置宽度＆amp; div的高度与宽度和宽度的关系浏览器的高度，在插件上方设置z-index，并显示div。

它应该看起来像图像是水印的。当然，它不是，但它会产生你正在寻找的效果。

图库API：http://galleria.aino.se/docs/1.2/api/methods/#display

Answer 2

所有问题都是我必须用z-index声明div＃galleria。

如何在Galleria中添加水印？

2 个答案: