Fatal编程技术网
  • javascript/
  • Javascript 如何在Galleria中添加水印？

Javascript 如何在Galleria中添加水印？

javascript jquery

Javascript 如何在Galleria中添加水印？,javascript,jquery,z-index,galleria,Javascript,Jquery,Z Index,Galleria,是否可以在galleria全屏中添加html水印galleria有一个名为全屏的主题？我不希望像GD那样将HTML打印到图像上。我只想有HTML上面所有的图像，模仿水印效果。顺便说一句，我并不担心目前的透明度 这样的东西可以达到效果，只要它始终覆盖在图像上： <div id="logo"> <a href="/"><img src="logo.png"></a> <h2>Slogan.</h2> </d

是否可以在galleria全屏中添加html水印galleria有一个名为全屏的主题？我不希望像GD那样将HTML打印到图像上。我只想有HTML上面所有的图像，模仿水印效果。顺便说一句，我并不担心目前的透明度

这样的东西可以达到效果，只要它始终覆盖在图像上：

<div id="logo">
    <a href="/"><img src="logo.png"></a>
    <h2>Slogan.</h2>
</div>
这里可以看到一个工作示例：

但是，在加载第一个图像后，图像将消失。我猜这是因为他们在JQuery中使用了一些东西，使图像加载到最后一个顶部图像的顶部。。。因此，我必须以某种方式绑定该层

有什么想法吗

实际代码

CSS:

HTML:

向页面添加div，并将背景设置为具有透明背景的X&Y重复水印图像

进入全屏后，将div的宽度和高度设置为浏览器的宽度和高度，在插件上方设置z索引，并显示div

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

Gallery API:

所有的问题是，我必须用z-index声明divgalleria。

Galleria有一个名为全屏的主题。我已经尝试了您在这里提出的建议：[]但是，在加载第一批图像后，图像将消失。我猜这是因为他们在JQuery中使用了一些东西，使图像加载到最后一个顶部图像的顶部。。。所以我必须以某种方式绑定层。你试过高z指数吗？试试20000我试了1000。。。但是在Galleria全屏主题的CSS中，最高的z索引是4…共享您的代码。我用Galleria测试了一个快速样本，我的水印分区肯定位于图像库的顶部。使用javascript定位div的方式可能有问题。水印的代码在哪里？快速扫描代码不会显示您试图创建水印的内容。 
#logo { position:absolute; left: 20px; top: 40px; z-index: 5; }

#logo { width: 300px; height: 150px; border: 1px solid red; position: absolute; left: 20px; top: 40px; z-index: -5; }

<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>