Enlazar Còdigo (ayuda)

ricardoernes · #1 (**permalink**) 15/07/2010, 10:32

hola a todos, necesito de su ayuda por favor, quiero saber còmo enlazar el codigo de la siguiente pàgina:

http://www.ezjquery.com/cgi-bin/webapp.rb?r=access#

necesito ese slider (DEMO 3).... por favor ayudenme

... què pasos debo seguir?... gracias !!!!

GatorV · #2 (**permalink**) 15/07/2010, 10:47

Tema movido desde PHP a Frameworks y Plugins Javascript

mayid · #3 (**permalink**) 16/07/2010, 08:55

En ese enlace hay demasiados elementos como para saber que es el "demo3". Fijate de seguir el link que siempre hay tutoriales de implementación para cada plugin.

Trabajaste alguna vez con la librería jquery? Es fundamental para nosotros saber eso. Así vemos que explicarte y que dar por sentado :o)

ricardoernes · #4 (**permalink**) 19/07/2010, 07:01

Cita:

Iniciado por mayid

En ese enlace hay demasiados elementos como para saber que es el "demo3". Fijate de seguir el link que siempre hay tutoriales de implementación para cada plugin.

Trabajaste alguna vez con la librería jquery? Es fundamental para nosotros saber eso. Así vemos que explicarte y que dar por sentado :o)

no, nunca he trabajado con esa libreria

mayid · #5 (**permalink**) 19/07/2010, 08:13

Ok. No me queda claro si lo que queres implementar se llama Easy News Plus 1.0.4 . Es fundamental que aclares el nombre del plugin cuando publicas.

Por lo general los plugins requieren:
- que incluyas la libreria que los hace funcional (jquery es este caso)(este paso es siempre cierto)
- que incluyas el archivo CSS y el .js en la cabecera también.
- que adecues una sección de tu html para ponerlo a funcionar
- que "inicialices" el plugin

En el tutorial de esta gente ponen varios pasos:
- paso 1: adecuar el html
- paso 2: (te lo hacen facil) incluir las librerias y algo de codigo para inicializar el plugin.
- usage (paso 3): te ponen codigo CSS que va a darle aspecto al plugin.

Se trata de ajustar el tutorial a tu caso particular. Acordate sobre todo de tener una carpeta con la libreria jquery y linkearla correctamente. En esa misma carpeta necesitas el/los archivos del plugin.

ricardoernes · #6 (**permalink**) 19/07/2010, 13:07

Disculpa por no expresarlo bien y pues quiero implementar EasySlide 1.0 - Demo3(Slide Style)

hice lo siguiente:

agregue el archivo CCS.css lo cual contiene:

Código HTML:

$.init_slide(firstname,secondname,watermark,iscover,speed,autoplay,playtime,clickable,mytarget);

    
.showbg{// for fadeout effect *This is optional
background-color: black;
}

.link_nor{// for clickable normal link
background-color: #333333;
font: normal 76% "Arial", "Lucida Grande",Verdana, Sans-Serif;
border: 2px solid #808000;
padding:0px 4px 0px 4px;
text-align:center;
color:white
}


.link_act
{// for clickable active link
background-color:#808000;
font: normal 76% "Arial", "Lucida Grande",Verdana, Sans-Serif;
border: 2px solid #808000;
padding:0px 4px 0px 4px;
text-align:center;
color:white
}

span{// for watermark
font: normal 76% "Arial", "Lucida Grande",Verdana, Sans-Serif;
color:black
}

.gray
{// for cover
background-color: gray;
position: absolute;
border: 0px solid #9F6D11;
z-index: 100;
}

img{// for image border
border: 0px solid #663300;
background-color: #663300
}

.opa{// for watermark opacity
color:white;
padding:10px 20px 0px 20px;
position: absolute;
z-index: 101;
background-color: #FFA928;
opacity:0.5;
filter: alpha(opacity=50);
filter:progid:DXImageTransform.Microsoft.Alpha
(Opacity=100,FinishOpacity=50, Style=3, StartX=0, FinishX=100, StartY=0,FinishY=16);
-moz-opacity: 0.5;
}

