elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Usando Git para manipular el directorio de trabajo, el índice y commits (segunda parte)


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  Visualizar texto/imagen sin salir de la pagina
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Visualizar texto/imagen sin salir de la pagina  (Leído 3,365 veces)
andres0993

Desconectado Desconectado

Mensajes: 5



Ver Perfil
Visualizar texto/imagen sin salir de la pagina
« en: 24 Noviembre 2011, 17:23 pm »

Buenas, tengo una página web de música y lo que quiero hacer es poner letras a la música, ósea que haya un icono al lado de la música y que al darle clic al icono se visualice la letra de la canción sin salir de la página, lo mejor sería que el contenido se descargara de otra página o algo por el estilo ya que no quiero añadir muchos archivos a la página para que no se demore en abrir y no aburra a los usuarios. Gracias por su atención.


En línea

dario silva

Desconectado Desconectado

Mensajes: 29



Ver Perfil
Re: Visualizar texto/imagen sin salir de la pagina
« Respuesta #1 en: 24 Noviembre 2011, 18:39 pm »

Puedes poner un atributo html de información al icono de la música y ahí la letra


En línea

Informático, especialista en PKI
EFEX


Desconectado Desconectado

Mensajes: 1.171


"Dinero Facil"


Ver Perfil WWW
Re: Visualizar texto/imagen sin salir de la pagina
« Respuesta #2 en: 24 Noviembre 2011, 18:53 pm »

Sobre el icono se puede hacer con jquery.

funciòn .toggle():
http://api.jquery.com/toggle/

Con lo demas tendras que tomar los valores con jquery(el nombre del artista y la canciòn), pero desconozco un servicio para lyrics como para que te de como resultado el lyrics de la cancion.
En línea

EFEX


Desconectado Desconectado

Mensajes: 1.171


"Dinero Facil"


Ver Perfil WWW
Re: Visualizar texto/imagen sin salir de la pagina
« Respuesta #3 en: 24 Noviembre 2011, 19:52 pm »

Aca encontrè uno, el mas rapido que encontre en algunas busquedas, bastante bien para lo que se necesita www.chartlyrics.com/api.aspx.
El uso es simple, definimos lo que vamos a buscar(este es para que nos devuelva ademas del artista y la cancion, tambien el cover y los lyrics  ;D)
Citar
Y la respuesta... en XML
Código
  1. <GetLyricResult>
  2. <TrackId>0</TrackId>
  3. <LyricChecksum>a9837bc354ad5a755ef5c98fde69f86a</LyricChecksum>
  4. <LyricId>9701</LyricId>
  5. <LyricSong>Refuse/Resist</LyricSong>
  6. <LyricArtist>Sepultura</LyricArtist>
  7. <LyricUrl>http://www.chartlyrics.com/OciTHecidk-thNJwOe_ASA/Refuse%2fResist.aspx</LyricUrl>
  8. <LyricCovertArtUrl>http://ec1.images-amazon.com/images/P/B000000H4V.01.MZZZZZZZ.jpg</LyricCovertArtUrl>
  9. <LyricRank>9</LyricRank>
  10. <LyricCorrectUrl>http://www.chartlyrics.com/app/correct.aspx?lid=OQA3ADAAMQA=</LyricCorrectUrl>
  11. <Lyric>Chaos AD
  12. Tanks on the streets
  13. Confronting Police
  14. Bleeding the Plebs
  15. Raging crowd
  16. Burning cars
  17. Bloodshed starts
  18. Who'll be alive?!
  19.  
  20. Chaos AD
  21. Army in siege
  22. Total alarm
  23. I'm sick of this
  24. Inside the state
  25. War is created
  26. No Man's land
  27. What is this shit?!
  28.  
  29. Refuse/Resist
  30. Refuse
  31.  
  32. Chaos AD
  33. Disorder Unleashed
  34. Starting to burn
  35. Starting to lynch
  36. Silence means death
  37. Stand on your feet
  38. Inner fear
  39. Your worst enemy
  40.  
  41. Refuse/Resist
  42. Refuse/Resist</Lyric>
  43. </GetLyricResult>
  44.  

Y solo resta leer los datos XML con JQuery  ;D
En línea

andres0993

Desconectado Desconectado

Mensajes: 5



Ver Perfil
Re: Visualizar texto/imagen sin salir de la pagina
« Respuesta #4 en: 24 Noviembre 2011, 20:09 pm »

