如何在画廊中添加水印

是否可以在galleria全屏(galleria有一个名为fullscreen的主题)中添加(一种)html水印?我不希望将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>

为页面添加一个div，并设置背景为X &透明背景的Y重复水印图像。

进入全屏后，设置宽度&div的高度到宽度&浏览器的高度，设置插件上方的z-index，并显示div

它应该看起来像图像加了水印。当然，它不是，但它会有你想要的效果。

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

所有的问题是，我必须声明div#galleria与z-index。

相关内容

最新更新

热门标签：