Recordad que para pedir soporte alguno, debéis facilitar los datos de soporte oportunos por favor, mirad aquí y leer las Normas generales del foro, esto nos servirá de ayuda para dar el mejor soporte..

Gracias.

La Administración de phpBB España.

Agregar logo patrocinador en headerTema Solucionado

Foros donde podréis dejar vuestras dudas sobre phpBB 3.0.x
Cerrado
Avatar de Usuario
Axelgt
Observador/a
Mensajes: 25
Registrado: 03 Nov 2011, 14:35
Edad: 48

Agregar logo patrocinador en header

#1

Mensaje por Axelgt »

Que tal amigo necesito que me ayuden como puedo hacer
necesito poner una serie de imágenes (logo patrocinadores) en el header de mi foro, justamente lo quiero poner del lado derecho
estas imágenes deben de estar cambiando constantemente como que fuera un gif con movimiento, pero cuando de clic en la imagen me direccione a la pagina oficial de mis patrocinadores.
me pasaron este codigo hecho con jquery el cual tiene un efecto muy bonito y me pregunto si es posible incorporarlo al mi header como lo quiero

Efecto deseado de imagenes

Este es el codigo

Código: Seleccionar todo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">
body {
	margin:0;
	padding:0;
	font: normal 0.6em sans-serif, Arial;
	width: 100%;
}
/*h1 {
	padding-left: 55px;
	font:bold 14px/1.5em "Trebuchet MS", Trebuchet, Arial, Verdana, Sans-serif;
	text-transform:uppercase;
	letter-spacing:.0.5em;
}*/
a {
	outline: none;
}
</style>

<style type="text/css">
/* rotator in-page placement */
    div.rotator {
	position:relative;
	height:345px;
	margin-left: 15px;
	display: none;
}
/* rotator css */
	div.rotator ul li {
	float:left;
	position:absolute;
	list-style: none;
}
/* rotator image style */	
	div.rotator ul li img {
	border:1px solid #ccc;
	padding: 4px;
	background: #FFF;
}
    div.rotator ul li.show {
	z-index:500
}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<!-- By Dylan Wagstaff, http://www.alohatechsupport.net -->
<script type="text/javascript">

function theRotator() {
	//Set the opacity of all images to 0
	$('div.rotator ul li').css({opacity: 0.0});
	
	//Get the first image and display it (gets set to full opacity)
	$('div.rotator ul li:first').css({opacity: 3.0});
		
	//Call the rotator function to run the slideshow, 6000 = change to next image after 6 seconds
	
	setInterval('rotate()',2000);
	
}

function rotate() {	
	//Get the first image
	var current = ($('div.rotator ul li.show')?  $('div.rotator ul li.show') : $('div.rotator ul li:first'));

    if ( current.length == 0 ) current = $('div.rotator ul li:first');

	//Get next image, when it reaches the end, rotate it back to the first image
	var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div.rotator ul li:first') :current.next()) : $('div.rotator ul li:first'));
	
	//Un-comment the 3 lines below to get the images in random order
	
	//var sibs = current.siblings();
    //var rndNum = Math.floor(Math.random() * sibs.length );
    //var next = $( sibs[ rndNum ] );
			

	//Set the fade in effect for the next image, the show class has higher z-index
	next.css({opacity: 0.0})
	.addClass('show')
	.animate({opacity: 1.0}, 1000);

	//Hide the current image
	current.animate({opacity: 0.0}, 1000)
	.removeClass('show');
	
};



$(document).ready(function() {		
	//Load the slideshow
	theRotator();
	$('div.rotator').fadeIn(1000);
    $('div.rotator ul li').fadeIn(1000); // tweek for IE
});
</script>

</head>
<body>


<div class="rotator">
  <ul>
    <li class="show"><a href="http://www.facebook.com/profile.php?id=100001123115024"><img src="../imageset/sponsor/logoarrecife.jpg" width="220" height="150"  alt="pic1" /></a></li>
    <li><a href="http://www.facebook.com/amazoniabioshop.acuario"><img src="../imageset/sponsor/amazonia.png" width="220" height="150"  alt="pic3" /></a></li>
    <li><a href="http://www.facebook.com/profile.php?id=100001899537325"><img src="../imageset/sponsor/ocean2.png" width="220" height="150"  alt="pic4" /></a></li>
  </ul>
</div>

</body>
</html>

URL: http://www.acuariosdeguate.com/foroadg
Plantilla(s) usuada(s): SE Square
MODs instalados: Tapatalk
Versión de phpBB: 3.2
Servidor: godaddy (pagado)

Avatar de Usuario
Axelgt
Observador/a
Mensajes: 25
Registrado: 03 Nov 2011, 14:35
Edad: 48

Re: Agregar logo patrocinador en header  Tema Solucionado

#2

Mensaje por Axelgt »

Ya lo Logre solucionar Gracias
Saludos,
URL: http://www.acuariosdeguate.com/foroadg
Plantilla(s) usuada(s): SE Square
MODs instalados: Tapatalk
Versión de phpBB: 3.2
Servidor: godaddy (pagado)

Avatar de Usuario
latavernadelapesca
Miembro
Mensajes: 294
Registrado: 09 Mar 2011, 07:19

Re: Agregar logo patrocinador en header

#3

Mensaje por latavernadelapesca »

Estaria bien comentases un poco como lo has solventado!!de esa manera seria de gran ayuda para el resto de usuarios.

Gracias y un saludo.
URL: http://www.latavernadelapesca.com
Versión phpBB: phpBB3 (3.10)
MODs Instalados:Board3Portal.
Plantilla(s) usada(s):Art_Elegance_Black(Prosilver)
Servidor:Linux Pago
Actualización desde otra versión: 3.5,3.8,3.9,3.10
Conversión desde otro sistema de foros:

juanmaroger1
Observador/a
Mensajes: 33
Registrado: 22 Oct 2011, 19:31
Edad: 57

Re: Agregar logo patrocinador en header

#4

Mensaje por juanmaroger1 »

por lo poco que yo se yo lo consigo
Advertisement Management
podeis verlo aqui
foro de la mitica yamaha Tmax
:cerveza:

Cerrado

Volver a “Foros de Soporte 3.0.x”