Bueno la verdad no eh utilizado JQuery y no se que es lo que realmente haria este programa. Me lo podrias explicar mejor? Abre una nueva ventana? Oculta datos para mostrarlos luego?. Y donde copio el codigo o como le hago?
En línea

EFEX


Desconectado Desconectado

Mensajes: 1.171


"Dinero Facil"


Ver Perfil WWW
Re: Visualizar texto/imagen sin salir de la pagina
« Respuesta #5 en: 25 Noviembre 2011, 18:28 pm »

Hola andres, JQuery es una libreria javascript y tiene un buen propòsito... tenes funciones para el teclado, mouse, modificar html, css, etc muchas mas. Si queres verlo mas a fondo te recomiendo este sitio para que te vallas asimilando con esta libreria.

La librería jQuery
http://www.librosweb.es/ajax/capitulo10/la_libreria_jquery.html

Vamos al codigo, armè 2 archivos, el index.html y get.php.

index.htm
Código
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script src="http://code.jquery.com/jquery-latest.js"></script>
  5. <style type="text/css">
  6. .lyrics {
  7. /*  Este es el recuadro que se mostrara por pantalla, solo le agrege
  8. cosas como ancho, color, donde posicionarlo en el browser. */
  9. background-color: #FFFFD8;
  10. width:480px;
  11. padding:10px;
  12. /*  Ocultamos el recuadro por ahora, no hace falta mostrarlo */
  13. display:none;
  14. position:relative;
  15. top:-50px;
  16. right:-160px;
  17. /*  Para que no se colapse los espacios en blanco y salto de linea */
  18. white-space: pre;
  19. }
  20. .lyrics img{
  21. /*  Posiciono la imagen(cover del disco) a la derecha del recuadro */
  22. float:right;
  23. }
  24. </style>
  25. <script type="text/javascript">
  26. $(document).ready(function(){
  27. /*  Al ahcer click sobre #mostrarlyrics hacer lo siguiente */
  28. $('#mostrarlyrics').click(function() {
  29. /*  Tomo el texto que haya en div.artista y div.cancion */
  30. var artista = $(".artista").text();
  31. var cancion = $(".cancion").text();
  32. /*  Procesas los datos obtenidos con el archivo .php */
  33. $.ajax({
  34. type: "GET",
  35. url: "get.php?artista="+artista+"&cancion="+cancion,
  36. dataType: "html",
  37. success: function(xml) {
  38. /*  Una ves que obtenemos el resultado del sitio buscamos
  39. lo que nos interesa, <LyricCovertArtUrl> y <Lyric> dentro
  40. del resultado xml.
  41. Este seria el resultado:
  42. (http://api.chartlyrics.com/apiv1.asmx/SearchLyricDirect?artist=sepultura&song=roots%20bloody%20roots)
  43. */
  44. var lyric = $(xml).find('Lyric').text();
  45. var tapadisco = $(xml).find('LyricCovertArtUrl').text();
  46. /*  Reemplazamos lo que haya en div.lyrics por el cover y
  47. el lyric de la cancion */
  48. $('.lyrics').html( "<img src="+tapadisco+"/>"+lyric );
  49. }
  50. });
  51.  
  52. $('.lyrics').toggle('fast');
  53. });
  54. });
  55. </script>
  56. </head>
  57. <body>
  58. <div class="artista">sepultura</div>
  59. <div class="cancion">roots bloody roots</div>
  60. <a href="#" id="mostrarlyrics">Click aqui</a> para ver los lyrics de la cancion.
  61. <div class="lyrics"><img src="http://www.costacruceros.es/B2C/Images/Skin/Default/gfx/ico_waiting.gif"/></div>
  62. </body>
  63. </html>
  64.  

get.php
Código
  1. <?php
  2. /*  Obtenemos $artista y $cancion enviados mediante jquery */
  3. $artista = urlencode($_GET['artista']);
  4. $cancion = urlencode($_GET['cancion']);
  5. /*  Enviamos la peticion al sitio api.chartlyrics.com y este
  6. nos responde con formato xml */
  7. $url = "http://api.chartlyrics.com/apiv1.asmx/SearchLyricDirect?artist=$artista&song=$cancion";
  8. $str = file_get_contents($url);
  9. echo $str;
  10.  
  11. ?>
  12.  

El resultado  ;D
« Última modificación: 26 Noviembre 2011, 16:19 pm por EFEX » En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines