Página 1 de 2
¿Cómo puedo hacer algo así?
Publicado: 02 Sep 2011, 21:39
por MAG
URL:
http://www.devmod.net/foro
Versión phpBB: 3.0.9
MODs Instalados: Ninguno.
Plantilla(s) usada(s): Subsilver2
Servidor: Linux
Actualización desde otra versión: No
Conversión desde otro sistema de foros: No
------
Hola a todos,
Os quiero preguntar algo simple, que no he conseguido encontrar. El tema es que quiero hacer algo así:
http://www.factoriademishra.com/phpBB3/ ... ?f=8&t=947
Si os fijáis en ese tema, cuando pasáis el ratón por algunos de los links de las cartas se ve una previsualización de las cartas. Estoy intentando hacer algo parecido pero no lo consigo, ya que en reemplazo HTML no me reconoce el código PHP. Alguien sabe si hay algún BBCode ya similar o tendría que instalar también un MOD?
El uso que tengo es así:
Y el reemplazo HTML que tengo actual es así:
Código: Seleccionar todo
<img src="http://gatherer.wizards.com/Handlers/Image.ashx?type=card&name={SIMPLETEXT}">
No hace lo que quiero, simplemente cambia el texto por la imagen en cuestión, pero me gustaría previsualizarla, no cambiarla por dicha imagen.
A ver si alguien me puede echar un cable.
Un saludo.
P.D: No me había dado cuenta antes que no había incluido los datos de soporte. Los había rellenado pero no los había incluido.
Re: ¿Cómo puedo hacer algo así?
Publicado: 03 Sep 2011, 02:54
por memoadian
Ah pues eso es un tooltip y se logra simplemente con javascript.
yo tenia uno por ahi, bueno buscalo así te dan un javascritpt y solo se pone el link y en el title la imágen algo así:
si puedo te lo busco
Re: ¿Cómo puedo hacer algo así?
Publicado: 03 Sep 2011, 21:00
por MAG
Estuve un rato buscando, pero no ví nada parecido. Para wordpress sí que hay varios plugins que hacen lo mismo, pero para phpbb3 no encontré nada.
Si lo encuentras me harías un favor enorme.
Un saludo.
Re: ¿Cómo puedo hacer algo así? Tema Solucionado
Publicado: 04 Sep 2011, 00:27
por memoadian
A ver no es que este para phbb3 simplemente tomamos un código que haga eso y lo adaptamos, te dejo un tooltip muy bonito
vas a hacer esto:
abrir
overall_header.html
buscar
agregar antes
Código: Seleccionar todo
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//Tooltips
$(".tip_trigger").hover(function(){
tip = $(this).find('.tip');
tip.show(); //Mostrar tooltip
}, function() {
tip.hide(); //Ocultar tooltip
}).mousemove(function(e) {
var mousex = e.pageX + 20; // Obtener coordenadas X
var mousey = e.pageY + 20; // Obtener coordenadas Y
var tipWidth = tip.width(); //Obtener el ancho del tooltip
var tipHeight = tip.height(); //Obtener el alto del tooltip
//Distancia del elemento desde el borde derecho
var tipVisX = $(window).width() - (mousex + tipWidth);
//Distancia del elemento desde el borde de abajo
var tipVisY = $(window).height() - (mousey + tipHeight);
if ( tipVisX < 20 ) { //Si el tooltip se excede horizontalmente
mousex = e.pageX - tipWidth - 20;
} if ( tipVisY < 20 ) { //Si el tooltip se excede verticalmente
mousey = e.pageY - tipHeight - 20;
}
tip.css({ top: mousey, left: mousex });
});
});
</script>
<style type="text/css">
.tip {
color: #fff;
background:#1d1d1d;
display:none; /*--Hides by default--*/
padding:10px;
position:absolute; z-index:1000;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
</style>
luego vas a ir al acp y vas a crear un nuevo bbcode con estas caracteristicas:
Uso de BBCode
Reemplazo HTML
Código: Seleccionar todo
<a href="{URL}" class="tip_trigger" style="float: left; margin: 5px 20px 20px 0; padding: 10px; border: 1px dashed #ddd;">{TEXT}<span class="tip"><img src="{URL}" width="150" alt="" /></span>
</a>
Linea de ayuda
Código: Seleccionar todo
[tooltip= link , url de imagen]Texto del enlace[/tooltip]
la primera url es el enlace ejemplo
http://google.com
la segunda es la imagen que quieres que salga en el tooltip
http://miweb.com/imagen.jpg
el texto es el que aarecerá y sobre el cual saldrá la imágen
cuida bien de dejar los espacios en el bbcode, aqui te dejo uno de ejemplo
que use para probarlo.
Código: Seleccionar todo
[tooltip=http://google.com , http://2.bp.blogspot.com/_yceRPUAEPKs/TBT_Bm-J1oI/AAAAAAAAA3o/bkVNjLOPhWw/s1600/yugioh!.jpg]Carta de necromancia[/tooltip]
el resultado es este:
limpias la cache de plantillas y lo pruebas.
Re: ¿Cómo puedo hacer algo así?
Publicado: 04 Sep 2011, 11:28
por MAG
Muchísimas gracias, de verdad. Dios no existe pero ojalá el destino te lo pague con mucho éxito.
Re: ¿Cómo puedo hacer algo así?
Publicado: 04 Sep 2011, 17:26
por zyxer
Hola MAG, estube mirando en tu página y veo que lo hiciste un poco diferente de lo que texplicaron, tiene un uso más sencillo y funciona muy bien... definitivamente mejor. Me gustaría saber como lo haz hecho. Se podrá?
Re: ¿Cómo puedo hacer algo así?
Publicado: 04 Sep 2011, 18:12
por zyxer
Perdón por el doble post, pero no me deja editar.
He estado intentando hacer lo que dicen y no me ha funcionado, osea, me sale el BBcode, pero no hace la función que debería... no sé a que se deba ni tengo idea de a que se pueda deber, pues CREO que he hecho todo correctamente.
Lo he probado incluso con el mismo ejemplo que memoadian ofrese y no me funciona. Pueden ver el mansaje de mi foro lo intento
aquí.
Re: ¿Cómo puedo hacer algo así?
Publicado: 04 Sep 2011, 22:23
por memoadian
Es muy extraño, yo probe el bbcode de tu tema y se ve perfecto en mi foro de pruebas, así como lo pusiste
solo se me ocurre que hayas hecho mal el bbcode, pues el roblema es que no esta remplazando bien los valores agregados.
me gustaria ver como lo hizo MAG
Re: ¿Cómo puedo hacer algo así?
Publicado: 04 Sep 2011, 22:35
por zyxer
hmmm.... bueno no se como puedo no haber hecho el BBcode correctamente si hice puros copy-paste... no creo que el problema sea que lo este sustituyendo mal, porque no lo esta sustituyendo por nada, aparece tal y como lo presenta cuando estas editando. Se te ocurre algo mas?
Re: ¿Cómo puedo hacer algo así?
Publicado: 04 Sep 2011, 22:53
por zyxer
a mi se me ocurre que puede que se haga alguna confucion con los 2 lugares donde dice {URL}, porque puede que no sepa cual {URL} va a sustituir por cual, ya que hay 2...
Re: ¿Cómo puedo hacer algo así?
Publicado: 05 Sep 2011, 02:54
por memoadian
Tienes toda la razón pensé que habia editado eso
debe ser
y remplazo
Código: Seleccionar todo
<a href="{URL}" class="tip_trigger" style="float: left; margin: 5px 20px 20px 0; padding: 10px; border: 1px dashed #ddd;">{TEXT}<span class="tip"><img src="{URL2}" width="150" alt="" /></span>
</a>
Re: ¿Cómo puedo hacer algo así?
Publicado: 05 Sep 2011, 10:10
por karbiko
Zyxer,.. ¿estás enlazando una imagen?
Estás escribiendo ésto:
Código: Seleccionar todo
[tooltip=http://virgendelpozo.org/2011/08/27/san-agustin/ , Debe registrarse para ver este enlace. Gracias por su visita.]San Agustin[/tooltip]
[tooltip=http://google.com , Debe registrarse para ver este enlace. Gracias por su visita.]Carta de necromancia[/tooltip]
Ahí no veo enlace a ninguna imagen... Por tanto, no va a mostrarte sino el texto que pusiste donde tiene que ir la URL hacia la imagen..
Además, en el enlace a la imagen, pones puntos (.), que suponen otro error.
Re: ¿Cómo puedo hacer algo así?
Publicado: 05 Sep 2011, 13:56
por zyxer
Gracias por su interés a Ambos. El problema ya está resuelto, pero me gustaría ver si se puede hacer algo más.
karbiko: Sí, estaba linkinado una imagen, es solo que como puedes leer ahí, para ver algunos links de mi pagina es necesario estar registrado, gracias de todos modos.
memoadian: Parece que justo ese era el problema. Ya me funciona.
AHORA BIEN: me gustaria ver si se puede hacer algo más.
Cuando estás escribiendo y utilizas el BBcode a mitad de una línea, este aparece al principio de la línea y no donde lo coloques. Les doy un ejemplo aquí mismo sustituyendo el BBcode por letra en negrita ya que este MOD no está instalado aquí.
Si yo escribiera:
Código: Seleccionar todo
Supongamos que estoy hablando de [tooltip= http://virgendelpozo.org/2011/08/27/san-agustin/ , http://www.disfrutalogratis.com/images/2808.jpg]San Agustin[/tooltip], me gustaria que apareciera en donde lo he escrito su nombre.
Debería aparecer Algo así:
Supongamos que estoy hablando de San Agustin, me gustaria que apareciera en donde lo he escrito su nombre.
Si embaro lo que aparece es esto:
San AgustinSupongamos que estoy hablando de , me gustaria que apareciera en donde lo he escrito su nombre.
No sé si se entienda mi ejemplo, cualquier cosa me avisas. También me avisas para decirme si se puede o no se puede.
Re: ¿Cómo puedo hacer algo así?
Publicado: 05 Sep 2011, 14:55
por memoadian
En el remplazo html solo debes quitar el float left
así
Código: Seleccionar todo
<a href="{URL}" class="tip_trigger" style="margin: 5px 20px 20px 0; padding: 10px; border: 1px dashed #ddd;">{TEXT}<span class="tip"><img src="{URL2}" width="150" alt="" /></span>
</a>
y bueno, tu lo haz modificado, asi que solo busca esa parte y quitala.
Re: ¿Cómo puedo hacer algo así?
Publicado: 05 Sep 2011, 15:26
por zyxer
Sencillamente: Muchas Gracias!