luego agrego el archivo de la libreria jquery y el html donde lo cargo es asi :

Código HTML:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
<link href="CCS.css" rel="stylesheet" type="text/css" />
</head>

<body>


<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

/*comentado */ èsta es la linea que me falta completar, ya que nose que contenido llevar ese .js o como lo haria:
/*comentado */<script type="text/javascript"  src="jquery.myslide.js"></script>



<script>
$(document).ready(function(){
$.init_slide('imgstore','showhere',1,1,1000,1,5000,1,'_self');
});
</script>


Prueba

<div id=imgstore style="display:none">
<img src="1.jpeg" title="Howe Bay"><img src="2.jpeg" width="129" height="89" title="Orange Morning"><img src="3.jpeg" width="96" height="104" title="Red Leaves"><img src="4.jpeg" title="waterscape"><img src="5.jpeg" title="Clashing Fronts"><img src="6.jpeg" title="Autumn Mist"  width="77" height="89"><img src="7.jpg" width="100" height="120" title="Desert dry 1"><img src="8.jpeg" title="Ferns 2">
 </div>

<div id=showhere></div>


<a href="http://www.ezjquery.com/cgi-bin/webapp.rb?r=access#">link fuente</a>

</body>
</html>

pero igual no me funciona, al parecerer como que me falta algo, un .js pero nose que debe llevar o que, no comprendo muy bien como formar en archivo que en tal caso me faltaria, còmo podre hacer?... de antemano muchas gracias y disculpa la molestia

mayid · #7 (**permalink**) 19/07/2010, 15:15

Bueno, para empezar, las librerias tienen que cargarse en la seccion header. No en la seccion <body>.

Luego, esto en el CSS sobra:

Cita:

$.init_slide(firstname,secondname,watermark,iscove r,speed,autoplay,playtime,clickable,mytarget);

Luego, en el html no podes dejar de poner comillas:

Cita:

id=showhere

Eso debe ir así: id="showhere"

Todos los atributos html tienen que ir encerrados entre comillas.

Cita:

*comentado */ èsta es la linea que me falta completar, ya que nose que contenido llevar ese .js o como lo haria:

Según el ejemplo, con solo incluir una version de jquery (la 1.2.3, medio viejita, en este caso) mas el plugin en sí alcanza.

Segun veo, vos estás incluyendo así tus archivos, lo cual implica que están en la misma carpeta que tu archivo html:

Cita:

Eso no está mal, pero para acostumbrarte a una mejor organización está bueno crear un directorio llamado "library" o "lib" o "libreria" y poner los archivos .js ahí. Mismo los .css, con lo cual los link relativos quedarías así:

Cita:

(te recomiendo que el archivo css se llame style.css o estilo.css)

En cuanto a inicializar el codigo, esto es lo que tenés:

Cita:

Los dos primeros parametros tienen que ser iguales a los atributos id en tu html. Cualesquiera sean, o sea que vos podes cambiarlos y personalizarlos.

El codigo tiene que ir en el head y no en el body. Empezando así:

<script type="text/javascript">

Es decir, definiendo un type.

Con esto debería funcionar.

ricardoernes · #8 (**permalink**) 20/07/2010, 08:44

... Mayid muchas gracias por estarme ayudando, estoy siguiendo al pie de la letra tus aportes, mi codigo ha quedado asi:

style.ccs

Código HTML:

.showbg{// for fadeout effect *This is optional
background-color: black;
}

.link_nor{// for clickable normal link
background-color: #333333;
font: normal 76% "Arial", "Lucida Grande",Verdana, Sans-Serif;
border: 2px solid #808000;
padding:0px 4px 0px 4px;
text-align:center;
color:white
}


