Como integro Plugin de Jquery en Pagina PHP ?

50 views
Skip to first unread message

jfcdeutsch

unread,
Sep 10, 2009, 2:12:31 PM9/10/09
to Ajax-es
Buen día a todos.

Tengo una pagina hecha con PHP, el problema es que quiero integrar un
plugin de Jquery llamado Qtip y no ejecuta nada de comandos de Qtip.
Si quito el codigo PHP la pagina corre de maravilla, pero cuando
integro las etiquetas <?php ?> no corre nada de Qtip. mi pagina
esta guardada con extensión PHP, aqui les dejo el codigo.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>qTip - The jQuery tooltip plugin - Demos - Dynamic YouTube
preview</title>
<!--Stylesheets-->

<link type="text/css" rel="stylesheet" href="../../jquery-qtip-1.0.0-
rc3142732/master.css" />
<link type="text/css" rel="stylesheet" href="../../jquery-qtip-1.0.0-
rc3142732/qtip.css" />
<link type="text/css" rel="stylesheet" href="../../jquery-qtip-1.0.0-
rc3142732/demo.css" />
<link type="text/css" rel="stylesheet" href="../../jquery-qtip-1.0.0-
rc3142732/highlight.css" />
<!--Meta-->
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<!--Header JavaScript-->
<script type="text/javascript" src="../../jquery/jquery.js"></script>
</head>
<body>
<div id="master">
<div id="navarrow" class="center"><div class="demos"></div></div>
<div id="content" style="position:absolute; left: 6px; top: 311px;" >
<div class="center" style="height:300px">
<h3>Click on any of the links below to get a quick preview of the
youtube video it links to!</h3>
<p class="cloud">
<p class="cloud">
<p class="cloud"><a class="cloud2" href="http://www.youtube.com/
watch?v=AKdIkFzUyIk" alt="">Male Black woodpecker</a>
<a class="cloud5" href="http://www.youtube.com/watch?
v=Q1FYe263AlE" alt="">Tawny Owls - BBC</a>
<a class="cloud3" href="http://www.youtube.com/watch?
v=zWHDoP5uwh8" alt="">Q-Tip - "ManWomanBoogie"</a> </div>
</div>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/swfobject/2.1/swfobject.js"></script>
<script class="example" type="text/javascript">
$(document).ready(function()
{
// Use each method to gain access to all youtube links
$('a[href*="youtube."]').each(function()
{
// Grab video ID from the url
var videoID = $(this).attr('href').match(/watch\?v=(.+)+/);
videoID = videoID[1];

// Create content using url as base
$(this).qtip(
{
// Create content DIV with unique ID for swfObject
replacement
content: '<div id="youtube-embed-'+videoID+'">You need Flash
player 8+ to view this video.</div>',
position: {
corner: {
tooltip: 'bottomMiddle', // ...and position it center
of the screen
target: 'topMiddle' // ...and position it center of the
screen
}
},
show: {
when: 'click', // Show it on click...
solo: true // ...and hide all others when its shown
},
hide: 'unfocus', // Hide it when inactive...
style: {
width: 432,
height: 264,
padding: 0,
tip: true,
name: 'dark'
},
api: {
onRender: function()
{
// Setup video paramters
var params = { allowScriptAccess: 'always',
allowfullScreen: 'false' };
var attrs = { id: 'youtube-video-'+videoID };

// Embed the youtube video using SWFObject script
swfobject.embedSWF('http://www.youtube.com/v/'+videoID
+'&enablejsapi=1&playerapiid=youtube-api-'+videoID,
'youtube-embed-'+videoID, '425',
'264', '8', null, null, params, attrs);
},

onHide: function(){
// Pause the vide when hidden
var playerAPI = this.elements.content.find('#youtube-
video-'+videoID).get(0);
if(playerAPI && playerAPI.pauseVideo)
playerAPI.pauseVideo();
}
}
}
).attr('href', '#');
});
});
</script>
<script type="text/javascript" src="../../jquery-qtip-1.0.0-
rc3142732/jquery.qtip-1.0.0-rc3.js"></script>
<script type="text/javascript" src="../../jquery-qtip-1.0.0-rc3142732/
highlight.js"></script>
<script type="text/javascript" src="../../jquery-qtip-1.0.0-rc3142732/
javascript.js"></script>
<script type="text/javascript" src="../../jquery-qtip-1.0.0-rc3142732/
demo.js"></script>

</body>
</html>

Alejandro Rigalt

unread,
Sep 10, 2009, 4:27:57 PM9/10/09
to aja...@googlegroups.com
El tratamiento que le debes dar a tu Plug-in debe ser el mismo que le
das a cualquier código JavaScript.

Saludos.


El día 10 de septiembre de 2009 12:12, jfcdeutsch
<jfcde...@gmail.com> escribió:
--
Saludos,
Alejandro Rigalt
Tel.: +502 2289.1074
Cel.: +502 5403.6383
E-mail: ari...@sistemas.com.gt

Calabaza

unread,
Sep 10, 2009, 4:46:01 PM9/10/09
to aja...@googlegroups.com
El día 10 de septiembre de 2009 15:12, jfcdeutsch
<jfcde...@gmail.com> escribió:
>
> Buen día a todos.

> Tengo una pagina hecha con PHP, el problema es que quiero integrar un
> plugin de Jquery llamado Qtip y no ejecuta nada de comandos de Qtip.

> Si quito el codigo PHP la pagina corre de maravilla, pero cuando
> integro las etiquetas <?php ?>  no corre nada de Qtip.
> mi pagina esta guardada con extensión PHP,

ummm imagino que lo estas probando desde tu server http verdad???

las paginas .php se ejecutan en el servidor
y el resultado es enviado al cliente en donde se ejecuta el codigo
html y javascript

> aqui les dejo el codigo.

El código que dejaste no tiene ninguna etiqueta php...

Un abrazo,
--
§~^Calabaza^~§ from Villa Elisa, Paraguay
http://calablogbaza.blogspot.com/

http://es.wikipedia.org/wiki/Top-posting
http://es.wikipedia.org/wiki/Netiquette
----------------
A hendu hína: Serge Prokofiev - Symphony No.7 Op.131 - Allegretto
http://foxytunes.com/artist/serge+prokofiev+-+symphony+no.7+op.131/track/allegretto

jfcde...@gmail.com

unread,
Sep 10, 2009, 5:30:55 PM9/10/09
to Ajax-es
es verdad, no inclui el codigo PHP, aqui envio el codigo otra vez, pero sigo sin poder ejecutar los comandos de Jquery. Help me¡





<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>qTip - The jQuery tooltip plugin - Demos - Dynamic YouTube preview</title>
<!--Stylesheets-->

<link type="text/css" rel="stylesheet"  href="../../jquery-qtip-1.0.0-rc3142732/master.css"  />
<link type="text/css" rel="stylesheet" href="../../jquery-qtip-1.0.0-rc3142732/qtip.css"  />
<link type="text/css" rel="stylesheet" href="../../jquery-qtip-1.0.0-rc3142732/demo.css"  />
<link type="text/css" rel="stylesheet" href="../../jquery-qtip-1.0.0-rc3142732/highlight.css"  />

<!--Meta-->
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<!--Header JavaScript-->
<script type="text/javascript"  src="../../jquery/jquery.js"></script>
</head>
<body>
<div id="master">
<div id="navarrow" class="center"><div class="demos"></div></div>


<div class="comentarios">
  <?php
        include '../../talkback/comments.php';
       
    ?>
</div>

<div id="content" style="position:fixed; left: 6px;" >

  <div class="center" style="height:300px">
    <h3>Click on any of the links below to get a quick preview of the youtube video it links to!</h3>
    <p class="cloud">
    <p class="cloud">       
    <p class="cloud"><a class="cloud2" href="http://www.youtube.com/watch?v=AKdIkFzUyIk" alt="">Male Black woodpecker</a>
      <a class="cloud5" href="http://www.youtube.com/watch?v=Q1FYe263AlE" alt="">Tawny Owls - BBC</a>
      <a class="cloud3" href="http://www.youtube.com/watch?v=zWHDoP5uwh8" alt="">Q-Tip - "ManWomanBoogie"</a>          </div>
</div>




<script type="text/javascript"    src="../../jquery-qtip-1.0.0-rc3142732/jquery.qtip-1.0.0-rc3.js"></script>
<script type="text/javascript" src="../../jquery-qtip-1.0.0-rc3142732/highlight.js"></script>
<script type="text/javascript" src="../../jquery-qtip-1.0.0-rc3142732/javascript.js"></script>
<script type="text/javascript" src="../../jquery-qtip-1.0.0-rc3142732/demo.js"></script>
</body>
</html>
--
Un saludo cordial.

Juan Carlos Flores Montesinos
Cel. 55 3742 2804

Calabaza

unread,
Sep 10, 2009, 5:46:30 PM9/10/09
to aja...@googlegroups.com
El día 10 de septiembre de 2009 18:30, <jfcde...@gmail.com> escribió:
> es verdad, no inclui el codigo PHP, aqui envio el codigo otra vez, pero sigo
> sin poder ejecutar los comandos de Jquery. Help me¡

Por favor no hagas top posting,
además, si no contestas todas las preguntas que te hice,
¿cómo quieres que te ayude?

¿Podrías darnos más información (Servidor http, browser)?

Dinos, cómo haces para probar tu página php?

Un abrazo,
--
§~^Calabaza^~§ from Villa Elisa, Paraguay
http://calablogbaza.blogspot.com/

A hendu hína: Serge Prokofiev - Symphony No.2 Op.40 - Theme et variations
http://foxytunes.com/artist/serge+prokofiev+-+symphony+no.2+op.40/track/theme+et+variations

Camello Ar

unread,
Sep 10, 2009, 6:30:19 PM9/10/09
to aja...@googlegroups.com
Deberías postear el contenido del comments.php, para ver que no afecte
ningún tipo de configuración del archivo base

jfcde...@gmail.com

unread,
Sep 10, 2009, 7:27:58 PM9/10/09
to aja...@googlegroups.com
Por favor no hagas top posting,
además, si no contestas todas las preguntas que te hice,
¿cómo quieres que te ayude?
Gracias por la respuesta, quisiera me ayudaran a decirme como hago para que mi pagina carge el codigo javascript y php, ya que no lo hace. 

¿Podrías darnos más información (Servidor http, browser)?
Uso Appserver, el cual ya trae Apache 2.2.8, Mysql 5.0.51b, PHP 5.2.6 y PHPmyAdmin 2.10.3. , hago mis pruebas en IE7 y Firefox 3.5.2.
Ya he hecho algunas paginas donde utilizo librerias de jquery y codigo de PHP, pero en esta pagina en especifico no me funciona tener ambas cosas.


Dinos, cómo haces para probar tu página php?
Para probar mi pagina en la siguiente direccion de mi pc, localhost/pruebas/nombredelapagina.php

He hecho pruebas quitando el codigo PHP y cuando la pruebo funciona bien, tambien he puesto la extensión html a mis archivos en lugar de .php, pero despues el problema es que necesito meter codigo PHP.

Aqui les dejo mi el link       de donde me baje el codigo y las librerias. Siento que tiene que ver con la forma de llamar el codigo script, ya he leido en algunas paginas donde dice que agrege ?> y <?php antes y despues de las etiquetas <script></script>, ejemplo:    ?> <script>    </script>  <?php, pero ya hice pruebas y sigue sin funcionar. Ojala puedan ayudarme con otra solucion.


jfcde...@gmail.com

unread,
Sep 11, 2009, 12:41:18 PM9/11/09
to aja...@googlegroups.com

Deberías postear el contenido del comments.php, para ver que no afecte
ningún tipo de configuración del archivo base
 
Gracias por la respuesta, ayer hice otras pruebas y les comento que:
Ya he hecho al prueba poniendo el codigo js en el head y si me ha funcionado con mi codigo de comments.php, solo que a medida de que voy metiendo muchas mas aplicaciones de PHP, ya no funciona, voy a ir depurando poco a poco. Pero tambien se me ocurre que puedo quitar el codigo js y meterlo en un archivo js y despues mandarlo llamar, también ya lo hice pero cuando pongo el codigo en el archivo js, me marca un error de sintaxis (este error no aparece nunca cuando ejecuto el codigo en el archivo PHP, solo cuando lo meto en un js).


Creo que si tiene mucho que ver el orden, Qtip me indica que ponga justo antes de terminar el body las librerias js propias de Qtip, y en el head me dice que ponga la libreria de jquery. Ya lo hice asi, y como menciono arriba he puesto además todo el codigo js dentro del head, ya me funciono con PHP integrando mi aplicacion de comments, pero ahora surge otro problemas como tambien lo menciono, que a medida que ingreso mas codigo PHP se vuelve infuncional. Espero alguien sepa si es conveniente y como poner el codigo en un js y mandarlo llamar(ya lo he intentado pero me marca error de sintaxis al guardarlo en un js).


El unico error que me manda es cuando pongo el codigo JS en un archivo con extension js, y dice error de Sintaxis, pero este error no me aparece cuando ejecuto el codigo js en mi pagina PHP. Aqui les dejo de nueva cuenta el todo el codigo ya con el codigo js en el head, el cual como mencione, cuando lo pongo en un archvo js me marca error de sintaxis, y a este codigo si le pongo mas aplicaciones PHP y ya no funciona, los archivos ya los he subido al servidor, aqui se los dejo:      Asi es como se ve con los cambios www.ompemexico.org.mx/iglesia/pruebasjquery/demovideo.php   este es el codigo         y este es el codigo de los comentarios  gracias por su apoyo.

Calabaza

unread,
Sep 14, 2009, 7:59:36 PM9/14/09
to aja...@googlegroups.com
El día 11 de septiembre de 2009 13:41, <jfcde...@gmail.com> escribió:


>>> Deberías postear el contenido del comments.php, para ver que no afecte
>>> ningún tipo de configuración del archivo base


>> Gracias por la respuesta, ayer hice otras pruebas y les comento que:
>> Ya he hecho al prueba poniendo el codigo js en el head y si me ha
>> funcionado con mi codigo de comments.php, solo que a medida de que voy
>> metiendo muchas mas aplicaciones de PHP, ya no funciona, voy a ir depurando
>> poco a poco.

>> Pero tambien se me ocurre que puedo quitar el codigo js y
>> meterlo en un archivo js y despues mandarlo llamar, también ya lo hice pero
>> cuando pongo el codigo en el archivo js, me marca un error de sintaxis (este
>> error no aparece nunca cuando ejecuto el codigo en el archivo PHP, solo
>> cuando lo meto en un js).

Imagino que se debe a que utiliza funciones definidas en las otras librerias .js
que no estan en el alcance de este fichero .js

(si es que te refieres al código javascript)

>> Creo que si tiene mucho que ver el orden,

Claro!!! porque no podrás usar una función js que no fue definida anteriormente!

>> Qtip me indica que ponga justo
>> antes de terminar el body las librerias js propias de Qtip, y en el head me
>> dice que ponga la libreria de jquery. Ya lo hice asi, y como menciono arriba
>> he puesto además todo el codigo js dentro del head, ya me funciono con PHP
>> integrando mi aplicacion de comments, pero ahora surge otro problemas como
>> tambien lo menciono, que a medida que ingreso mas codigo PHP se vuelve
>> infuncional.

Podrías probar a poner las librerias del Qtip también dentro del tag de head.

>> Espero alguien sepa si es conveniente y como poner el codigo en
>> un js y mandarlo llamar(ya lo he intentado pero me marca error de sintaxis
>> al guardarlo en un js).

Sí es conveniente poner tu código javascript en un fichero .js,
ahora algunas veces se vuelve complicado como es este caso, aunque
creo que algún compañero de la lista puede aportar algo más...

>> El unico error que me manda es cuando pongo el codigo JS en un archivo con
>> extension js, y dice error de Sintaxis, pero este error no me aparece cuando
>> ejecuto el codigo js en mi pagina PHP.

>> Aqui les dejo de nueva cuenta el todo
>> el codigo ya con el codigo js en el head, el cual como mencione, cuando lo
>> pongo en un archvo js me marca error de sintaxis, y a este codigo si le
>> pongo mas aplicaciones PHP y ya no funciona, los archivos ya los he subido
>> al servidor, aqui se los dejo:

>> Asi es como se ve con los cambios
>> www.ompemexico.org.mx/iglesia/pruebasjquery/demovideo.php

Segun lo que a mí me sale al ver tu código creo que no le estas pasando
algun parámetro a tu fichero .php,

> este es el codigo y este es el codigo de los comentarios  gracias por su apoyo.

Sabes, creo que hay algún error con la estructura de ficheros de tus paginas:

tu pones "../../jquery-qtip-1.0.0-rc3142732/javascript.js"

y dices en el otro correo que lo ejecutas desde:

http://localhost/pruebas/nombredelapagina.php

o sea que tus librerías están en:
http://localhost/jquery-qtip-1.0.0-rc3142732/javascript.js

Si esto es cierto puede que estéan muy lejos tus librerías de tu site,
mejor que crees un directorio para tu aplicación y dentro pongas tus
librerías js.

Y por favor, no utilices HTML en el correo, gracias :)

Un abrazo,
--
§~^Calabaza^~§ from Villa Elisa, Paraguay
http://calablogbaza.blogspot.com/

A hendu hína: Abbado - Schubert - Sinfonía N° 1
http://foxytunes.com/artist/abbado/track/schubert+-+sinfon%c3%ada+n%c2%b0+1

Reply all
Reply to author
Forward
0 new messages