Como integro plugin Jquery y PHP

jfcdeutsch

unread,

Sep 10, 2009, 2:03:48 PM9/10/09

to JS-Ovillo

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>


<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 http-equiv="content-type" content="text/html; charset=utf-8" />

<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>

Rodrigo Álvarez Virgós

unread,

Sep 11, 2009, 3:04:29 AM9/11/09

to js-o...@googlegroups.com

Hola, jfcdeutsch

¿Tienes un servidor Apache instalado? Porque sino, normal que no te
funcione el código PHP.

Aparte de eso, ¿por qué no metes el código js de Qtip en el head del
documento?

jfcdeutsch escribió:

Félix Horro Pita

unread,

Sep 11, 2009, 3:44:52 AM9/11/09

to js-o...@googlegroups.com

> ¿Tienes un servidor Apache instalado? Porque sino, normal que no te
> funcione el código PHP.

Entiendo que sí lo tiene porque dice que sí le funciona el PHP (con el
nombre de archivo .php, lógicamente).

>
> Aparte de eso, ¿por qué no metes el código js de Qtip en el head del
> documento?

Efectivamente, jfcdeutsch, deberías meter todas las cargas de código en
el head.

Pero además de eso, tienes que tener cuidado con el orden en que cargas
los diferentes JS, por si alguno ejecuta directamente alguna función que
está definida en un js que aún no está cargado (no sé si me explico).
En este caso concreto de Qtip no sé cuál es el orden apropiado, habría
que mirarlo.

Y de todas formas, qué error da la consola javascript, si es que da
algún error???

jfcde...@gmail.com

unread,

Sep 11, 2009, 10:47:05 AM9/11/09

to js-o...@googlegroups.com

> ¿Tienes un servidor Apache instalado? Porque sino, normal que no te
> funcione el código PHP.

Entiendo que sí lo tiene porque dice que sí le funciona el PHP (con el
nombre de archivo .php, lógicamente).

Si tengo Appserver funcionando bien

>
> Aparte de eso, ¿por qué no metes el código js de Qtip en el head del
> documento?

Efectivamente, jfcdeutsch, deberías meter todas las cargas de código en
el head.

Ya he hecho al prueba poniendo el codigo js en el head y si me ha funcionado, 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).

Pero además de eso, tienes que tener cuidado con el orden en que cargas
los diferentes JS, por si alguno ejecuta directamente alguna función que
está definida en un js que aún no está cargado (no sé si me explico).
En este caso concreto de Qtip no sé cuál es el orden apropiado, habría
que mirarlo.

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).

Y de todas formas, qué error da la consola javascript, si es que da
algún error???

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.

Magrio

unread,

Sep 21, 2009, 3:01:59 PM9/21/09

to JS-Ovillo

Este código que dejas aquí no tiene nada de php!
El que habias enviado a la lista de css de ovillo si tenía un
include.... estás seguro que es este?

Reply all

Reply to author

Forward