.link_act
{// for clickable active link
background-color:#808000;
font: normal 76% "Arial", "Lucida Grande",Verdana, Sans-Serif;
border: 2px solid #808000;
padding:0px 4px 0px 4px;
text-align:center;
color:white
}

span{// for watermark
font: normal 76% "Arial", "Lucida Grande",Verdana, Sans-Serif;
color:black
}

.gray
{// for cover
background-color: gray;
position: absolute;
border: 0px solid #9F6D11;
z-index: 100;
}

img{// for image border
border: 0px solid #663300;
background-color: #663300
}

.opa{// for watermark opacity
color:white;
padding:10px 20px 0px 20px;
position: absolute;
z-index: 101;
background-color: #FFA928;
opacity:0.5;
filter: alpha(opacity=50);
filter:progid:DXImageTransform.Microsoft.Alpha
(Opacity=100,FinishOpacity=50, Style=3, StartX=0, FinishX=100, StartY=0,FinishY=16);
-moz-opacity: 0.5;
}

y el html asi:

Código HTML:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
<link href="libreria/style.css" rel="stylesheet" type="text/css" />



<script type="text/javascript" src="libreria/jquery-1.3.2.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$.init_slide('imgstore','showhere',1,1,1000,1,5000,1,'_self');
});
</script>

</head>

<body>
Prueba

 <div id="imgstore" style="display:none">
<img src="imagen/1.jpeg" width="127" height="85" title="Howe Bay"><img src="imagen/2.jpeg" width="129" height="89" title="Orange Morning"><img src="imagen/3.jpeg" width="96" height="104" title="Red Leaves"><img src="imagen/4.jpeg" width="119" height="119" title="waterscape"><img src="imagen/5.jpeg" width="116" height="116" title="Clashing Fronts"><img src="imagen/6.jpeg" title="Autumn Mist"  width="77" height="89"><img src="imagen/7.jpg" width="100" height="120" title="Desert dry 1"><img src="imagen/8.jpeg" width="99" height="129" title="Ferns 2">
</div>

<div id="showhere"></div>


<a href="http://www.ezjquery.com/cgi-bin/webapp.rb?r=access#">link fuente</a>

</body>
</html>

ya todo en " ", en sus respectivas carpetas, pero nada que me funciona

mayid · #9 (**permalink**) 20/07/2010, 09:51

Para que te quede claro: jQuery es una librería que hace que javascript sea más facil. Si uno quiere los beneficios de jquery, lo incluye así en su pagina:

Cita:

Luego, hay muchos programadores que escribieron plugins basados en jquery. Si uno los quiere, los tiene que importar. Y ahí es en donde está tu falta. No lo importaste!

Cita:

Así:

Cita:

Lo demás parece bien, no? Buenísimo.

ricardoernes · #10 (**permalink**) 20/07/2010, 12:38

Es ahi donde esta el problema, porque el archivo ese

Código HTML:

<script type="text/javascript" src="libreria/jquery.myslide.js"></script>

no lo tengo en ninguna lado, ese es el archivo del cual te habia comentado de un principio que ni siquiera se que debe incluir cual sera su contenido ni nada al respecto, ese archivo no lo tengo..... he ahi mi preocupacion

mayid · #11 (**permalink**) 20/07/2010, 14:16

Man, si bajas un plugin ese archivo (el principal) tiene que estar. Si no, te fijas en el codigo fuente y lo sacas de ahí:

http://www.ezjquery.com/download/easyslide.zip

(estaba en la barra lateral, donde dice download)

ricardoernes · #12 (**permalink**) 22/07/2010, 07:34

Cita:

Iniciado por mayid

Man, si bajas un plugin ese archivo (el principal) tiene que estar. Si no, te fijas en el codigo fuente y lo sacas de ahí:

http://www.ezjquery.com/download/easyslide.zip

(estaba en la barra lateral, donde dice download)

ups

.... no habia encontrado ese link

... de pana disculpa, y pues ya listo, gracias por toda la ayuda prestada, gracias me sirvio de muuuchisimo, gracias !!!