Как добавить водяной знак в Galleria? - PullRequest
Новая
       33

Как добавить водяной знак в Galleria?

0 голосов
/ 15 декабря 2011

Можно ли добавить (вид) водяного знака html в полноэкранный режим galleria (в 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>

Ответы [ 2 ]

0 голосов
/ 17 декабря 2011

Вся проблема заключалась в том, что мне пришлось также объявить div # galleria с z-index.

0 голосов
/ 15 декабря 2011

Добавьте div на страницу и установите фон для повторяющегося изображения водяного знака X & Y с прозрачным фоном.

После входа в полноэкранный режим установите ширину и высоту div в соответствии с шириной и высотой браузера, установите z-index над плагином и покажите div.

Это должно выглядеть так, как будто на изображении есть водяной знак Конечно, это не так, но это будет иметь эффект, который вы ищете.

Галерея API: http://galleria.aino.se/docs/1.2/api/methods/#display

...