tag:blogger.com,1999:blog-34156102250258315742024-03-12T16:39:53.696-07:00ArcanitaTips HTML, PHP, Jquery, Ajax, CSS.Unknownnoreply@blogger.comBlogger11125tag:blogger.com,1999:blog-3415610225025831574.post-74028761452740161542019-08-08T13:29:00.000-07:002019-08-08T13:30:15.358-07:00Banner con efecto de imagen fija<div style="background-attachment: fixed; background-image: url("https://arcanita.cl/blog/images/banner_movil.jpg"); background-repeat: no-repeat; background-size: cover; height: 300px; width: 100%;">
<h3 style="background: rgba(0,0,0,.3); height: 100%;">
</h3>
</div>
<div style="height: 100px; margin-top: 50px;">
<h4>
Desliza hacia abajo para ver el efecto en el banner</h4>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
</div>
Aquí está el código para hacer este maravilloso efecto
<br />
<br />
<pre style="background: #000000; color: #d1d1d1;"><span style="color: #ff8906;"><</span><span style="color: #e66170; font-weight: bold;">div</span> style<span style="color: #d2cd86;">=</span><span style="color: #00c4c4;">"</span><span style="color: #904050;">width</span><span style="color: #d2cd86;">:</span> <span style="color: #00a800;">100</span><span style="color: #006600;">%</span><span style="color: #b060b0;">;</span> <span style="color: #904050;">height</span><span style="color: #d2cd86;">:</span> <span style="color: #00a800;">300</span><span style="color: #006600;">px</span><span style="color: #b060b0;">;</span> <span style="color: #904050;">background-image</span><span style="color: #d2cd86;">:</span> <span style="color: #e66170; font-weight: bold;">url</span><span style="color: #d2cd86;">(</span><span style="color: white;">images/banner_movil.jpg</span><span style="color: #d2cd86;">)</span><span style="color: #b060b0;">;</span>
<span style="color: #904050;">background-repeat</span><span style="color: #d2cd86;">:</span> no-repeat<span style="color: #b060b0;">;</span><span style="color: #904050;">background-size</span><span style="color: #d2cd86;">:</span> cover<span style="color: #b060b0;">;</span> <span style="color: #904050;">background-attachment</span><span style="color: #d2cd86;">:</span> fixed<span style="color: #b060b0;">;</span><span style="color: #00c4c4;">"</span><span style="color: #ff8906;">></span>
<span style="color: #ff8906;"><</span><span style="color: #e66170; font-weight: bold;">h3</span> style<span style="color: #d2cd86;">=</span><span style="color: #00c4c4;">"</span><span style="color: #904050;">background</span><span style="color: #d2cd86;">:</span> <span style="color: #e66170; font-weight: bold;">rgba</span><span style="color: #d2cd86;">(</span><span style="color: #00a800;">0</span><span style="color: #d2cd86;">,</span><span style="color: #00a800;">0</span><span style="color: #d2cd86;">,</span><span style="color: #00a800;">0</span><span style="color: #d2cd86;">,</span><span style="color: #00a800;">.3</span><span style="color: #d2cd86;">)</span><span style="color: #b060b0;">;</span> <span style="color: #904050;">height</span><span style="color: #d2cd86;">:</span> <span style="color: #00a800;">100</span><span style="color: #006600;">%</span><span style="color: #b060b0;">;</span><span style="color: #00c4c4;">"</span><span style="color: #ff8906;">></span> <span style="color: #ff8906;"></</span><span style="color: #e66170; font-weight: bold;">h3</span><span style="color: #ff8906;">></span>
<span style="color: #ff8906;"></</span><span style="color: #e66170; font-weight: bold;">div</span><span style="color: #ff8906;">></span></pre>
<br />
Si quieres ver este código funcionando haz click aquí <a href="http://arcanita.cl/blog/foto_movil.php">LINK</a>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-3415610225025831574.post-64878654283101027682019-08-08T10:06:00.001-07:002019-08-08T12:56:56.936-07:00Procesar un formulario de contacto sin recargar la páginaHola Arcanitos, despues de mucho tiempo vuelvo a escribir en mi blog.<br />
<br />
En esta ocasión les voy a mostrar como procesar un formulario de contacto sin recargar la página
Lo primero es crear un formulario de contacto, recuerden que en su HTML deben importar el código fuente de jquery (línea 3).<br />
Yo hago los HTML super simples para no confundirlos con diseño, ustedes pueden hacerlo tan bello como quieran
<br />
<br />
<pre style="background: #000000; color: #d1d1d1;"><span style="color: #ff8906;"><</span><span style="color: #e66170; font-weight: bold;">html</span><span style="color: #ff8906;">></span>
<span style="color: #ff8906;"><</span><span style="color: #e66170; font-weight: bold;">head</span><span style="color: #ff8906;">></span>
<span style="color: #ff8906;"><</span><span style="color: #e66170; font-weight: bold;">script</span> src<span style="color: #d2cd86;">=</span><span style="color: #00c4c4;">"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"</span><span style="color: #ff8906;">></span><span style="color: #ff8906;"></</span><span style="color: #e66170; font-weight: bold;">script</span><span style="color: #ff8906;">></span>
<span style="color: #ff8906;"></</span><span style="color: #e66170; font-weight: bold;">head</span><span style="color: #ff8906;">></span>
<span style="color: #ff8906;"><</span><span style="color: #e66170; font-weight: bold;">body</span><span style="color: #ff8906;">></span>
<span style="color: #ff8906;"><</span><span style="color: #e66170; font-weight: bold;">h2</span><span style="color: #ff8906;">></span>Contáctanos<span style="color: #ff8906;"></</span><span style="color: #e66170; font-weight: bold;">h2</span><span style="color: #ff8906;">></span>
<span style="color: #ff8906;"><</span><span style="color: #e66170; font-weight: bold;">div</span> id<span style="color: #d2cd86;">=</span><span style="color: #00c4c4;">"mensaje"</span><span style="color: #ff8906;">></span><span style="color: #ff8906;"></</span><span style="color: #e66170; font-weight: bold;">div</span><span style="color: #ff8906;">></span>
<span style="color: #ff8906;"><</span><span style="color: #e66170; font-weight: bold;">form</span> method<span style="color: #d2cd86;">=</span><span style="color: #00c4c4;">"post"</span> action<span style="color: #d2cd86;">=</span><span style="color: #00c4c4;">""</span> id<span style="color: #d2cd86;">=</span><span style="color: #00c4c4;">"formulario"</span> name<span style="color: #d2cd86;">=</span><span style="color: #00c4c4;">"contact"</span><span style="color: #ff8906;">></span>
Nombre <span style="color: #ff8906;"><</span><span style="color: #e66170; font-weight: bold;">br</span><span style="color: #ff8906;">></span>
<span style="color: #ff8906;"><</span><span style="color: #e66170; font-weight: bold;">input</span> type<span style="color: #d2cd86;">=</span><span style="color: #00c4c4;">"text"</span> id<span style="color: #d2cd86;">=</span><span style="color: #00c4c4;">"nombre"</span> name<span style="color: #d2cd86;">=</span><span style="color: #00c4c4;">"nombre"</span> placeholder<span style="color: #d2cd86;">=</span><span style="color: #00c4c4;">"Tu nombre"</span> <span style="color: #ff8906;">/></span><span style="color: #ff8906;"><</span><span style="color: #e66170; font-weight: bold;">br</span><span style="color: #ff8906;">></span><span style="color: #ff8906;"><</span><span style="color: #e66170; font-weight: bold;">br</span><span style="color: #ff8906;">></span>
Email<span style="color: #ff8906;"><</span><span style="color: #e66170; font-weight: bold;">br</span><span style="color: #ff8906;">></span>
<span style="color: #ff8906;"><</span><span style="color: #e66170; font-weight: bold;">input</span> type<span style="color: #d2cd86;">=</span><span style="color: #00c4c4;">"text"</span> id<span style="color: #d2cd86;">=</span><span style="color: #00c4c4;">"email"</span> name<span style="color: #d2cd86;">=</span><span style="color: #00c4c4;">"email"</span> placeholder<span style="color: #d2cd86;">=</span><span style="color: #00c4c4;">"Tu Email"</span> <span style="color: #ff8906;">/></span><span style="color: #ff8906;"><</span><span style="color: #e66170; font-weight: bold;">br</span><span style="color: #ff8906;">></span><span style="color: #ff8906;"><</span><span style="color: #e66170; font-weight: bold;">br</span><span style="color: #ff8906;">></span>
Mensaje<span style="color: #ff8906;"><</span><span style="color: #e66170; font-weight: bold;">br</span><span style="color: #ff8906;">></span>
<span style="color: #ff8906;"><</span><span style="color: #e66170; font-weight: bold;">textarea</span> id<span style="color: #d2cd86;">=</span><span style="color: #00c4c4;">"texto_mail"</span> name<span style="color: #d2cd86;">=</span><span style="color: #00c4c4;">"texto_mail"</span> placeholder<span style="color: #d2cd86;">=</span><span style="color: #00c4c4;">"Mensaje"</span> rows<span style="color: #d2cd86;">=</span><span style="color: #00c4c4;">"4"</span> cols<span style="color: #d2cd86;">=</span><span style="color: #00c4c4;">"40"</span><span style="color: #ff8906;">></span><span style="color: #ff8906;"></</span><span style="color: #e66170; font-weight: bold;">textarea</span><span style="color: #ff8906;">></span><span style="color: #ff8906;"><</span><span style="color: #e66170; font-weight: bold;">br</span><span style="color: #ff8906;">></span><span style="color: #ff8906;"><</span><span style="color: #e66170; font-weight: bold;">br</span><span style="color: #ff8906;">></span>
<span style="color: #ff8906;"><</span><span style="color: #e66170; font-weight: bold;">div</span> style<span style="color: #d2cd86;">=</span><span style="color: #00c4c4;">"</span><span style="color: #904050;">width</span><span style="color: #d2cd86;">:</span> <span style="color: #00a800;">150</span><span style="color: #006600;">px</span><span style="color: #b060b0;">;</span> <span style="color: #904050;">height</span><span style="color: #d2cd86;">:</span> <span style="color: #00a800;">40</span><span style="color: #006600;">px</span><span style="color: #b060b0;">;</span> <span style="color: #904050;">background-color</span><span style="color: #d2cd86;">:</span><span style="color: #00a800;">#</span><span style="color: #00a800;">3498db</span><span style="color: #b060b0;">;</span><span style="color: #00c4c4;">"</span> onclick<span style="color: #d2cd86;">=</span><span style="color: #00c4c4;">"enviar_contacto()"</span><span style="color: #ff8906;">></span>Enviar<span style="color: #ff8906;"></</span><span style="color: #e66170; font-weight: bold;">div</span><span style="color: #ff8906;">></span>
<span style="color: #ff8906;"></</span><span style="color: #e66170; font-weight: bold;">form</span><span style="color: #ff8906;">></span>
<span style="color: #ff8906;"></</span><span style="color: #e66170; font-weight: bold;">body</span><span style="color: #ff8906;">></span>
<span style="color: #ff8906;"></</span><span style="color: #e66170; font-weight: bold;">html</span><span style="color: #ff8906;">></span>
</pre>
<br />
El siguiente paso es crear el javascript para tomar los datos del formulario y enviarlos a ser procesados. Serán procesados por un archivo PHP llamado "procesar_contacto.php", Como ya les he contado, para tomar el contenido de un input con jquery debemos hacerlo asi
<br />
<br />
<pre style="background: #000000; color: #d1d1d1;">nombre<span style="color: #b060b0;">:</span> $<span style="color: #d2cd86;">(</span><span style="color: #02d045;">'</span><span style="color: #00c4c4;">#nombre</span><span style="color: #02d045;">'</span><span style="color: #d2cd86;">)</span><span style="color: #d2cd86;">.</span>val<span style="color: #d2cd86;">(</span><span style="color: #d2cd86;">)</span>
</pre>
<br />
Dentro de la funcion "$.post" ponemos todas la información que enviaremos al "procesar_contacto.php". Y por último las acciones a tomar cuando el PHP de procesamiento responda.<br />
En este caso mostraremos un mensaje de "OK" y esconderemos el formulario.
<br />
<br />
<pre style="background: #000000; color: #d1d1d1;"><span style="color: #d2cd86;"><</span>script<span style="color: #d2cd86;">></span>
<span style="color: #e66170; font-weight: bold;">function</span> enviar_contacto<span style="color: #d2cd86;">(</span><span style="color: #d2cd86;">)</span>
<span style="color: #b060b0;">{</span>
$<span style="color: #d2cd86;">.</span>post<span style="color: #d2cd86;">(</span>
<span style="color: #02d045;">"</span><span style="color: #00c4c4;">procesar_contacto.php</span><span style="color: #02d045;">"</span><span style="color: #d2cd86;">,</span>
<span style="color: #b060b0;">{</span>
action<span style="color: #b060b0;">:</span><span style="color: #02d045;">"</span><span style="color: #00c4c4;">enviar_mensaje</span><span style="color: #02d045;">"</span><span style="color: #d2cd86;">,</span>
nombre<span style="color: #b060b0;">:</span> $<span style="color: #d2cd86;">(</span><span style="color: #02d045;">'</span><span style="color: #00c4c4;">#nombre</span><span style="color: #02d045;">'</span><span style="color: #d2cd86;">)</span><span style="color: #d2cd86;">.</span>val<span style="color: #d2cd86;">(</span><span style="color: #d2cd86;">)</span><span style="color: #d2cd86;">,</span>
email<span style="color: #b060b0;">:</span> $<span style="color: #d2cd86;">(</span><span style="color: #02d045;">'</span><span style="color: #00c4c4;">#email</span><span style="color: #02d045;">'</span><span style="color: #d2cd86;">)</span><span style="color: #d2cd86;">.</span>val<span style="color: #d2cd86;">(</span><span style="color: #d2cd86;">)</span><span style="color: #d2cd86;">,</span>
mensaje<span style="color: #b060b0;">:</span> $<span style="color: #d2cd86;">(</span><span style="color: #02d045;">'</span><span style="color: #00c4c4;">#texto_mail</span><span style="color: #02d045;">'</span><span style="color: #d2cd86;">)</span><span style="color: #d2cd86;">.</span>val<span style="color: #d2cd86;">(</span><span style="color: #d2cd86;">)</span><span style="color: #d2cd86;">,</span>
<span style="color: #b060b0;">}</span><span style="color: #d2cd86;">,</span>
<span style="color: #e66170; font-weight: bold;">function</span><span style="color: #d2cd86;">(</span>data<span style="color: #d2cd86;">,</span> status<span style="color: #d2cd86;">)</span>
<span style="color: #b060b0;">{</span>
<span style="color: #e66170; font-weight: bold;">if</span><span style="color: #d2cd86;">(</span>status<span style="color: #d2cd86;">==</span><span style="color: #02d045;">'</span><span style="color: #00c4c4;">success</span><span style="color: #02d045;">'</span><span style="color: #d2cd86;">)</span>
<span style="color: #b060b0;">{</span>
<span style="color: #e66170; font-weight: bold;">var</span> serverresponse <span style="color: #d2cd86;">=</span> JSON<span style="color: #d2cd86;">.</span><span style="color: #e66170; font-weight: bold;">parse</span><span style="color: #d2cd86;">(</span>data<span style="color: #d2cd86;">)</span><span style="color: #b060b0;">;</span>
console<span style="color: #d2cd86;">.</span><span style="color: #e66170; font-weight: bold;">log</span><span style="color: #d2cd86;">(</span>serverresponse<span style="color: #d2cd86;">)</span><span style="color: #b060b0;">;</span>
<span style="color: #e66170; font-weight: bold;">if</span><span style="color: #d2cd86;">(</span>serverresponse<span style="color: #d2cd86;">.</span>data<span style="color: #d2cd86;">==</span><span style="color: #02d045;">'</span><span style="color: #00c4c4;">ok</span><span style="color: #02d045;">'</span><span style="color: #d2cd86;">)</span>
<span style="color: #b060b0;">{</span>
$<span style="color: #d2cd86;">(</span><span style="color: #02d045;">'</span><span style="color: #00c4c4;">#mensaje</span><span style="color: #02d045;">'</span><span style="color: #d2cd86;">)</span><span style="color: #d2cd86;">.</span>slideDown<span style="color: #d2cd86;">(</span><span style="color: #d2cd86;">)</span><span style="color: #b060b0;">;</span>
$<span style="color: #d2cd86;">(</span><span style="color: #02d045;">"</span><span style="color: #00c4c4;">#mensaje</span><span style="color: #02d045;">"</span><span style="color: #d2cd86;">)</span><span style="color: #d2cd86;">.</span>text<span style="color: #d2cd86;">(</span><span style="color: #02d045;">'</span><span style="color: #00c4c4;">Su mensaje será respondido a la brevedad</span><span style="color: #02d045;">'</span><span style="color: #d2cd86;">)</span><span style="color: #b060b0;">;</span>
$<span style="color: #d2cd86;">(</span><span style="color: #02d045;">"</span><span style="color: #00c4c4;">#formulario</span><span style="color: #02d045;">"</span><span style="color: #d2cd86;">)</span><span style="color: #d2cd86;">.</span>slideUp<span style="color: #d2cd86;">(</span><span style="color: #d2cd86;">)</span><span style="color: #b060b0;">;</span>
<span style="color: #b060b0;">}</span>
<span style="color: #e66170; font-weight: bold;">else</span>
<span style="color: #b060b0;">{</span>
$<span style="color: #d2cd86;">(</span><span style="color: #02d045;">'</span><span style="color: #00c4c4;">#mensaje</span><span style="color: #02d045;">'</span><span style="color: #d2cd86;">)</span><span style="color: #d2cd86;">.</span>slideDown<span style="color: #d2cd86;">(</span><span style="color: #d2cd86;">)</span><span style="color: #b060b0;">;</span>
$<span style="color: #d2cd86;">(</span><span style="color: #02d045;">"</span><span style="color: #00c4c4;">#mensaje</span><span style="color: #02d045;">"</span><span style="color: #d2cd86;">)</span><span style="color: #d2cd86;">.</span>text<span style="color: #d2cd86;">(</span><span style="color: #02d045;">'</span><span style="color: #00c4c4;">Intente nuevamente</span><span style="color: #02d045;">'</span><span style="color: #d2cd86;">)</span><span style="color: #b060b0;">;</span>
<span style="color: #b060b0;">}</span>
<span style="color: #b060b0;">}</span>
<span style="color: #e66170; font-weight: bold;">else</span>
<span style="color: #b060b0;">{</span>
$<span style="color: #d2cd86;">(</span><span style="color: #02d045;">'</span><span style="color: #00c4c4;">#mensaje</span><span style="color: #02d045;">'</span><span style="color: #d2cd86;">)</span><span style="color: #d2cd86;">.</span>slideDown<span style="color: #d2cd86;">(</span><span style="color: #d2cd86;">)</span><span style="color: #b060b0;">;</span>
$<span style="color: #d2cd86;">(</span><span style="color: #02d045;">"</span><span style="color: #00c4c4;">#mensaje</span><span style="color: #02d045;">"</span><span style="color: #d2cd86;">)</span><span style="color: #d2cd86;">.</span>text<span style="color: #d2cd86;">(</span><span style="color: #02d045;">"</span><span style="color: #00c4c4;">Tenemos un problema temporal, inténtalo más tarde...</span><span style="color: #02d045;">"</span><span style="color: #d2cd86;">)</span><span style="color: #b060b0;">;</span>
<span style="color: #b060b0;">}</span>
<span style="color: #b060b0;">}</span>
<span style="color: #d2cd86;">)</span><span style="color: #b060b0;">;</span>
<span style="color: #b060b0;">}</span>
<span style="color: #d2cd86;"><</span><span style="color: #d2cd86;">/</span>script<span style="color: #d2cd86;">></span>
</pre>
En el archivo "procesar_contacto.php", tomaremos las variables que enviamos desde la función anterior y conformaremos un mail (los $headers son para evitar que el email se vaya a spam o cosas asi).
Luego, si el mail se envió correctamente devolveremos en modo de JSON un "ok" solamente como señal que funcionó bien.
<br />
<pre style="background: #000000; color: #d1d1d1;"><span style="background: #281800; color: #f6c1d0;"><?php</span><span style="background: #281800; color: white;"></span>
<span style="background: #281800; color: white;">$action</span><span style="background: #281800; color: white;"> </span><span style="background: #281800; color: #d2cd86;">=</span><span style="background: #281800; color: white;"> </span><span style="background: #281800; color: white;">$_POST</span><span style="background: #281800; color: #d2cd86;">[</span><span style="background: #281800; color: #00c4c4;">'action'</span><span style="background: #281800; color: #d2cd86;">]</span><span style="background: #281800; color: #b060b0;">;</span><span style="background: #281800; color: white;"> </span>
<span style="background: #281800; color: #e66170; font-weight: bold;">if</span><span style="background: #281800; color: #d2cd86;">(</span><span style="background: #281800; color: white;">$action</span><span style="background: #281800; color: #d2cd86;">=</span><span style="background: #281800; color: #d2cd86;">=</span><span style="background: #281800; color: #00c4c4;">"enviar_mensaje"</span><span style="background: #281800; color: #d2cd86;">)</span><span style="background: #281800; color: white;"> </span>
<span style="background: #281800; color: #b060b0;">{</span><span style="background: #281800; color: white;"> </span>
<span style="background: #281800; color: white;"> </span><span style="background: #281800; color: white;">$nombre</span><span style="background: #281800; color: white;"> </span><span style="background: #281800; color: #d2cd86;">=</span><span style="background: #281800; color: white;"> </span><span style="background: #281800; color: white;">$_POST</span><span style="background: #281800; color: #d2cd86;">[</span><span style="background: #281800; color: #00c4c4;">'nombre'</span><span style="background: #281800; color: #d2cd86;">]</span><span style="background: #281800; color: #b060b0;">;</span><span style="background: #281800; color: white;"> </span>
<span style="background: #281800; color: white;"> </span><span style="background: #281800; color: white;">$email</span><span style="background: #281800; color: white;"> </span><span style="background: #281800; color: #d2cd86;">=</span><span style="background: #281800; color: white;"> </span><span style="background: #281800; color: white;">$_POST</span><span style="background: #281800; color: #d2cd86;">[</span><span style="background: #281800; color: #00c4c4;">'email'</span><span style="background: #281800; color: #d2cd86;">]</span><span style="background: #281800; color: #b060b0;">;</span><span style="background: #281800; color: white;"> </span>
<span style="background: #281800; color: white;"> </span><span style="background: #281800; color: white;">$mensaje</span><span style="background: #281800; color: white;"> </span><span style="background: #281800; color: #d2cd86;">=</span><span style="background: #281800; color: white;"> </span><span style="background: #281800; color: white;">$_POST</span><span style="background: #281800; color: #d2cd86;">[</span><span style="background: #281800; color: #00c4c4;">'mensaje'</span><span style="background: #281800; color: #d2cd86;">]</span><span style="background: #281800; color: #b060b0;">;</span><span style="background: #281800; color: white;"> </span>
<span style="background: #281800; color: white;"> </span>
<span style="background: #281800; color: white;"> </span><span style="background: #281800; color: white;">$headers</span><span style="background: #281800; color: white;"> </span><span style="background: #281800; color: #d2cd86;">=</span><span style="background: #281800; color: white;"> </span><span style="background: #281800; color: #00c4c4;">"MIME-Version: 1.0</span><span style="background: #281800; color: teal;">\r</span><span style="background: #281800; color: teal;">\n</span><span style="background: #281800; color: #00c4c4;">"</span><span style="background: #281800; color: #b060b0;">;</span><span style="background: #281800; color: white;"></span>
<span style="background: #281800; color: white;"> </span><span style="background: #281800; color: white;">$headers</span><span style="background: #281800; color: white;"> </span><span style="background: #281800; color: #d2cd86;">.</span><span style="background: #281800; color: #d2cd86;">=</span><span style="background: #281800; color: white;"> </span><span style="background: #281800; color: #00c4c4;">"Content-type: text/html; charset=iso-8859-1</span><span style="background: #281800; color: teal;">\r</span><span style="background: #281800; color: teal;">\n</span><span style="background: #281800; color: #00c4c4;">"</span><span style="background: #281800; color: #b060b0;">;</span><span style="background: #281800; color: white;"></span>
<span style="background: #281800; color: white;"> </span><span style="background: #281800; color: white;">$headers</span><span style="background: #281800; color: white;"> </span><span style="background: #281800; color: #d2cd86;">=</span><span style="background: #281800; color: white;"> </span><span style="background: #281800; color: #00c4c4;">"From: easyparty@easyparty.cl</span><span style="background: #281800; color: teal;">\r</span><span style="background: #281800; color: teal;">\n</span><span style="background: #281800; color: #00c4c4;">"</span><span style="background: #281800; color: #b060b0;">;</span><span style="background: #281800; color: white;"></span>
<span style="background: #281800; color: white;"> </span><span style="background: #281800; color: white;">$headers</span><span style="background: #281800; color: white;"> </span><span style="background: #281800; color: #d2cd86;">.</span><span style="background: #281800; color: #d2cd86;">=</span><span style="background: #281800; color: white;"> </span><span style="background: #281800; color: #00c4c4;">"Reply-To: </span><span style="background: #281800; color: #00c4c4;">$email</span><span style="background: #281800; color: teal;">\r</span><span style="background: #281800; color: teal;">\n</span><span style="background: #281800; color: #00c4c4;">"</span><span style="background: #281800; color: #b060b0;">;</span><span style="background: #281800; color: white;"></span>
<span style="background: #281800; color: white;"> </span><span style="background: #281800; color: white;">$headers</span><span style="background: #281800; color: white;"> </span><span style="background: #281800; color: #d2cd86;">.</span><span style="background: #281800; color: #d2cd86;">=</span><span style="background: #281800; color: white;"> </span><span style="background: #281800; color: #00c4c4;">"Return-path: </span><span style="background: #281800; color: #00c4c4;">$email</span><span style="background: #281800; color: teal;">\r</span><span style="background: #281800; color: teal;">\n</span><span style="background: #281800; color: #00c4c4;">"</span><span style="background: #281800; color: #b060b0;">;</span><span style="background: #281800; color: white;"> </span>
<span style="background: #281800; color: white;"> </span><span style="background: #281800; color: white;">$mensajenuevo</span><span style="background: #281800; color: #d2cd86;">=</span><span style="background: #281800; color: #00c4c4;">'</span>
<span style="background: #281800; color: #00c4c4;"> Nombre: '</span><span style="background: #281800; color: #d2cd86;">.</span><span style="background: #281800; color: white;">$nombre</span><span style="background: #281800; color: #d2cd86;">.</span><span style="background: #281800; color: #00c4c4;">'</span>
<span style="background: #281800; color: #00c4c4;"> Correo: '</span><span style="background: #281800; color: #d2cd86;">.</span><span style="background: #281800; color: white;">$email</span><span style="background: #281800; color: #d2cd86;">.</span><span style="background: #281800; color: #00c4c4;">'</span>
<span style="background: #281800; color: #00c4c4;"></span>
<span style="background: #281800; color: #00c4c4;"> ====== Mensaje ========</span>
<span style="background: #281800; color: #00c4c4;"> '</span><span style="background: #281800; color: #d2cd86;">.</span><span style="background: #281800; color: white;">$mensaje</span><span style="background: #281800; color: #d2cd86;">.</span><span style="background: #281800; color: #00c4c4;">'</span>
<span style="background: #281800; color: #00c4c4;"> =======================</span>
<span style="background: #281800; color: #00c4c4;"> '</span><span style="background: #281800; color: #b060b0;">;</span><span style="background: #281800; color: white;"></span>
<span style="background: #281800; color: white;"></span>
<span style="background: #281800; color: white;"> </span><span style="background: #281800; color: #e66170; font-weight: bold;">if</span><span style="background: #281800; color: #d2cd86;">(</span><span style="background: #281800; color: #e66170; font-weight: bold;">mail</span><span style="background: #281800; color: #d2cd86;">(</span><span style="background: #281800; color: #00c4c4;">"tumail@mail.com"</span><span style="background: #281800; color: #d2cd86;">,</span><span style="background: #281800; color: #00c4c4;">"Contacto desde tu web"</span><span style="background: #281800; color: #d2cd86;">,</span><span style="background: #281800; color: white;"> </span><span style="background: #281800; color: white;">$mensajenuevo</span><span style="background: #281800; color: #d2cd86;">,</span><span style="background: #281800; color: white;">$headers</span><span style="background: #281800; color: #d2cd86;">)</span><span style="background: #281800; color: #d2cd86;">)</span><span style="background: #281800; color: white;"></span>
<span style="background: #281800; color: white;"> </span><span style="background: #281800; color: #b060b0;">{</span><span style="background: #281800; color: white;"></span>
<span style="background: #281800; color: white;"> </span><span style="background: #281800; color: white;">$data</span><span style="background: #281800; color: white;"> </span><span style="background: #281800; color: #d2cd86;">=</span><span style="background: #281800; color: white;"> </span><span style="background: #281800; color: #00c4c4;">'ok'</span><span style="background: #281800; color: #b060b0;">;</span><span style="background: #281800; color: white;"></span>
<span style="background: #281800; color: white;"> </span><span style="background: #281800; color: #b060b0;">}</span><span style="background: #281800; color: white;"> </span>
<span style="background: #281800; color: white;"> </span><span style="background: #281800; color: #e66170; font-weight: bold;">else</span><span style="background: #281800; color: white;"> </span>
<span style="background: #281800; color: white;"> </span><span style="background: #281800; color: #b060b0;">{</span><span style="background: #281800; color: white;"></span>
<span style="background: #281800; color: white;"> </span><span style="background: #281800; color: white;">$data</span><span style="background: #281800; color: white;"> </span><span style="background: #281800; color: #d2cd86;">=</span><span style="background: #281800; color: white;"> </span><span style="background: #281800; color: #00c4c4;">'no'</span><span style="background: #281800; color: #b060b0;">;</span><span style="background: #281800; color: white;"></span>
<span style="background: #281800; color: white;"> </span><span style="background: #281800; color: #b060b0;">}</span><span style="background: #281800; color: white;"> </span>
<span style="background: #281800; color: white;"> </span><span style="background: #281800; color: white;">$json</span><span style="background: #281800; color: white;"> </span><span style="background: #281800; color: #d2cd86;">=</span><span style="background: #281800; color: white;"> </span><span style="background: #281800; color: #e66170; font-weight: bold;">array</span><span style="background: #281800; color: #d2cd86;">(</span><span style="background: #281800; color: #00c4c4;">'data'</span><span style="background: #281800; color: white;"> </span><span style="background: #281800; color: #d2cd86;">=</span><span style="background: #281800; color: #d2cd86;">></span><span style="background: #281800; color: white;"> </span><span style="background: #281800; color: white;">$data</span><span style="background: #281800; color: #d2cd86;">)</span><span style="background: #281800; color: #b060b0;">;</span><span style="background: #281800; color: white;"></span>
<span style="background: #281800; color: white;"> </span><span style="background: #281800; color: #e66170; font-weight: bold;">echo</span><span style="background: #281800; color: white;"> </span><span style="background: #281800; color: #e66170; font-weight: bold;">json_encode</span><span style="background: #281800; color: #d2cd86;">(</span><span style="background: #281800; color: white;">$json</span><span style="background: #281800; color: #d2cd86;">)</span><span style="background: #281800; color: #b060b0;">;</span><span style="background: #281800; color: white;"></span>
<span style="background: #281800; color: #b060b0;">}</span><span style="background: #281800; color: white;"></span>
<span style="background: #281800; color: white;"> </span>
</pre>
<br />
Si quieren probar que esto funciona pueden hacerlo haciendo click aquí <a href="http://arcanita.cl/blog/form_contacto.php">LINK</a><br />
Espero les sirva!!<br />
saludos! :) Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-3415610225025831574.post-41600160128748468642019-08-08T09:38:00.001-07:002019-08-08T12:56:36.691-07:00Cómo tomar contenido desde un input textarea con saltos de lineaA veces tenemos un input type="textarea" y la gente que lo rellena pone saltos de linea, bueno para recibir este valor y mantener los saltos de linea...<br />
Es muy simple! solo antepone nl2br a tu funcion php para guardar el valor. <br />
<br />
Asi<br />
<pre style="background: #000000; color: #d1d1d1;"><span style="background: #281800; color: #f6c1d0;"><?php</span><span style="background: #281800; color: white;"></span>
<span style="background: #281800; color: white;">$mensaje</span><span style="background: #281800; color: white;"> </span><span style="background: #281800; color: #d2cd86;">=</span><span style="background: #281800; color: white;"> </span><span style="background: #281800; color: #e66170; font-weight: bold;">nl2br</span><span style="background: #281800; color: #d2cd86;">(</span><span style="background: #281800; color: white;">$_POST</span><span style="background: #281800; color: #d2cd86;">[</span><span style="background: #281800; color: #00c4c4;">'mensaje'</span><span style="background: #281800; color: #d2cd86;">]</span><span style="background: #281800; color: #d2cd86;">)</span><span style="background: #281800; color: #b060b0;">;</span><span style="background: #281800; color: white;"></span>
<span style="background: #281800; color: #f6c1d0;">?></span>
</pre>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-3415610225025831574.post-61075819736692025872016-12-19T11:44:00.001-08:002016-12-19T11:44:22.204-08:00Hacer pagina que solo cargue el contenidoHola Arcanitos, en esta ocasión les enseñaré mi forma de hacer que dentro de una página solo se cargue una vez el marco (banner, menu, footer, etc) y solo recargue el contenido según el link al que entramos.
Por ejemplo en esta página:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjykpzWgfxe_HdX8upWeDzXCHkXpbjxfSVgbhMGdEWTTGx8Y1w40eT3qwaWF0_0Nl00Y8Hiwtjyblv7Ya2Quc33FzMI1yb-MWJIrVbGe5K5xJARmsw3IVRirqAFmEctfF9WqE2GrwRJKc8/s1600/wef.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="397" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjykpzWgfxe_HdX8upWeDzXCHkXpbjxfSVgbhMGdEWTTGx8Y1w40eT3qwaWF0_0Nl00Y8Hiwtjyblv7Ya2Quc33FzMI1yb-MWJIrVbGe5K5xJARmsw3IVRirqAFmEctfF9WqE2GrwRJKc8/s640/wef.png" width="640" /></a></div>
(Pueden visitarla haciendo click <a href="http://arcanita.cl/blog/pagina_marco/index.php">aquí</a>)<br />
En la página del ejemplo al hacer click en cada ítem del menú, no va a recargar toda la página, solo recargara lo que esta dentro del div "contenido" o como quieran llamarle.<br />
<br />
<span style="background-color: #f4cccc;">Ademas de ahorrar tiempos de cargas, es muy útil por si quieren hacer algún cambio en el marco (como les dije antes, menu, banner, footer, etc).</span><br />
<span style="background-color: #f4cccc;">Si quieren hacer un cambio en el marco y no tienen este sistema implementado, tendrían que hacer el cambio en el código de todas las páginas que tengan. En cambio con este sistema lo hacen en el <i>index.php </i>y listo.</span><br />
<br />
El código para esto es muy simple. Deben crear su página de "home" como cualquier otra que creen, luego dentro del div que tendrá el contenido deberán poner esto:<br />
<br />
<br />
<pre style="background: #000; color: #f8f8f8;"><div class="contenido">
<?php
<span style="color: #e28964;"> if</span>(<span style="color: #e28964;">!</span><span style="color: #dad085;">isset</span>(<span style="color: #3e87e3;">$_GET</span>[<span style="color: #65b042;">'id'</span>]))
{
?><h1>Este es el home de la página</h1><?php
}
<span style="color: #e28964;"> else</span><span style="color: #e28964;"> if</span>(<span style="color: #dad085;">file_exists</span>(<span style="color: #3e87e3;">$_GET</span>[<span style="color: #65b042;">'id'</span>]<span style="color: #e28964;">.</span><span style="color: #65b042;">".php"</span>))
{
<span style="color: #3e87e3;">$id</span> <span style="color: #e28964;">=</span> <span style="color: #dad085;">htmlspecialchars</span>(<span style="color: #dad085;">trim</span>(<span style="color: #3e87e3;">$_GET</span>[<span style="color: #65b042;">"id"</span>]));
<span style="color: #3e87e3;">$id</span> <span style="color: #e28964;">=</span> <span style="color: #dad085;">eregi_replace</span>(<span style="color: #65b042;">"<[^>]*>"</span>,<span style="color: #65b042;">""</span>,<span style="color: #3e87e3;">$id</span>) ;
<span style="color: #3e87e3;">$id</span> <span style="color: #e28964;">=</span> <span style="color: #dad085;">eregi_replace</span>(<span style="color: #65b042;">".*//"</span>,<span style="color: #65b042;">""</span>,<span style="color: #3e87e3;">$id</span>) ;
<span style="color: #e28964;">include</span>(<span style="color: #65b042;">"<span style="color: #8a9a95;">$id</span>.php"</span>);
} ?>
</div>
</pre>
<br />
*Lo mas diferente es que al momento de crear el menú o de insertar links, deben poner una url un poquito mas larga, debe ser así:<br />
<br />
<br />
<pre style="background: #000; color: #f8f8f8;"><span style="color: #89bdff;"><<span style="color: #89bdff;">div</span> <span style="color: #89bdff;">class</span>=<span style="color: #65b042;">"menu"</span>></span>
<span style="color: #e0c589;"><<span style="color: #e0c589;">img</span> <span style="color: #e0c589;">src</span>=<span style="color: #65b042;">"banner.png"</span> <span style="color: #e0c589;">style</span>=<span style="color: #65b042;">"height:90px;float:left;"</span>></span>
<span style="color: #89bdff;"><<span style="color: #89bdff;">div</span> <span style="color: #89bdff;">onclick</span>=<span style="color: #65b042;">"location.href='index.php'"</span> <span style="color: #89bdff;">class</span>=<span style="color: #65b042;">"menu_blanco"</span>></span>HOME<span style="color: #89bdff;"></<span style="color: #89bdff;">div</span>></span>
<span style="color: #89bdff;"><<span style="color: #89bdff;">div</span> <span style="color: #89bdff;">onclick</span>=<span style="color: #65b042;">"location.href='index.php?id=empresa'"</span> <span style="color: #89bdff;">class</span>=<span style="color: #65b042;">"menu_blanco"</span>></span>EMPRESA<span style="color: #89bdff;"></<span style="color: #89bdff;">div</span>></span>
<span style="color: #89bdff;"><<span style="color: #89bdff;">div</span> <span style="color: #89bdff;">onclick</span>=<span style="color: #65b042;">"location.href='index.php?id=productos'"</span> <span style="color: #89bdff;">class</span>=<span style="color: #65b042;">"menu_blanco"</span>></span>PRODUCTOS<span style="color: #89bdff;"></<span style="color: #89bdff;">div</span>></span>
<span style="color: #89bdff;"><<span style="color: #89bdff;">div</span> <span style="color: #89bdff;">onclick</span>=<span style="color: #65b042;">"location.href='index.php?id=contacto'"</span> <span style="color: #89bdff;">class</span>=<span style="color: #65b042;">"menu_blanco"</span>></span>CONTACTO<span style="color: #89bdff;"></<span style="color: #89bdff;">div</span>></span>
<span style="color: #89bdff;"></<span style="color: #89bdff;">div</span>></span>
</pre>
<br />
Dentro de los archivos "empresa.php", "productos.php", "contacto.php"; no deben poner nada del marco, solo la información que va en el contenido, por ejemplo el archivo "empresa.php" es asi de simple:<br />
<br />
<br />
<pre style="background: #000; color: #f8f8f8;"><span style="color: #89bdff;"><<span style="color: #89bdff;">h1</span>></span>Empresa<span style="color: #89bdff;"></<span style="color: #89bdff;">h1</span>></span>
<span style="color: #89bdff;"><<span style="color: #89bdff;">p</span> <span style="color: #89bdff;">style</span>=<span style="color: #65b042;">"text-align:justify; padding: 50 50 50 50px;"</span>></span>Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<span style="color: #89bdff;"></<span style="color: #89bdff;">p</span>></span>
</pre>
<br />Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-3415610225025831574.post-51758392750841775862016-12-07T10:28:00.002-08:002016-12-07T11:00:09.488-08:00Como hacer carrusel para banner de páginaHola amigos Arcanitos.<br />
<br />
Siempre que quiero hacer un carrusel de fotos para el banner de una página web, tengo que buscar alguno en internet y siempre hay que descargarlo y son una lata.<br />
<br />
En esta entrada les mostraré como hice un banner con fotos, las cuales van cambiando después de un cierto tiempo y además tiene flechitas para cambiarlas.<br />
<br />
Es ideal que las imágenes tengan el mismo tamaño.<br />
<br />
Es súper simple.<br />
El HTML para esto quedará asi:<br />
<br />
<br />
<br />
<pre style="background: #000000; color: #d1d1d1; font-size: 12px;"><span style="color: #ff8906;"><</span><span style="color: #e66170; font-weight: bold;">body</span> onload<span style="color: #d2cd86;">=</span><span style="color: #00c4c4;">"cargar_banner();"</span><span style="color: #ff8906;">></span>
<span style="color: #ff8906;"><</span><span style="color: #e66170; font-weight: bold;">div</span> id<span style="color: #d2cd86;">=</span><span style="color: #00c4c4;">"banner"</span> style<span style="color: #d2cd86;">=</span><span style="color: #00c4c4;">"</span><span style="color: #904050;">margin</span><span style="color: #d2cd86;">:</span>auto<span style="color: #b060b0;">;</span> <span style="color: #904050;">width</span><span style="color: #d2cd86;">:</span><span style="color: #00a800;">100</span><span style="color: #006600;">%</span><span style="color: #b060b0;">;</span> <span style="color: #904050;">background-repeat</span><span style="color: #d2cd86;">:</span>no-repeat<span style="color: #b060b0;">;</span> <span style="color: #904050;">height</span><span style="color: #d2cd86;">:</span><span style="color: #00a800;">430</span><span style="color: #006600;">px</span><span style="color: #b060b0;">;</span> <span style="color: #904050;">background-position</span><span style="color: #d2cd86;">:</span>center<span style="color: #b060b0;">;</span><span style="color: #00c4c4;">"</span> <span style="color: #ff8906;">></span>
<span style="color: #ff8906;"><</span><span style="color: #e66170; font-weight: bold;">div</span> style<span style="color: #d2cd86;">=</span><span style="color: #00c4c4;">"</span><span style="color: #904050;">width</span><span style="color: #d2cd86;">:</span><span style="color: #00a800;">5</span><span style="color: #006600;">%</span><span style="color: #b060b0;">;</span><span style="color: #904050;">float</span><span style="color: #d2cd86;">:</span>left<span style="color: #b060b0;">;</span> <span style="color: #904050;">margin-top</span><span style="color: #d2cd86;">:</span><span style="color: #00a800;">150</span><span style="color: #006600;">px</span><span style="color: #b060b0;">;</span> <span style="color: #904050;">cursor</span><span style="color: #d2cd86;">:</span>pointer<span style="color: #b060b0;">;</span><span style="color: #00c4c4;">"</span> onclick<span style="color: #d2cd86;">=</span><span style="color: #00c4c4;">"slide('izq')"</span><span style="color: #ff8906;">></span>
<span style="color: #ff8906;"><</span><span style="color: #e66170; font-weight: bold;">img</span> src<span style="color: #d2cd86;">=</span><span style="color: #00c4c4;">"images/flecha_izq.png"</span><span style="color: #ff8906;">></span>
<span style="color: #ff8906;"></</span><span style="color: #e66170; font-weight: bold;">div</span><span style="color: #ff8906;">></span>
<span style="color: #ff8906;"><</span><span style="color: #e66170; font-weight: bold;">div</span> style<span style="color: #d2cd86;">=</span><span style="color: #00c4c4;">"</span><span style="color: #904050;">width</span><span style="color: #d2cd86;">:</span><span style="color: #00a800;">5</span><span style="color: #006600;">%</span><span style="color: #b060b0;">;</span><span style="color: #904050;">float</span><span style="color: #d2cd86;">:</span>right<span style="color: #b060b0;">;</span> <span style="color: #904050;">margin-top</span><span style="color: #d2cd86;">:</span><span style="color: #00a800;">150</span><span style="color: #006600;">px</span><span style="color: #b060b0;">;</span> <span style="color: #904050;">cursor</span><span style="color: #d2cd86;">:</span>pointer<span style="color: #b060b0;">;</span><span style="color: #00c4c4;">"</span> onclick<span style="color: #d2cd86;">=</span><span style="color: #00c4c4;">"slide('der')"</span><span style="color: #ff8906;">></span>
<span style="color: #ff8906;"><</span><span style="color: #e66170; font-weight: bold;">img</span> src<span style="color: #d2cd86;">=</span><span style="color: #00c4c4;">"images/flecha_der.png"</span><span style="color: #ff8906;">></span>
<span style="color: #ff8906;"></</span><span style="color: #e66170; font-weight: bold;">div</span><span style="color: #ff8906;">></span>
<span style="color: #ff8906;"></</span><span style="color: #e66170; font-weight: bold;">div</span><span style="color: #ff8906;">></span>
<span style="color: #ff8906;"></</span><span style="color: #e66170; font-weight: bold;">body</span><span style="color: #ff8906;">></span>
</pre>
<br />
Las funciones que utilizaremos serán cargar "banner" y "slide".<br />
Estas funciones se verán así.<br />
<i>(Nota: recuerden que estas funciones pueden ir en el mismo archivo HTML, recuerden tambien incluir la libería jquery antes de estas funciones)</i><br />
<span style="background-color: #f4cccc;"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script></span><br />
<br />
<br />
<pre style="background: #000000; color: #d1d1d1;"><span style="color: #d2cd86;"><</span>script<span style="color: #d2cd86;">></span>
<span style="color: #e66170; font-weight: bold;">var</span> i <span style="color: #d2cd86;">=</span> <span style="color: #008c00;">0</span><span style="color: #b060b0;">;</span>
<span style="color: #e66170; font-weight: bold;">var</span> arrImagenes <span style="color: #d2cd86;">=</span> <span style="color: #d2cd86;">[</span> <span style="color: #02d045;">'</span><span style="color: #00c4c4;">images/banner1.jpg</span><span style="color: #02d045;">'</span><span style="color: #d2cd86;">,</span><span style="color: #02d045;">'</span><span style="color: #00c4c4;">images/banner2.jpg</span><span style="color: #02d045;">'</span><span style="color: #d2cd86;">,</span> <span style="color: #02d045;">'</span><span style="color: #00c4c4;">images/banner3.png</span><span style="color: #02d045;">'</span> <span style="color: #d2cd86;">]</span><span style="color: #b060b0;">;</span>
<span style="color: #e66170; font-weight: bold;">function</span> cargar_banner<span style="color: #d2cd86;">(</span><span style="color: #d2cd86;">)</span>
<span style="color: #b060b0;">{</span>
$<span style="color: #d2cd86;">(</span><span style="color: #02d045;">"</span><span style="color: #00c4c4;">#banner</span><span style="color: #02d045;">"</span><span style="color: #d2cd86;">)</span><span style="color: #d2cd86;">.</span>css<span style="color: #d2cd86;">(</span><span style="color: #02d045;">'</span><span style="color: #00c4c4;">backgroundImage</span><span style="color: #02d045;">'</span><span style="color: #d2cd86;">,</span> <span style="color: #02d045;">'</span><span style="color: #00c4c4;">url(</span><span style="color: #02d045;">'</span><span style="color: #d2cd86;">+</span>arrImagenes<span style="color: #d2cd86;">[</span>i<span style="color: #d2cd86;">]</span><span style="color: #d2cd86;">+</span><span style="color: #02d045;">'</span><span style="color: #00c4c4;">)</span><span style="color: #02d045;">'</span><span style="color: #d2cd86;">)</span><span style="color: #b060b0;">;</span>
<span style="color: #e66170; font-weight: bold;">var</span> tiempo <span style="color: #d2cd86;">=</span> <span style="color: #008c00;">5000</span><span style="color: #b060b0;">;</span>
<span style="color: #e66170; font-weight: bold;">var</span> id_contenedor <span style="color: #d2cd86;">=</span> <span style="color: #02d045;">'</span><span style="color: #00c4c4;">banner</span><span style="color: #02d045;">'</span><span style="color: #b060b0;">;</span>
<span style="color: #e66170; font-weight: bold;">setInterval</span><span style="color: #d2cd86;">(</span> cambiarImagenFondo<span style="color: #d2cd86;">,</span> tiempo<span style="color: #d2cd86;">)</span>
<span style="color: #b060b0;">}</span>
<span style="color: #e66170; font-weight: bold;">function</span> cambiarImagenFondo<span style="color: #d2cd86;">(</span><span style="color: #d2cd86;">)</span>
<span style="color: #b060b0;">{</span>
<span style="color: #e66170; font-weight: bold;">if</span><span style="color: #d2cd86;">(</span>i <span style="color: #d2cd86;">==</span> arrImagenes<span style="color: #d2cd86;">.</span><span style="color: #e66170; font-weight: bold;">length</span><span style="color: #d2cd86;">-</span><span style="color: #008c00;">1</span><span style="color: #d2cd86;">)</span>
<span style="color: #b060b0;">{</span>
i<span style="color: #d2cd86;">=</span><span style="color: #008c00;">0</span><span style="color: #b060b0;">;</span>
<span style="color: #b060b0;">}</span>
<span style="color: #e66170; font-weight: bold;">else</span>
<span style="color: #b060b0;">{</span>
i<span style="color: #d2cd86;">=</span>i<span style="color: #d2cd86;">+</span><span style="color: #008c00;">1</span><span style="color: #b060b0;">;</span>
<span style="color: #b060b0;">}</span>
$<span style="color: #d2cd86;">(</span><span style="color: #02d045;">'</span><span style="color: #00c4c4;">#banner</span><span style="color: #02d045;">'</span><span style="color: #d2cd86;">)</span><span style="color: #d2cd86;">.</span>fadeTo<span style="color: #d2cd86;">(</span><span style="color: #02d045;">'</span><span style="color: #00c4c4;">slow</span><span style="color: #02d045;">'</span><span style="color: #d2cd86;">,</span> <span style="color: #009f00;">0.3</span><span style="color: #d2cd86;">,</span> <span style="color: #e66170; font-weight: bold;">function</span><span style="color: #d2cd86;">(</span><span style="color: #d2cd86;">)</span>
<span style="color: #b060b0;">{</span>
$<span style="color: #d2cd86;">(</span><span style="color: #e66170; font-weight: bold;">this</span><span style="color: #d2cd86;">)</span><span style="color: #d2cd86;">.</span>css<span style="color: #d2cd86;">(</span><span style="color: #02d045;">'</span><span style="color: #00c4c4;">background-image</span><span style="color: #02d045;">'</span><span style="color: #d2cd86;">,</span> <span style="color: #02d045;">'</span><span style="color: #00c4c4;">url(</span><span style="color: #02d045;">'</span> <span style="color: #d2cd86;">+</span> arrImagenes<span style="color: #d2cd86;">[</span>i<span style="color: #d2cd86;">]</span> <span style="color: #d2cd86;">+</span> <span style="color: #02d045;">'</span><span style="color: #00c4c4;">)</span><span style="color: #02d045;">'</span><span style="color: #d2cd86;">)</span><span style="color: #b060b0;">;</span>
<span style="color: #b060b0;">}</span><span style="color: #d2cd86;">)</span><span style="color: #d2cd86;">.</span>fadeTo<span style="color: #d2cd86;">(</span><span style="color: #02d045;">'</span><span style="color: #00c4c4;">slow</span><span style="color: #02d045;">'</span><span style="color: #d2cd86;">,</span> <span style="color: #008c00;">1</span><span style="color: #d2cd86;">)</span><span style="color: #b060b0;">;</span>
<span style="color: #b060b0;">}</span>
<span style="color: #e66170; font-weight: bold;">function</span> slide<span style="color: #d2cd86;">(</span>lado<span style="color: #d2cd86;">)</span>
<span style="color: #b060b0;">{</span>
<span style="color: #e66170; font-weight: bold;">if</span><span style="color: #d2cd86;">(</span>lado <span style="color: #d2cd86;">==</span> <span style="color: #02d045;">'</span><span style="color: #00c4c4;">izq</span><span style="color: #02d045;">'</span><span style="color: #d2cd86;">)</span>
<span style="color: #b060b0;">{</span>
<span style="color: #e66170; font-weight: bold;">if</span><span style="color: #d2cd86;">(</span>i <span style="color: #d2cd86;">==</span> <span style="color: #008c00;">0</span><span style="color: #d2cd86;">)</span><span style="color: #b060b0;">{</span> i <span style="color: #d2cd86;">=</span> <span style="color: #008c00;">2</span><span style="color: #b060b0;">;</span> <span style="color: #b060b0;">}</span>
<span style="color: #e66170; font-weight: bold;">else</span><span style="color: #b060b0;">{</span> i<span style="color: #d2cd86;">--</span><span style="color: #b060b0;">;</span> <span style="color: #b060b0;">}</span>
$<span style="color: #d2cd86;">(</span><span style="color: #02d045;">'</span><span style="color: #00c4c4;">#banner</span><span style="color: #02d045;">'</span><span style="color: #d2cd86;">)</span><span style="color: #d2cd86;">.</span>fadeTo<span style="color: #d2cd86;">(</span><span style="color: #02d045;">'</span><span style="color: #00c4c4;">slow</span><span style="color: #02d045;">'</span><span style="color: #d2cd86;">,</span> <span style="color: #009f00;">0.3</span><span style="color: #d2cd86;">,</span> <span style="color: #e66170; font-weight: bold;">function</span><span style="color: #d2cd86;">(</span><span style="color: #d2cd86;">)</span>
<span style="color: #b060b0;">{</span>
$<span style="color: #d2cd86;">(</span><span style="color: #e66170; font-weight: bold;">this</span><span style="color: #d2cd86;">)</span><span style="color: #d2cd86;">.</span>css<span style="color: #d2cd86;">(</span><span style="color: #02d045;">'</span><span style="color: #00c4c4;">background-image</span><span style="color: #02d045;">'</span><span style="color: #d2cd86;">,</span> <span style="color: #02d045;">'</span><span style="color: #00c4c4;">url(</span><span style="color: #02d045;">'</span> <span style="color: #d2cd86;">+</span> arrImagenes<span style="color: #d2cd86;">[</span>i<span style="color: #d2cd86;">]</span> <span style="color: #d2cd86;">+</span> <span style="color: #02d045;">'</span><span style="color: #00c4c4;">)</span><span style="color: #02d045;">'</span><span style="color: #d2cd86;">)</span><span style="color: #b060b0;">;</span>
<span style="color: #b060b0;">}</span><span style="color: #d2cd86;">)</span><span style="color: #d2cd86;">.</span>fadeTo<span style="color: #d2cd86;">(</span><span style="color: #02d045;">'</span><span style="color: #00c4c4;">fast</span><span style="color: #02d045;">'</span><span style="color: #d2cd86;">,</span> <span style="color: #008c00;">1</span><span style="color: #d2cd86;">)</span><span style="color: #b060b0;">;</span>
<span style="color: #b060b0;">}</span>
<span style="color: #e66170; font-weight: bold;">else</span>
<span style="color: #b060b0;">{</span>
<span style="color: #e66170; font-weight: bold;">if</span><span style="color: #d2cd86;">(</span>i <span style="color: #d2cd86;">==</span> <span style="color: #008c00;">2</span><span style="color: #d2cd86;">)</span><span style="color: #b060b0;">{</span> i <span style="color: #d2cd86;">=</span> <span style="color: #008c00;">0</span><span style="color: #b060b0;">;</span> <span style="color: #b060b0;">}</span>
<span style="color: #e66170; font-weight: bold;">else</span><span style="color: #b060b0;">{</span> i<span style="color: #d2cd86;">++</span><span style="color: #b060b0;">;</span> <span style="color: #b060b0;">}</span>
$<span style="color: #d2cd86;">(</span><span style="color: #02d045;">'</span><span style="color: #00c4c4;">#banner</span><span style="color: #02d045;">'</span><span style="color: #d2cd86;">)</span><span style="color: #d2cd86;">.</span>fadeTo<span style="color: #d2cd86;">(</span><span style="color: #02d045;">'</span><span style="color: #00c4c4;">slow</span><span style="color: #02d045;">'</span><span style="color: #d2cd86;">,</span> <span style="color: #009f00;">0.3</span><span style="color: #d2cd86;">,</span> <span style="color: #e66170; font-weight: bold;">function</span><span style="color: #d2cd86;">(</span><span style="color: #d2cd86;">)</span>
<span style="color: #b060b0;">{</span>
$<span style="color: #d2cd86;">(</span><span style="color: #e66170; font-weight: bold;">this</span><span style="color: #d2cd86;">)</span><span style="color: #d2cd86;">.</span>css<span style="color: #d2cd86;">(</span><span style="color: #02d045;">'</span><span style="color: #00c4c4;">background-image</span><span style="color: #02d045;">'</span><span style="color: #d2cd86;">,</span> <span style="color: #02d045;">'</span><span style="color: #00c4c4;">url(</span><span style="color: #02d045;">'</span> <span style="color: #d2cd86;">+</span> arrImagenes<span style="color: #d2cd86;">[</span>i<span style="color: #d2cd86;">]</span> <span style="color: #d2cd86;">+</span> <span style="color: #02d045;">'</span><span style="color: #00c4c4;">)</span><span style="color: #02d045;">'</span><span style="color: #d2cd86;">)</span><span style="color: #b060b0;">;</span>
<span style="color: #b060b0;">}</span><span style="color: #d2cd86;">)</span><span style="color: #d2cd86;">.</span>fadeTo<span style="color: #d2cd86;">(</span><span style="color: #02d045;">'</span><span style="color: #00c4c4;">slow</span><span style="color: #02d045;">'</span><span style="color: #d2cd86;">,</span> <span style="color: #008c00;">1</span><span style="color: #d2cd86;">)</span><span style="color: #b060b0;">;</span>
<span style="color: #b060b0;">}</span>
<span style="color: #b060b0;">}</span>
<span style="color: #d2cd86;"><</span><span style="color: #d2cd86;">/</span>script<span style="color: #d2cd86;">></span>
</pre>
<br />
Para ver funcionando este código hace click <a href="http://arcanita.cl/blog/banner.php">aquí</a><br />
<br />
Gracias por leer, si te gustó déjame un comentario ^^Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-3415610225025831574.post-35040646800944673052016-12-07T10:07:00.000-08:002016-12-07T10:34:32.596-08:00Crear slider de elementos que están en la BDDHola amigos Arcanitos!<br />
En esta entrada, les mostraré como hacer un slider para mostrar, por ejemplo, productos de una página, o fotos o lo que sea.<br />
El punto es que sacaremos estos elementos desde nuestra base de datos. El resultado quedará algo así:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiee2k-K4GNyPFG6SfbXWDBoYafAXHhNFYhJGwPvWEuZfH3wUWu9He-vI0q6miPFw7vmxzwiGJZ31rgX4NlSYLRZVxhLNy9BWUFvtoesu0H0xeZ5LkhV9ElwmJKFz1RIu143z7YtnqJ0UE/s1600/fwefwefwe.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="184" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiee2k-K4GNyPFG6SfbXWDBoYafAXHhNFYhJGwPvWEuZfH3wUWu9He-vI0q6miPFw7vmxzwiGJZ31rgX4NlSYLRZVxhLNy9BWUFvtoesu0H0xeZ5LkhV9ElwmJKFz1RIu143z7YtnqJ0UE/s640/fwefwefwe.png" width="640" /></a></div>
<br />
*Nota: si no recuerdas como conectarse a una base de datos revisa <a href="https://arcanita.blogspot.cl/2016/11/como-conectarse-con-una-base-de-datos.html">este artículo</a><br />
<br />
1) Crear el <div> correspondiente para este espacio de nuestra página.<br />
2) Que al cargar la página se carguen los primeros 4 elementos<br />
3) Que al presionar las flechas se invoquen mas elementos de la base de datos y vallan mostrándose.<br />
<br />
Nuestra base de datos para el ejemplo será así:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQe6Utd42EFfx_1_Fz6zrTXZx7epRXJWN1H02_zIp6mlFFeLCedUTSZBUjhdwgMbcfr4zGzgozEs-DJ13LempXP-aSQ0cHNfYn0ALQFSMd1WS98K58_DLyz-croAsFRWLVnNuhaAbHlwU/s1600/fgggg.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="155" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQe6Utd42EFfx_1_Fz6zrTXZx7epRXJWN1H02_zIp6mlFFeLCedUTSZBUjhdwgMbcfr4zGzgozEs-DJ13LempXP-aSQ0cHNfYn0ALQFSMd1WS98K58_DLyz-croAsFRWLVnNuhaAbHlwU/s400/fgggg.png" width="400" /></a></div>
<br />
<br />
Paso 1: El HTML para el div será asi:<br />
<i><span style="font-size: xx-small;">(Nota: Es importante que en el tag <body> se debe agregar la acción "onload='cargar_slider()" para que al cargar la página se ejecute esa función. </span></i><br />
<i><span style="font-size: xx-small;">Nota 2: Es importante poner "id" a cada objeto que será usado por nuestra función javascript.)</span></i><br />
<br />
<br />
<pre style="background: #000000; color: #d1d1d1; font-size: 11px;"><span style="color: #ff8906;"><</span><span style="color: #e66170; font-weight: bold;">body</span> onload<span style="color: #d2cd86;">=</span><span style="color: #00c4c4;">"cargar_slider()"</span><span style="color: #ff8906;">></span>
<span style="color: #ff8906;"><</span><span style="color: #e66170; font-weight: bold;">div</span> style<span style="color: #d2cd86;">=</span><span style="color: #00c4c4;">"</span><span style="color: #904050;">background-color</span><span style="color: #d2cd86;">:</span><span style="color: #00a800;">#</span><span style="color: #00a800;">AED6F1</span><span style="color: #b060b0;">;</span><span style="color: #00c4c4;">"</span><span style="color: #ff8906;">></span>
<span style="color: #ff8906;"><</span><span style="color: #e66170; font-weight: bold;">div</span> id<span style="color: #d2cd86;">=</span><span style="color: #00c4c4;">"productos"</span> class<span style="color: #d2cd86;">=</span><span style="color: #00c4c4;">"productos"</span><span style="color: #ff8906;">></span>
<span style="color: #ff8906;"><</span><span style="color: #e66170; font-weight: bold;">div</span> class<span style="color: #d2cd86;">=</span><span style="color: #00c4c4;">"flecha"</span> onclick<span style="color: #d2cd86;">=</span><span style="color: #00c4c4;">"cambiar_productos('izq')"</span><span style="color: #ff8906;">></span><span style="color: #ff8906;"><</span><span style="color: #e66170; font-weight: bold;">img</span> src<span style="color: #d2cd86;">=</span><span style="color: #00c4c4;">"images/flecha_izq.png"</span><span style="color: #ff8906;">></span><span style="color: #ff8906;"></</span><span style="color: #e66170; font-weight: bold;">div</span><span style="color: #ff8906;">></span>
<span style="color: #ff8906;"><</span><span style="color: #e66170; font-weight: bold;">div</span> class<span style="color: #d2cd86;">=</span><span style="color: #00c4c4;">"producto"</span> id<span style="color: #d2cd86;">=</span><span style="color: #00c4c4;">"producto0"</span> <span style="color: #ff8906;">></span>
<span style="color: #ff8906;"><</span><span style="color: #e66170; font-weight: bold;">div</span> class<span style="color: #d2cd86;">=</span><span style="color: #00c4c4;">"producto_blanco"</span> style<span style="color: #d2cd86;">=</span><span style="color: #00c4c4;">"</span><span style="color: #904050;">cursor</span><span style="color: #d2cd86;">:</span>pointer<span style="color: #b060b0;">;</span><span style="color: #00c4c4;">"</span> <span style="color: #ff8906;">></span>
<span style="color: #ff8906;"><</span><span style="color: #e66170; font-weight: bold;">img</span> width<span style="color: #d2cd86;">=</span><span style="color: #00c4c4;">"190"</span> style<span style="color: #d2cd86;">=</span><span style="color: #00c4c4;">"</span><span style="color: #904050;">max-height</span><span style="color: #d2cd86;">:</span><span style="color: #00a800;">210</span><span style="color: #006600;">px</span><span style="color: #b060b0;">;</span><span style="color: #00c4c4;">"</span> id<span style="color: #d2cd86;">=</span><span style="color: #00c4c4;">"prod0_b"</span><span style="color: #ff8906;">></span>
<span style="color: #ff8906;"></</span><span style="color: #e66170; font-weight: bold;">div</span><span style="color: #ff8906;">></span>
<span style="color: #ff8906;"><</span><span style="color: #e66170; font-weight: bold;">div</span> class<span style="color: #d2cd86;">=</span><span style="color: #00c4c4;">"producto_abajo"</span><span style="color: #ff8906;">></span>
<span style="color: #ff8906;"><</span><span style="color: #e66170; font-weight: bold;">span</span> style<span style="color: #d2cd86;">=</span><span style="color: #00c4c4;">"</span><span style="color: #904050;">padding-top</span><span style="color: #d2cd86;">:</span><span style="color: #00a800;">20</span><span style="color: #006600;">px</span><span style="color: #b060b0;">;</span><span style="color: #00c4c4;">"</span> id<span style="color: #d2cd86;">=</span><span style="color: #00c4c4;">"prod0_a"</span><span style="color: #ff8906;">></span><span style="color: #ff8906;"></</span><span style="color: #e66170; font-weight: bold;">span</span><span style="color: #ff8906;">></span>
<span style="color: #ff8906;"></</span><span style="color: #e66170; font-weight: bold;">div</span><span style="color: #ff8906;">></span>
<span style="color: #ff8906;"></</span><span style="color: #e66170; font-weight: bold;">div</span><span style="color: #ff8906;">></span>
<span style="color: #ff8906;"><</span><span style="color: #e66170; font-weight: bold;">div</span> class<span style="color: #d2cd86;">=</span><span style="color: #00c4c4;">"producto"</span> id<span style="color: #d2cd86;">=</span><span style="color: #00c4c4;">"producto1"</span><span style="color: #ff8906;">></span>
<span style="color: #ff8906;"><</span><span style="color: #e66170; font-weight: bold;">div</span> class<span style="color: #d2cd86;">=</span><span style="color: #00c4c4;">"producto_blanco"</span> style<span style="color: #d2cd86;">=</span><span style="color: #00c4c4;">"</span><span style="color: #904050;">cursor</span><span style="color: #d2cd86;">:</span>pointer<span style="color: #b060b0;">;</span><span style="color: #00c4c4;">"</span><span style="color: #ff8906;">></span>
<span style="color: #ff8906;"><</span><span style="color: #e66170; font-weight: bold;">img</span> width<span style="color: #d2cd86;">=</span><span style="color: #00c4c4;">"190"</span> style<span style="color: #d2cd86;">=</span><span style="color: #00c4c4;">"</span><span style="color: #904050;">max-height</span><span style="color: #d2cd86;">:</span><span style="color: #00a800;">210</span><span style="color: #006600;">px</span><span style="color: #b060b0;">;</span><span style="color: #00c4c4;">"</span> id<span style="color: #d2cd86;">=</span><span style="color: #00c4c4;">"prod1_b"</span><span style="color: #ff8906;">></span>
<span style="color: #ff8906;"></</span><span style="color: #e66170; font-weight: bold;">div</span><span style="color: #ff8906;">></span>
<span style="color: #ff8906;"><</span><span style="color: #e66170; font-weight: bold;">div</span> class<span style="color: #d2cd86;">=</span><span style="color: #00c4c4;">"producto_abajo"</span><span style="color: #ff8906;">></span>
<span style="color: #ff8906;"><</span><span style="color: #e66170; font-weight: bold;">span</span> style<span style="color: #d2cd86;">=</span><span style="color: #00c4c4;">"</span><span style="color: #904050;">padding-top</span><span style="color: #d2cd86;">:</span><span style="color: #00a800;">20</span><span style="color: #006600;">px</span><span style="color: #b060b0;">;</span><span style="color: #00c4c4;">"</span> id<span style="color: #d2cd86;">=</span><span style="color: #00c4c4;">"prod1_a"</span><span style="color: #ff8906;">></span><span style="color: #ff8906;"></</span><span style="color: #e66170; font-weight: bold;">span</span><span style="color: #ff8906;">></span>
<span style="color: #ff8906;"></</span><span style="color: #e66170; font-weight: bold;">div</span><span style="color: #ff8906;">></span>
<span style="color: #ff8906;"></</span><span style="color: #e66170; font-weight: bold;">div</span><span style="color: #ff8906;">></span>
<span style="color: #ff8906;"><</span><span style="color: #e66170; font-weight: bold;">div</span> class<span style="color: #d2cd86;">=</span><span style="color: #00c4c4;">"producto"</span> id<span style="color: #d2cd86;">=</span><span style="color: #00c4c4;">"producto2"</span><span style="color: #ff8906;">></span>
<span style="color: #ff8906;"><</span><span style="color: #e66170; font-weight: bold;">div</span> class<span style="color: #d2cd86;">=</span><span style="color: #00c4c4;">"producto_blanco"</span> style<span style="color: #d2cd86;">=</span><span style="color: #00c4c4;">"</span><span style="color: #904050;">cursor</span><span style="color: #d2cd86;">:</span>pointer<span style="color: #b060b0;">;</span><span style="color: #00c4c4;">"</span> <span style="color: #ff8906;">></span>
<span style="color: #ff8906;"><</span><span style="color: #e66170; font-weight: bold;">img</span> width<span style="color: #d2cd86;">=</span><span style="color: #00c4c4;">"190"</span> style<span style="color: #d2cd86;">=</span><span style="color: #00c4c4;">"</span><span style="color: #904050;">max-height</span><span style="color: #d2cd86;">:</span><span style="color: #00a800;">210</span><span style="color: #006600;">px</span><span style="color: #b060b0;">;</span><span style="color: #00c4c4;">"</span> id<span style="color: #d2cd86;">=</span><span style="color: #00c4c4;">"prod2_b"</span><span style="color: #ff8906;">></span>
<span style="color: #ff8906;"></</span><span style="color: #e66170; font-weight: bold;">div</span><span style="color: #ff8906;">></span>
<span style="color: #ff8906;"><</span><span style="color: #e66170; font-weight: bold;">div</span> class<span style="color: #d2cd86;">=</span><span style="color: #00c4c4;">"producto_abajo"</span><span style="color: #ff8906;">></span>
<span style="color: #ff8906;"><</span><span style="color: #e66170; font-weight: bold;">span</span> style<span style="color: #d2cd86;">=</span><span style="color: #00c4c4;">"</span><span style="color: #904050;">padding-top</span><span style="color: #d2cd86;">:</span><span style="color: #00a800;">20</span><span style="color: #006600;">px</span><span style="color: #b060b0;">;</span><span style="color: #00c4c4;">"</span> id<span style="color: #d2cd86;">=</span><span style="color: #00c4c4;">"prod2_a"</span><span style="color: #ff8906;">></span><span style="color: #ff8906;"></</span><span style="color: #e66170; font-weight: bold;">span</span><span style="color: #ff8906;">></span>
<span style="color: #ff8906;"></</span><span style="color: #e66170; font-weight: bold;">div</span><span style="color: #ff8906;">></span>
<span style="color: #ff8906;"></</span><span style="color: #e66170; font-weight: bold;">div</span><span style="color: #ff8906;">></span>
<span style="color: #ff8906;"><</span><span style="color: #e66170; font-weight: bold;">div</span> class<span style="color: #d2cd86;">=</span><span style="color: #00c4c4;">"producto"</span> id<span style="color: #d2cd86;">=</span><span style="color: #00c4c4;">"producto3"</span> <span style="color: #ff8906;">></span>
<span style="color: #ff8906;"><</span><span style="color: #e66170; font-weight: bold;">div</span> class<span style="color: #d2cd86;">=</span><span style="color: #00c4c4;">"producto_blanco"</span> style<span style="color: #d2cd86;">=</span><span style="color: #00c4c4;">"</span><span style="color: #904050;">cursor</span><span style="color: #d2cd86;">:</span>pointer<span style="color: #b060b0;">;</span><span style="color: #00c4c4;">"</span><span style="color: #ff8906;">></span>
<span style="color: #ff8906;"><</span><span style="color: #e66170; font-weight: bold;">img</span> width<span style="color: #d2cd86;">=</span><span style="color: #00c4c4;">"190"</span> style<span style="color: #d2cd86;">=</span><span style="color: #00c4c4;">"</span><span style="color: #904050;">max-height</span><span style="color: #d2cd86;">:</span><span style="color: #00a800;">210</span><span style="color: #006600;">px</span><span style="color: #b060b0;">;</span><span style="color: #00c4c4;">"</span> id<span style="color: #d2cd86;">=</span><span style="color: #00c4c4;">"prod3_b"</span><span style="color: #ff8906;">></span>
<span style="color: #ff8906;"></</span><span style="color: #e66170; font-weight: bold;">div</span><span style="color: #ff8906;">></span>
<span style="color: #ff8906;"><</span><span style="color: #e66170; font-weight: bold;">div</span> class<span style="color: #d2cd86;">=</span><span style="color: #00c4c4;">"producto_abajo"</span><span style="color: #ff8906;">></span>
<span style="color: #ff8906;"><</span><span style="color: #e66170; font-weight: bold;">span</span> style<span style="color: #d2cd86;">=</span><span style="color: #00c4c4;">"</span><span style="color: #904050;">padding-top</span><span style="color: #d2cd86;">:</span><span style="color: #00a800;">20</span><span style="color: #006600;">px</span><span style="color: #b060b0;">;</span><span style="color: #00c4c4;">"</span> id<span style="color: #d2cd86;">=</span><span style="color: #00c4c4;">"prod3_a"</span><span style="color: #ff8906;">></span><span style="color: #ff8906;"></</span><span style="color: #e66170; font-weight: bold;">span</span><span style="color: #ff8906;">></span>
<span style="color: #ff8906;"></</span><span style="color: #e66170; font-weight: bold;">div</span><span style="color: #ff8906;">></span>
<span style="color: #ff8906;"></</span><span style="color: #e66170; font-weight: bold;">div</span><span style="color: #ff8906;">></span>
<span style="color: #ff8906;"><</span><span style="color: #e66170; font-weight: bold;">div</span> class <span style="color: #d2cd86;">=</span> <span style="color: #00c4c4;">"flecha"</span> onclick<span style="color: #d2cd86;">=</span><span style="color: #00c4c4;">"cambiar_productos('der')"</span><span style="color: #ff8906;">></span><span style="color: #ff8906;"><</span><span style="color: #e66170; font-weight: bold;">img</span> src<span style="color: #d2cd86;">=</span><span style="color: #00c4c4;">"images/flecha_der.png"</span><span style="color: #ff8906;">></span><span style="color: #ff8906;"></</span><span style="color: #e66170; font-weight: bold;">div</span><span style="color: #ff8906;">></span>
<span style="color: #ff8906;"></</span><span style="color: #e66170; font-weight: bold;">div</span><span style="color: #ff8906;">></span>
<span style="color: #ff8906;"></</span><span style="color: #e66170; font-weight: bold;">div</span><span style="color: #ff8906;">></span>
<span style="color: #ff8906;"></</span><span style="color: #e66170; font-weight: bold;">body</span><span style="color: #ff8906;">></span></pre>
<br />
El CSS de los estilos que usé es el siguiente:<br />
<span style="font-size: xx-small;"><i>(Nota: este pedazo de código puede estar en el mismo archivo HTML en que se encuentra el div creado anteriormente)</i></span><br />
<br />
<pre style="background: #000000; color: #d1d1d1;"><span style="color: #ff8906;"><</span><span style="color: #e66170; font-weight: bold;">style</span><span style="color: #ff8906;">></span>
<span style="color: #d2cd86;">.</span>productos<span style="color: #b060b0;">{</span>
<span style="color: #904050;">width</span><span style="color: #d2cd86;">:</span><span style="color: #00a800;">1100</span><span style="color: #006600;">px</span><span style="color: #b060b0;">;</span>
<span style="color: #904050;">height</span><span style="color: #d2cd86;">:</span><span style="color: #00a800;">350</span><span style="color: #006600;">px</span><span style="color: #b060b0;">;</span>
<span style="color: #904050;">padding-top</span><span style="color: #d2cd86;">:</span><span style="color: #00a800;">50</span><span style="color: #006600;">px</span><span style="color: #b060b0;">;</span>
<span style="color: #904050;">margin</span><span style="color: #d2cd86;">:</span>auto<span style="color: #b060b0;">;</span>
<span style="color: #904050;">font-size</span><span style="color: #d2cd86;">:</span><span style="color: #00a800;">20</span><span style="color: #006600;">px</span><span style="color: #b060b0;">;</span>
<span style="color: #904050;">text-align</span><span style="color: #d2cd86;">:</span>left<span style="color: #b060b0;">;</span>
<span style="color: #904050;">display</span><span style="color: #d2cd86;">:</span> table<span style="color: #b060b0;">;</span>
<span style="color: #b060b0;">}</span>
<span style="color: #d2cd86;">.</span>producto<span style="color: #b060b0;">{</span>
<span style="color: #904050;">width</span><span style="color: #d2cd86;">:</span> <span style="color: #00a800;">20</span><span style="color: #006600;">%</span><span style="color: #b060b0;">;</span>
<span style="color: #904050;">height</span><span style="color: #d2cd86;">:</span> <span style="color: #00a800;">220</span><span style="color: #006600;">px</span><span style="color: #b060b0;">;</span>
<span style="color: #904050;">float</span><span style="color: #d2cd86;">:</span>left<span style="color: #b060b0;">;</span>
<span style="color: #b060b0;">}</span>
<span style="color: #d2cd86;">.</span>flecha<span style="color: #b060b0;">{</span>
<span style="color: #904050;">width</span><span style="color: #d2cd86;">:</span> <span style="color: #00a800;">10</span><span style="color: #006600;">%</span><span style="color: #b060b0;">;</span>
<span style="color: #904050;">padding-top</span><span style="color: #d2cd86;">:</span><span style="color: #00a800;">100</span><span style="color: #006600;">px</span><span style="color: #b060b0;">;</span>
<span style="color: #904050;">height</span><span style="color: #d2cd86;">:</span> <span style="color: #00a800;">150</span><span style="color: #006600;">px</span><span style="color: #b060b0;">;</span>
<span style="color: #904050;">float</span><span style="color: #d2cd86;">:</span>left<span style="color: #b060b0;">;</span>
<span style="color: #904050;">vertical-align</span><span style="color: #d2cd86;">:</span>middle<span style="color: #b060b0;">;</span>
<span style="color: #904050;">text-align</span><span style="color: #d2cd86;">:</span>center<span style="color: #b060b0;">;</span>
<span style="color: #904050;">cursor</span><span style="color: #d2cd86;">:</span>pointer<span style="color: #b060b0;">;</span>
<span style="color: #b060b0;">}</span>
<span style="color: #d2cd86;">.</span>producto_blanco<span style="color: #b060b0;">{</span>
<span style="color: #904050;">width</span><span style="color: #d2cd86;">:</span> <span style="color: #00a800;">200</span><span style="color: #006600;">px</span><span style="color: #b060b0;">;</span>
<span style="color: #904050;">background-color</span><span style="color: #d2cd86;">:</span> white<span style="color: #b060b0;">;</span>
<span style="color: #904050;">text-align</span><span style="color: #d2cd86;">:</span>center<span style="color: #b060b0;">;</span>
<span style="color: #904050;">height</span><span style="color: #d2cd86;">:</span><span style="color: #00a800;">220</span><span style="color: #006600;">px</span><span style="color: #b060b0;">;</span>
<span style="color: #b060b0;">}</span>
<span style="color: #d2cd86;">.</span>producto_abajo<span style="color: #b060b0;">{</span>
<span style="color: #904050;">background-color</span><span style="color: #d2cd86;">:</span> black<span style="color: #b060b0;">;</span>
<span style="color: #904050;">height</span><span style="color: #d2cd86;">:</span> <span style="color: #00a800;">30</span><span style="color: #006600;">px</span><span style="color: #b060b0;">;</span>
<span style="color: #904050;">color</span><span style="color: #d2cd86;">:</span>white<span style="color: #b060b0;">;</span>
<span style="color: #904050;">width</span><span style="color: #d2cd86;">:</span> <span style="color: #00a800;">200</span><span style="color: #006600;">px</span><span style="color: #b060b0;">;</span>
<span style="color: #904050;">font-size</span><span style="color: #d2cd86;">:</span><span style="color: #00a800;">14</span><span style="color: #006600;">px</span><span style="color: #b060b0;">;</span>
<span style="color: #904050;">text-align</span><span style="color: #d2cd86;">:</span>center<span style="color: #b060b0;">;</span>
<span style="color: #904050;">vertical-align</span><span style="color: #d2cd86;">:</span>middle<span style="color: #b060b0;">;</span>
<span style="color: #904050;">font-weight</span><span style="color: #d2cd86;">:</span>bold<span style="color: #b060b0;">;</span>
<span style="color: #904050;">padding-top</span><span style="color: #d2cd86;">:</span><span style="color: #00a800;">10</span><span style="color: #006600;">px</span><span style="color: #b060b0;">;</span>
<span style="color: #b060b0;">}</span>
<span style="color: #ff8906;"></</span><span style="color: #e66170; font-weight: bold;">style</span><span style="color: #ff8906;">></span>
</pre>
<br />
(odio los colores del highlighter pero el que usaba antes como que murió :c )<br />
<br />
Las funciones javascript que usaremos serán "cargar slider" y "cambiar slider" la primera no recibe ni un parámetro y la segunda recibe el "lado", si derecha o izquierda.<br />
<br />
Recuerden agregar la libreria de jquery ya que lo usaremos para hacer llamadas con ajax.<br />
<br />
<span style="background-color: #f4cccc;"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script></span><br />
<br />
Las funciones script quedarán así: (Puede verse complicado pero no lo es, <b>es simple</b>, solo que queda largo porque lo haremos por la fuerza bruta XD)<br />
<br />
<br />
<br />
<pre style="background: #000000; color: #d1d1d1; font-size: 12px;"><span style="color: #e66170; font-weight: bold;">var</span> pos1<span style="color: #d2cd86;">=</span><span style="color: #008c00;">0</span><span style="color: #b060b0;">;</span>
<span style="color: #e66170; font-weight: bold;">var</span> pos2<span style="color: #d2cd86;">=</span><span style="color: #008c00;">1</span><span style="color: #b060b0;">;</span>
<span style="color: #e66170; font-weight: bold;">var</span> pos3<span style="color: #d2cd86;">=</span><span style="color: #008c00;">2</span><span style="color: #b060b0;">;</span>
<span style="color: #e66170; font-weight: bold;">var</span> pos4<span style="color: #d2cd86;">=</span><span style="color: #008c00;">3</span><span style="color: #b060b0;">;</span>
<span style="color: #e66170; font-weight: bold;">function</span> cargar_slider<span style="color: #d2cd86;">(</span><span style="color: #d2cd86;">)</span>
<span style="color: #b060b0;">{</span>
$<span style="color: #d2cd86;">.</span>post<span style="color: #d2cd86;">(</span>
<span style="color: #02d045;">"</span><span style="color: #00c4c4;">cargar_slider.php</span><span style="color: #02d045;">"</span><span style="color: #d2cd86;">,</span>
<span style="color: #b060b0;">{</span>
action<span style="color: #b060b0;">:</span><span style="color: #02d045;">"</span><span style="color: #00c4c4;">cargar_slider</span><span style="color: #02d045;">"</span>
<span style="color: #b060b0;">}</span><span style="color: #d2cd86;">,</span>
<span style="color: #e66170; font-weight: bold;">function</span><span style="color: #d2cd86;">(</span>data<span style="color: #d2cd86;">,</span> status<span style="color: #d2cd86;">)</span>
<span style="color: #b060b0;">{</span>
<span style="color: #e66170; font-weight: bold;">if</span><span style="color: #d2cd86;">(</span>status<span style="color: #d2cd86;">==</span><span style="color: #02d045;">'</span><span style="color: #00c4c4;">success</span><span style="color: #02d045;">'</span><span style="color: #d2cd86;">)</span>
<span style="color: #b060b0;">{</span>
<span style="color: #e66170; font-weight: bold;">var</span> serverresponse <span style="color: #d2cd86;">=</span> JSON<span style="color: #d2cd86;">.</span><span style="color: #e66170; font-weight: bold;">parse</span><span style="color: #d2cd86;">(</span>data<span style="color: #d2cd86;">)</span><span style="color: #b060b0;">;</span>
<span style="color: #e66170; font-weight: bold;">if</span><span style="color: #d2cd86;">(</span>serverresponse<span style="color: #d2cd86;">.</span>arreglo_id<span style="color: #d2cd86;">.</span><span style="color: #e66170; font-weight: bold;">length</span> <span style="color: #d2cd86;">!=</span> <span style="color: #008c00;">0</span><span style="color: #d2cd86;">)</span>
<span style="color: #b060b0;">{</span>
$<span style="color: #d2cd86;">(</span><span style="color: #02d045;">"</span><span style="color: #00c4c4;">#prod</span><span style="color: #02d045;">"</span><span style="color: #d2cd86;">+</span>pos1<span style="color: #d2cd86;">+</span><span style="color: #02d045;">"</span><span style="color: #00c4c4;">_b</span><span style="color: #02d045;">"</span><span style="color: #d2cd86;">)</span><span style="color: #d2cd86;">.</span>attr<span style="color: #d2cd86;">(</span><span style="color: #02d045;">"</span><span style="color: #00c4c4;">src</span><span style="color: #02d045;">"</span><span style="color: #d2cd86;">,</span> <span style="color: #02d045;">"</span><span style="color: #00c4c4;">images/</span><span style="color: #02d045;">"</span><span style="color: #d2cd86;">+</span>serverresponse<span style="color: #d2cd86;">.</span>arreglo_foto<span style="color: #d2cd86;">[</span>pos1<span style="color: #d2cd86;">]</span><span style="color: #d2cd86;">)</span><span style="color: #b060b0;">;</span>
$<span style="color: #d2cd86;">(</span><span style="color: #02d045;">"</span><span style="color: #00c4c4;">#prod</span><span style="color: #02d045;">"</span><span style="color: #d2cd86;">+</span>pos1<span style="color: #d2cd86;">+</span><span style="color: #02d045;">"</span><span style="color: #00c4c4;">_a</span><span style="color: #02d045;">"</span><span style="color: #d2cd86;">)</span><span style="color: #d2cd86;">.</span>html<span style="color: #d2cd86;">(</span>serverresponse<span style="color: #d2cd86;">.</span>arreglo_producto<span style="color: #d2cd86;">[</span>pos1<span style="color: #d2cd86;">]</span><span style="color: #d2cd86;">)</span><span style="color: #b060b0;">;</span>
$<span style="color: #d2cd86;">(</span><span style="color: #02d045;">'</span><span style="color: #00c4c4;">#producto0</span><span style="color: #02d045;">'</span><span style="color: #d2cd86;">)</span><span style="color: #d2cd86;">.</span>click<span style="color: #d2cd86;">(</span><span style="color: #e66170; font-weight: bold;">function</span><span style="color: #d2cd86;">(</span><span style="color: #d2cd86;">)</span> <span style="color: #b060b0;">{</span>
window<span style="color: #d2cd86;">.</span>location<span style="color: #d2cd86;">.</span>href<span style="color: #d2cd86;">=</span><span style="color: #02d045;">'</span><span style="color: #00c4c4;">detalle.php?producto=</span><span style="color: #02d045;">'</span><span style="color: #d2cd86;">+</span>serverresponse<span style="color: #d2cd86;">.</span>arreglo_id<span style="color: #d2cd86;">[</span>pos1<span style="color: #d2cd86;">]</span><span style="color: #d2cd86;">+</span><span style="color: #02d045;">'</span><span style="color: #02d045;">'</span><span style="color: #b060b0;">;</span>
<span style="color: #b060b0;">}</span><span style="color: #d2cd86;">)</span><span style="color: #b060b0;">;</span>
$<span style="color: #d2cd86;">(</span><span style="color: #02d045;">"</span><span style="color: #00c4c4;">#prod</span><span style="color: #02d045;">"</span><span style="color: #d2cd86;">+</span>pos2<span style="color: #d2cd86;">+</span><span style="color: #02d045;">"</span><span style="color: #00c4c4;">_b</span><span style="color: #02d045;">"</span><span style="color: #d2cd86;">)</span><span style="color: #d2cd86;">.</span>attr<span style="color: #d2cd86;">(</span><span style="color: #02d045;">"</span><span style="color: #00c4c4;">src</span><span style="color: #02d045;">"</span><span style="color: #d2cd86;">,</span> <span style="color: #02d045;">"</span><span style="color: #00c4c4;">images/</span><span style="color: #02d045;">"</span><span style="color: #d2cd86;">+</span>serverresponse<span style="color: #d2cd86;">.</span>arreglo_foto<span style="color: #d2cd86;">[</span>pos2<span style="color: #d2cd86;">]</span><span style="color: #d2cd86;">)</span><span style="color: #b060b0;">;</span>
$<span style="color: #d2cd86;">(</span><span style="color: #02d045;">"</span><span style="color: #00c4c4;">#prod</span><span style="color: #02d045;">"</span><span style="color: #d2cd86;">+</span>pos2<span style="color: #d2cd86;">+</span><span style="color: #02d045;">"</span><span style="color: #00c4c4;">_a</span><span style="color: #02d045;">"</span><span style="color: #d2cd86;">)</span><span style="color: #d2cd86;">.</span>html<span style="color: #d2cd86;">(</span>serverresponse<span style="color: #d2cd86;">.</span>arreglo_producto<span style="color: #d2cd86;">[</span>pos2<span style="color: #d2cd86;">]</span><span style="color: #d2cd86;">)</span><span style="color: #b060b0;">;</span>
$<span style="color: #d2cd86;">(</span><span style="color: #02d045;">'</span><span style="color: #00c4c4;">#producto1</span><span style="color: #02d045;">'</span><span style="color: #d2cd86;">)</span><span style="color: #d2cd86;">.</span>click<span style="color: #d2cd86;">(</span><span style="color: #e66170; font-weight: bold;">function</span><span style="color: #d2cd86;">(</span><span style="color: #d2cd86;">)</span> <span style="color: #b060b0;">{</span>
window<span style="color: #d2cd86;">.</span>location<span style="color: #d2cd86;">.</span>href<span style="color: #d2cd86;">=</span><span style="color: #02d045;">'</span><span style="color: #00c4c4;">detalle.php?producto=</span><span style="color: #02d045;">'</span><span style="color: #d2cd86;">+</span>serverresponse<span style="color: #d2cd86;">.</span>arreglo_id<span style="color: #d2cd86;">[</span>pos2<span style="color: #d2cd86;">]</span><span style="color: #d2cd86;">+</span><span style="color: #02d045;">'</span><span style="color: #02d045;">'</span><span style="color: #b060b0;">;</span>
<span style="color: #b060b0;">}</span><span style="color: #d2cd86;">)</span><span style="color: #b060b0;">;</span>
$<span style="color: #d2cd86;">(</span><span style="color: #02d045;">"</span><span style="color: #00c4c4;">#prod</span><span style="color: #02d045;">"</span><span style="color: #d2cd86;">+</span>pos3<span style="color: #d2cd86;">+</span><span style="color: #02d045;">"</span><span style="color: #00c4c4;">_b</span><span style="color: #02d045;">"</span><span style="color: #d2cd86;">)</span><span style="color: #d2cd86;">.</span>attr<span style="color: #d2cd86;">(</span><span style="color: #02d045;">"</span><span style="color: #00c4c4;">src</span><span style="color: #02d045;">"</span><span style="color: #d2cd86;">,</span> <span style="color: #02d045;">"</span><span style="color: #00c4c4;">images/</span><span style="color: #02d045;">"</span><span style="color: #d2cd86;">+</span>serverresponse<span style="color: #d2cd86;">.</span>arreglo_foto<span style="color: #d2cd86;">[</span>pos3<span style="color: #d2cd86;">]</span><span style="color: #d2cd86;">)</span><span style="color: #b060b0;">;</span>
$<span style="color: #d2cd86;">(</span><span style="color: #02d045;">"</span><span style="color: #00c4c4;">#prod</span><span style="color: #02d045;">"</span><span style="color: #d2cd86;">+</span>pos3<span style="color: #d2cd86;">+</span><span style="color: #02d045;">"</span><span style="color: #00c4c4;">_a</span><span style="color: #02d045;">"</span><span style="color: #d2cd86;">)</span><span style="color: #d2cd86;">.</span>html<span style="color: #d2cd86;">(</span>serverresponse<span style="color: #d2cd86;">.</span>arreglo_producto<span style="color: #d2cd86;">[</span>pos3<span style="color: #d2cd86;">]</span><span style="color: #d2cd86;">)</span><span style="color: #b060b0;">;</span>
$<span style="color: #d2cd86;">(</span><span style="color: #02d045;">'</span><span style="color: #00c4c4;">#producto2</span><span style="color: #02d045;">'</span><span style="color: #d2cd86;">)</span><span style="color: #d2cd86;">.</span>click<span style="color: #d2cd86;">(</span><span style="color: #e66170; font-weight: bold;">function</span><span style="color: #d2cd86;">(</span><span style="color: #d2cd86;">)</span> <span style="color: #b060b0;">{</span>
window<span style="color: #d2cd86;">.</span>location<span style="color: #d2cd86;">.</span>href<span style="color: #d2cd86;">=</span><span style="color: #02d045;">'</span><span style="color: #00c4c4;">detalle.php?producto=</span><span style="color: #02d045;">'</span><span style="color: #d2cd86;">+</span>serverresponse<span style="color: #d2cd86;">.</span>arreglo_id<span style="color: #d2cd86;">[</span>pos3<span style="color: #d2cd86;">]</span><span style="color: #d2cd86;">+</span><span style="color: #02d045;">'</span><span style="color: #02d045;">'</span><span style="color: #b060b0;">;</span>
<span style="color: #b060b0;">}</span><span style="color: #d2cd86;">)</span><span style="color: #b060b0;">;</span>
$<span style="color: #d2cd86;">(</span><span style="color: #02d045;">"</span><span style="color: #00c4c4;">#prod</span><span style="color: #02d045;">"</span><span style="color: #d2cd86;">+</span>pos4<span style="color: #d2cd86;">+</span><span style="color: #02d045;">"</span><span style="color: #00c4c4;">_b</span><span style="color: #02d045;">"</span><span style="color: #d2cd86;">)</span><span style="color: #d2cd86;">.</span>attr<span style="color: #d2cd86;">(</span><span style="color: #02d045;">"</span><span style="color: #00c4c4;">src</span><span style="color: #02d045;">"</span><span style="color: #d2cd86;">,</span> <span style="color: #02d045;">"</span><span style="color: #00c4c4;">images/</span><span style="color: #02d045;">"</span><span style="color: #d2cd86;">+</span>serverresponse<span style="color: #d2cd86;">.</span>arreglo_foto<span style="color: #d2cd86;">[</span>pos4<span style="color: #d2cd86;">]</span><span style="color: #d2cd86;">)</span><span style="color: #b060b0;">;</span>
$<span style="color: #d2cd86;">(</span><span style="color: #02d045;">"</span><span style="color: #00c4c4;">#prod</span><span style="color: #02d045;">"</span><span style="color: #d2cd86;">+</span>pos4<span style="color: #d2cd86;">+</span><span style="color: #02d045;">"</span><span style="color: #00c4c4;">_a</span><span style="color: #02d045;">"</span><span style="color: #d2cd86;">)</span><span style="color: #d2cd86;">.</span>html<span style="color: #d2cd86;">(</span>serverresponse<span style="color: #d2cd86;">.</span>arreglo_producto<span style="color: #d2cd86;">[</span>pos4<span style="color: #d2cd86;">]</span><span style="color: #d2cd86;">)</span><span style="color: #b060b0;">;</span>
$<span style="color: #d2cd86;">(</span><span style="color: #02d045;">'</span><span style="color: #00c4c4;">#producto3</span><span style="color: #02d045;">'</span><span style="color: #d2cd86;">)</span><span style="color: #d2cd86;">.</span>click<span style="color: #d2cd86;">(</span><span style="color: #e66170; font-weight: bold;">function</span><span style="color: #d2cd86;">(</span><span style="color: #d2cd86;">)</span> <span style="color: #b060b0;">{</span>
window<span style="color: #d2cd86;">.</span>location<span style="color: #d2cd86;">.</span>href<span style="color: #d2cd86;">=</span><span style="color: #02d045;">'</span><span style="color: #00c4c4;">detalle.php?producto=</span><span style="color: #02d045;">'</span><span style="color: #d2cd86;">+</span>serverresponse<span style="color: #d2cd86;">.</span>arreglo_id<span style="color: #d2cd86;">[</span>pos4<span style="color: #d2cd86;">]</span><span style="color: #d2cd86;">+</span><span style="color: #02d045;">'</span><span style="color: #02d045;">'</span><span style="color: #b060b0;">;</span>
<span style="color: #b060b0;">}</span><span style="color: #d2cd86;">)</span><span style="color: #b060b0;">;</span>
<span style="color: #b060b0;">}</span>
<span style="color: #b060b0;">}</span>
<span style="color: #b060b0;">}</span>
<span style="color: #d2cd86;">)</span><span style="color: #b060b0;">;</span>
<span style="color: #b060b0;">}</span>
<span style="color: #e66170; font-weight: bold;">function</span> cambiar_productos<span style="color: #d2cd86;">(</span>lado<span style="color: #d2cd86;">)</span>
<span style="color: #b060b0;">{</span>
$<span style="color: #d2cd86;">.</span>post<span style="color: #d2cd86;">(</span>
<span style="color: #02d045;">"</span><span style="color: #00c4c4;">cargar_slider.php</span><span style="color: #02d045;">"</span><span style="color: #d2cd86;">,</span>
<span style="color: #b060b0;">{</span>
action<span style="color: #b060b0;">:</span><span style="color: #02d045;">"</span><span style="color: #00c4c4;">cargar_slider</span><span style="color: #02d045;">"</span>
<span style="color: #b060b0;">}</span><span style="color: #d2cd86;">,</span>
<span style="color: #e66170; font-weight: bold;">function</span><span style="color: #d2cd86;">(</span>data<span style="color: #d2cd86;">,</span> status<span style="color: #d2cd86;">)</span>
<span style="color: #b060b0;">{</span>
<span style="color: #e66170; font-weight: bold;">if</span><span style="color: #d2cd86;">(</span>status<span style="color: #d2cd86;">==</span><span style="color: #02d045;">'</span><span style="color: #00c4c4;">success</span><span style="color: #02d045;">'</span><span style="color: #d2cd86;">)</span>
<span style="color: #b060b0;">{</span>
<span style="color: #9999a9;">//lo que se recibe desde "cargar_slider.php"</span>
<span style="color: #e66170; font-weight: bold;">var</span> serverresponse <span style="color: #d2cd86;">=</span> JSON<span style="color: #d2cd86;">.</span><span style="color: #e66170; font-weight: bold;">parse</span><span style="color: #d2cd86;">(</span>data<span style="color: #d2cd86;">)</span><span style="color: #b060b0;">;</span>
<span style="color: #e66170; font-weight: bold;">if</span><span style="color: #d2cd86;">(</span>lado <span style="color: #d2cd86;">==</span> <span style="color: #02d045;">'</span><span style="color: #00c4c4;">der</span><span style="color: #02d045;">'</span><span style="color: #d2cd86;">)</span>
<span style="color: #b060b0;">{</span>
<span style="color: #e66170; font-weight: bold;">if</span><span style="color: #d2cd86;">(</span>pos4 <span style="color: #d2cd86;">==</span> serverresponse<span style="color: #d2cd86;">.</span>arreglo_id<span style="color: #d2cd86;">.</span><span style="color: #e66170; font-weight: bold;">length</span><span style="color: #d2cd86;">-</span><span style="color: #008c00;">1</span><span style="color: #d2cd86;">)</span>
<span style="color: #b060b0;">{</span>
pos4<span style="color: #d2cd86;">=</span><span style="color: #008c00;">0</span><span style="color: #b060b0;">;</span>
pos3<span style="color: #d2cd86;">=</span>pos3<span style="color: #d2cd86;">+</span><span style="color: #008c00;">1</span><span style="color: #b060b0;">;</span>
pos2<span style="color: #d2cd86;">=</span>pos2<span style="color: #d2cd86;">+</span><span style="color: #008c00;">1</span><span style="color: #b060b0;">;</span>
pos1<span style="color: #d2cd86;">=</span>pos1<span style="color: #d2cd86;">+</span><span style="color: #008c00;">1</span><span style="color: #b060b0;">;</span>
<span style="color: #b060b0;">}</span>
<span style="color: #e66170; font-weight: bold;">else</span> <span style="color: #e66170; font-weight: bold;">if</span><span style="color: #d2cd86;">(</span>pos3 <span style="color: #d2cd86;">==</span> serverresponse<span style="color: #d2cd86;">.</span>arreglo_id<span style="color: #d2cd86;">.</span><span style="color: #e66170; font-weight: bold;">length</span><span style="color: #d2cd86;">-</span><span style="color: #008c00;">1</span><span style="color: #d2cd86;">)</span>
<span style="color: #b060b0;">{</span>
pos3<span style="color: #d2cd86;">=</span><span style="color: #008c00;">0</span><span style="color: #b060b0;">;</span>
pos4<span style="color: #d2cd86;">=</span>pos4<span style="color: #d2cd86;">+</span><span style="color: #008c00;">1</span><span style="color: #b060b0;">;</span>
pos2<span style="color: #d2cd86;">=</span>pos2<span style="color: #d2cd86;">+</span><span style="color: #008c00;">1</span><span style="color: #b060b0;">;</span>
pos1<span style="color: #d2cd86;">=</span>pos1<span style="color: #d2cd86;">+</span><span style="color: #008c00;">1</span><span style="color: #b060b0;">;</span>
<span style="color: #b060b0;">}</span>
<span style="color: #e66170; font-weight: bold;">else</span> <span style="color: #e66170; font-weight: bold;">if</span><span style="color: #d2cd86;">(</span>pos1 <span style="color: #d2cd86;">==</span> serverresponse<span style="color: #d2cd86;">.</span>arreglo_id<span style="color: #d2cd86;">.</span><span style="color: #e66170; font-weight: bold;">length</span><span style="color: #d2cd86;">-</span><span style="color: #008c00;">1</span><span style="color: #d2cd86;">)</span>
<span style="color: #b060b0;">{</span>
pos1<span style="color: #d2cd86;">=</span><span style="color: #008c00;">0</span><span style="color: #b060b0;">;</span>
pos4<span style="color: #d2cd86;">=</span>pos4<span style="color: #d2cd86;">+</span><span style="color: #008c00;">1</span><span style="color: #b060b0;">;</span>
pos2<span style="color: #d2cd86;">=</span>pos2<span style="color: #d2cd86;">+</span><span style="color: #008c00;">1</span><span style="color: #b060b0;">;</span>
pos3<span style="color: #d2cd86;">=</span>pos3<span style="color: #d2cd86;">+</span><span style="color: #008c00;">1</span><span style="color: #b060b0;">;</span>
<span style="color: #b060b0;">}</span>
<span style="color: #e66170; font-weight: bold;">else</span> <span style="color: #e66170; font-weight: bold;">if</span><span style="color: #d2cd86;">(</span>pos2 <span style="color: #d2cd86;">==</span> serverresponse<span style="color: #d2cd86;">.</span>arreglo_id<span style="color: #d2cd86;">.</span><span style="color: #e66170; font-weight: bold;">length</span><span style="color: #d2cd86;">-</span><span style="color: #008c00;">1</span><span style="color: #d2cd86;">)</span>
<span style="color: #b060b0;">{</span>
pos2<span style="color: #d2cd86;">=</span><span style="color: #008c00;">0</span><span style="color: #b060b0;">;</span>
pos4<span style="color: #d2cd86;">=</span>pos4<span style="color: #d2cd86;">+</span><span style="color: #008c00;">1</span><span style="color: #b060b0;">;</span>
pos3<span style="color: #d2cd86;">=</span>pos3<span style="color: #d2cd86;">+</span><span style="color: #008c00;">1</span><span style="color: #b060b0;">;</span>
pos1<span style="color: #d2cd86;">=</span>pos1<span style="color: #d2cd86;">+</span><span style="color: #008c00;">1</span><span style="color: #b060b0;">;</span>
<span style="color: #b060b0;">}</span>
<span style="color: #e66170; font-weight: bold;">else</span>
<span style="color: #b060b0;">{</span>
pos1 <span style="color: #d2cd86;">=</span> pos1<span style="color: #d2cd86;">+</span><span style="color: #008c00;">1</span><span style="color: #b060b0;">;</span>
pos2 <span style="color: #d2cd86;">=</span> pos2<span style="color: #d2cd86;">+</span><span style="color: #008c00;">1</span><span style="color: #b060b0;">;</span>
pos3 <span style="color: #d2cd86;">=</span> pos3<span style="color: #d2cd86;">+</span><span style="color: #008c00;">1</span><span style="color: #b060b0;">;</span>
pos4 <span style="color: #d2cd86;">=</span> pos4<span style="color: #d2cd86;">+</span><span style="color: #008c00;">1</span><span style="color: #b060b0;">;</span>
<span style="color: #b060b0;">}</span>
$<span style="color: #d2cd86;">(</span><span style="color: #02d045;">"</span><span style="color: #00c4c4;">#prod0_b</span><span style="color: #02d045;">"</span><span style="color: #d2cd86;">)</span><span style="color: #d2cd86;">.</span>attr<span style="color: #d2cd86;">(</span><span style="color: #02d045;">"</span><span style="color: #00c4c4;">src</span><span style="color: #02d045;">"</span><span style="color: #d2cd86;">,</span> <span style="color: #02d045;">"</span><span style="color: #00c4c4;">images/</span><span style="color: #02d045;">"</span><span style="color: #d2cd86;">+</span>serverresponse<span style="color: #d2cd86;">.</span>arreglo_foto<span style="color: #d2cd86;">[</span>pos1<span style="color: #d2cd86;">]</span><span style="color: #d2cd86;">)</span><span style="color: #b060b0;">;</span>
$<span style="color: #d2cd86;">(</span><span style="color: #02d045;">"</span><span style="color: #00c4c4;">#prod0_a</span><span style="color: #02d045;">"</span><span style="color: #d2cd86;">)</span><span style="color: #d2cd86;">.</span>html<span style="color: #d2cd86;">(</span>serverresponse<span style="color: #d2cd86;">.</span>arreglo_producto<span style="color: #d2cd86;">[</span>pos1<span style="color: #d2cd86;">]</span><span style="color: #d2cd86;">)</span><span style="color: #b060b0;">;</span>
<span style="color: #9999a9;">//agrego la funcion que al hacer click en el producto se habra su información </span>
$<span style="color: #d2cd86;">(</span><span style="color: #02d045;">'</span><span style="color: #00c4c4;">#producto0</span><span style="color: #02d045;">'</span><span style="color: #d2cd86;">)</span><span style="color: #d2cd86;">.</span>click<span style="color: #d2cd86;">(</span><span style="color: #e66170; font-weight: bold;">function</span><span style="color: #d2cd86;">(</span><span style="color: #d2cd86;">)</span> <span style="color: #b060b0;">{</span>
window<span style="color: #d2cd86;">.</span>location<span style="color: #d2cd86;">.</span>href<span style="color: #d2cd86;">=</span><span style="color: #02d045;">'</span><span style="color: #00c4c4;">detalle.php?producto=</span><span style="color: #02d045;">'</span><span style="color: #d2cd86;">+</span>serverresponse<span style="color: #d2cd86;">.</span>arreglo_id<span style="color: #d2cd86;">[</span>pos1<span style="color: #d2cd86;">]</span><span style="color: #d2cd86;">+</span><span style="color: #02d045;">'</span><span style="color: #02d045;">'</span><span style="color: #b060b0;">;</span>
<span style="color: #b060b0;">}</span><span style="color: #d2cd86;">)</span><span style="color: #b060b0;">;</span>
$<span style="color: #d2cd86;">(</span><span style="color: #02d045;">"</span><span style="color: #00c4c4;">#prod1_b</span><span style="color: #02d045;">"</span><span style="color: #d2cd86;">)</span><span style="color: #d2cd86;">.</span>attr<span style="color: #d2cd86;">(</span><span style="color: #02d045;">"</span><span style="color: #00c4c4;">src</span><span style="color: #02d045;">"</span><span style="color: #d2cd86;">,</span> <span style="color: #02d045;">"</span><span style="color: #00c4c4;">images/</span><span style="color: #02d045;">"</span><span style="color: #d2cd86;">+</span>serverresponse<span style="color: #d2cd86;">.</span>arreglo_foto<span style="color: #d2cd86;">[</span>pos2<span style="color: #d2cd86;">]</span><span style="color: #d2cd86;">)</span><span style="color: #b060b0;">;</span>
$<span style="color: #d2cd86;">(</span><span style="color: #02d045;">"</span><span style="color: #00c4c4;">#prod1_a</span><span style="color: #02d045;">"</span><span style="color: #d2cd86;">)</span><span style="color: #d2cd86;">.</span>html<span style="color: #d2cd86;">(</span>serverresponse<span style="color: #d2cd86;">.</span>arreglo_producto<span style="color: #d2cd86;">[</span>pos2<span style="color: #d2cd86;">]</span><span style="color: #d2cd86;">)</span><span style="color: #b060b0;">;</span>
$<span style="color: #d2cd86;">(</span><span style="color: #02d045;">'</span><span style="color: #00c4c4;">#producto1</span><span style="color: #02d045;">'</span><span style="color: #d2cd86;">)</span><span style="color: #d2cd86;">.</span>click<span style="color: #d2cd86;">(</span><span style="color: #e66170; font-weight: bold;">function</span><span style="color: #d2cd86;">(</span><span style="color: #d2cd86;">)</span> <span style="color: #b060b0;">{</span>
window<span style="color: #d2cd86;">.</span>location<span style="color: #d2cd86;">.</span>href<span style="color: #d2cd86;">=</span><span style="color: #02d045;">'</span><span style="color: #00c4c4;">detalle.php?producto=</span><span style="color: #02d045;">'</span><span style="color: #d2cd86;">+</span>serverresponse<span style="color: #d2cd86;">.</span>arreglo_id<span style="color: #d2cd86;">[</span>pos2<span style="color: #d2cd86;">]</span><span style="color: #d2cd86;">+</span><span style="color: #02d045;">'</span><span style="color: #02d045;">'</span><span style="color: #b060b0;">;</span>
<span style="color: #b060b0;">}</span><span style="color: #d2cd86;">)</span><span style="color: #b060b0;">;</span>
$<span style="color: #d2cd86;">(</span><span style="color: #02d045;">"</span><span style="color: #00c4c4;">#prod2_b</span><span style="color: #02d045;">"</span><span style="color: #d2cd86;">)</span><span style="color: #d2cd86;">.</span>attr<span style="color: #d2cd86;">(</span><span style="color: #02d045;">"</span><span style="color: #00c4c4;">src</span><span style="color: #02d045;">"</span><span style="color: #d2cd86;">,</span> <span style="color: #02d045;">"</span><span style="color: #00c4c4;">images/</span><span style="color: #02d045;">"</span><span style="color: #d2cd86;">+</span>serverresponse<span style="color: #d2cd86;">.</span>arreglo_foto<span style="color: #d2cd86;">[</span>pos3<span style="color: #d2cd86;">]</span><span style="color: #d2cd86;">)</span><span style="color: #b060b0;">;</span>
$<span style="color: #d2cd86;">(</span><span style="color: #02d045;">"</span><span style="color: #00c4c4;">#prod2_a</span><span style="color: #02d045;">"</span><span style="color: #d2cd86;">)</span><span style="color: #d2cd86;">.</span>html<span style="color: #d2cd86;">(</span>serverresponse<span style="color: #d2cd86;">.</span>arreglo_producto<span style="color: #d2cd86;">[</span>pos3<span style="color: #d2cd86;">]</span><span style="color: #d2cd86;">)</span><span style="color: #b060b0;">;</span>
$<span style="color: #d2cd86;">(</span><span style="color: #02d045;">'</span><span style="color: #00c4c4;">#producto2</span><span style="color: #02d045;">'</span><span style="color: #d2cd86;">)</span><span style="color: #d2cd86;">.</span>click<span style="color: #d2cd86;">(</span><span style="color: #e66170; font-weight: bold;">function</span><span style="color: #d2cd86;">(</span><span style="color: #d2cd86;">)</span> <span style="color: #b060b0;">{</span>
window<span style="color: #d2cd86;">.</span>location<span style="color: #d2cd86;">.</span>href<span style="color: #d2cd86;">=</span><span style="color: #02d045;">'</span><span style="color: #00c4c4;">detalle.php?producto=</span><span style="color: #02d045;">'</span><span style="color: #d2cd86;">+</span>serverresponse<span style="color: #d2cd86;">.</span>arreglo_id<span style="color: #d2cd86;">[</span>pos3<span style="color: #d2cd86;">]</span><span style="color: #d2cd86;">+</span><span style="color: #02d045;">'</span><span style="color: #02d045;">'</span><span style="color: #b060b0;">;</span>
<span style="color: #b060b0;">}</span><span style="color: #d2cd86;">)</span><span style="color: #b060b0;">;</span>
$<span style="color: #d2cd86;">(</span><span style="color: #02d045;">"</span><span style="color: #00c4c4;">#prod3_b</span><span style="color: #02d045;">"</span><span style="color: #d2cd86;">)</span><span style="color: #d2cd86;">.</span>attr<span style="color: #d2cd86;">(</span><span style="color: #02d045;">"</span><span style="color: #00c4c4;">src</span><span style="color: #02d045;">"</span><span style="color: #d2cd86;">,</span> <span style="color: #02d045;">"</span><span style="color: #00c4c4;">images/</span><span style="color: #02d045;">"</span><span style="color: #d2cd86;">+</span>serverresponse<span style="color: #d2cd86;">.</span>arreglo_foto<span style="color: #d2cd86;">[</span>pos4<span style="color: #d2cd86;">]</span><span style="color: #d2cd86;">)</span><span style="color: #b060b0;">;</span>
$<span style="color: #d2cd86;">(</span><span style="color: #02d045;">"</span><span style="color: #00c4c4;">#prod3_a</span><span style="color: #02d045;">"</span><span style="color: #d2cd86;">)</span><span style="color: #d2cd86;">.</span>html<span style="color: #d2cd86;">(</span>serverresponse<span style="color: #d2cd86;">.</span>arreglo_producto<span style="color: #d2cd86;">[</span>pos4<span style="color: #d2cd86;">]</span><span style="color: #d2cd86;">)</span><span style="color: #b060b0;">;</span>
$<span style="color: #d2cd86;">(</span><span style="color: #02d045;">'</span><span style="color: #00c4c4;">#producto3</span><span style="color: #02d045;">'</span><span style="color: #d2cd86;">)</span><span style="color: #d2cd86;">.</span>click<span style="color: #d2cd86;">(</span><span style="color: #e66170; font-weight: bold;">function</span><span style="color: #d2cd86;">(</span><span style="color: #d2cd86;">)</span> <span style="color: #b060b0;">{</span>
window<span style="color: #d2cd86;">.</span>location<span style="color: #d2cd86;">.</span>href<span style="color: #d2cd86;">=</span><span style="color: #02d045;">'</span><span style="color: #00c4c4;">detalle.php?producto=</span><span style="color: #02d045;">'</span><span style="color: #d2cd86;">+</span>serverresponse<span style="color: #d2cd86;">.</span>arreglo_id<span style="color: #d2cd86;">[</span>pos4<span style="color: #d2cd86;">]</span><span style="color: #d2cd86;">+</span><span style="color: #02d045;">'</span><span style="color: #02d045;">'</span><span style="color: #b060b0;">;</span>
<span style="color: #b060b0;">}</span><span style="color: #d2cd86;">)</span><span style="color: #b060b0;">;</span>
<span style="color: #b060b0;">}</span>
<span style="color: #e66170; font-weight: bold;">if</span><span style="color: #d2cd86;">(</span>lado <span style="color: #d2cd86;">==</span> <span style="color: #02d045;">'</span><span style="color: #00c4c4;">izq</span><span style="color: #02d045;">'</span><span style="color: #d2cd86;">)</span>
<span style="color: #b060b0;">{</span>
<span style="color: #e66170; font-weight: bold;">if</span><span style="color: #d2cd86;">(</span>pos1 <span style="color: #d2cd86;">==</span> <span style="color: #008c00;">0</span><span style="color: #d2cd86;">)</span>
<span style="color: #b060b0;">{</span>
pos1<span style="color: #d2cd86;">=</span>serverresponse<span style="color: #d2cd86;">.</span>arreglo_id<span style="color: #d2cd86;">.</span><span style="color: #e66170; font-weight: bold;">length</span><span style="color: #d2cd86;">-</span><span style="color: #008c00;">1</span><span style="color: #b060b0;">;</span>
pos3<span style="color: #d2cd86;">=</span>pos3<span style="color: #d2cd86;">-</span><span style="color: #008c00;">1</span><span style="color: #b060b0;">;</span>
pos2<span style="color: #d2cd86;">=</span>pos2<span style="color: #d2cd86;">-</span><span style="color: #008c00;">1</span><span style="color: #b060b0;">;</span>
pos4<span style="color: #d2cd86;">=</span>pos4<span style="color: #d2cd86;">-</span><span style="color: #008c00;">1</span><span style="color: #b060b0;">;</span>
<span style="color: #b060b0;">}</span>
<span style="color: #e66170; font-weight: bold;">else</span> <span style="color: #e66170; font-weight: bold;">if</span><span style="color: #d2cd86;">(</span>pos2 <span style="color: #d2cd86;">==</span> <span style="color: #008c00;">0</span><span style="color: #d2cd86;">)</span>
<span style="color: #b060b0;">{</span>
pos2<span style="color: #d2cd86;">=</span>serverresponse<span style="color: #d2cd86;">.</span>arreglo_id<span style="color: #d2cd86;">.</span><span style="color: #e66170; font-weight: bold;">length</span><span style="color: #d2cd86;">-</span><span style="color: #008c00;">1</span><span style="color: #b060b0;">;</span>
pos3<span style="color: #d2cd86;">=</span>pos3<span style="color: #d2cd86;">-</span><span style="color: #008c00;">1</span><span style="color: #b060b0;">;</span>
pos4<span style="color: #d2cd86;">=</span>pos4<span style="color: #d2cd86;">-</span><span style="color: #008c00;">1</span><span style="color: #b060b0;">;</span>
pos1<span style="color: #d2cd86;">=</span>pos1<span style="color: #d2cd86;">-</span><span style="color: #008c00;">1</span><span style="color: #b060b0;">;</span>
<span style="color: #b060b0;">}</span>
<span style="color: #e66170; font-weight: bold;">else</span> <span style="color: #e66170; font-weight: bold;">if</span><span style="color: #d2cd86;">(</span>pos3 <span style="color: #d2cd86;">==</span> <span style="color: #008c00;">0</span><span style="color: #d2cd86;">)</span>
<span style="color: #b060b0;">{</span>
pos3<span style="color: #d2cd86;">=</span>serverresponse<span style="color: #d2cd86;">.</span>arreglo_id<span style="color: #d2cd86;">.</span><span style="color: #e66170; font-weight: bold;">length</span><span style="color: #d2cd86;">-</span><span style="color: #008c00;">1</span><span style="color: #b060b0;">;</span>
pos1<span style="color: #d2cd86;">=</span>pos1<span style="color: #d2cd86;">-</span><span style="color: #008c00;">1</span><span style="color: #b060b0;">;</span>
pos2<span style="color: #d2cd86;">=</span>pos2<span style="color: #d2cd86;">-</span><span style="color: #008c00;">1</span><span style="color: #b060b0;">;</span>
pos4<span style="color: #d2cd86;">=</span>pos4<span style="color: #d2cd86;">-</span><span style="color: #008c00;">1</span><span style="color: #b060b0;">;</span>
<span style="color: #b060b0;">}</span>
<span style="color: #e66170; font-weight: bold;">else</span> <span style="color: #e66170; font-weight: bold;">if</span><span style="color: #d2cd86;">(</span>pos4 <span style="color: #d2cd86;">==</span> <span style="color: #008c00;">0</span><span style="color: #d2cd86;">)</span>
<span style="color: #b060b0;">{</span>
pos4<span style="color: #d2cd86;">=</span>serverresponse<span style="color: #d2cd86;">.</span>arreglo_id<span style="color: #d2cd86;">.</span><span style="color: #e66170; font-weight: bold;">length</span><span style="color: #d2cd86;">-</span><span style="color: #008c00;">1</span><span style="color: #b060b0;">;</span>
pos3<span style="color: #d2cd86;">=</span>pos3<span style="color: #d2cd86;">-</span><span style="color: #008c00;">1</span><span style="color: #b060b0;">;</span>
pos2<span style="color: #d2cd86;">=</span>pos2<span style="color: #d2cd86;">-</span><span style="color: #008c00;">1</span><span style="color: #b060b0;">;</span>
pos1<span style="color: #d2cd86;">=</span>pos1<span style="color: #d2cd86;">-</span><span style="color: #008c00;">1</span><span style="color: #b060b0;">;</span>
<span style="color: #b060b0;">}</span>
<span style="color: #e66170; font-weight: bold;">else</span>
<span style="color: #b060b0;">{</span>
pos1 <span style="color: #d2cd86;">=</span> pos1<span style="color: #d2cd86;">-</span><span style="color: #008c00;">1</span><span style="color: #b060b0;">;</span>
pos2 <span style="color: #d2cd86;">=</span> pos2<span style="color: #d2cd86;">-</span><span style="color: #008c00;">1</span><span style="color: #b060b0;">;</span>
pos3 <span style="color: #d2cd86;">=</span> pos3<span style="color: #d2cd86;">-</span><span style="color: #008c00;">1</span><span style="color: #b060b0;">;</span>
pos4 <span style="color: #d2cd86;">=</span> pos4<span style="color: #d2cd86;">-</span><span style="color: #008c00;">1</span><span style="color: #b060b0;">;</span>
<span style="color: #b060b0;">}</span>
$<span style="color: #d2cd86;">(</span><span style="color: #02d045;">"</span><span style="color: #00c4c4;">#prod0_b</span><span style="color: #02d045;">"</span><span style="color: #d2cd86;">)</span><span style="color: #d2cd86;">.</span>attr<span style="color: #d2cd86;">(</span><span style="color: #02d045;">"</span><span style="color: #00c4c4;">src</span><span style="color: #02d045;">"</span><span style="color: #d2cd86;">,</span> <span style="color: #02d045;">"</span><span style="color: #00c4c4;">images/</span><span style="color: #02d045;">"</span><span style="color: #d2cd86;">+</span>serverresponse<span style="color: #d2cd86;">.</span>arreglo_foto<span style="color: #d2cd86;">[</span>pos1<span style="color: #d2cd86;">]</span><span style="color: #d2cd86;">)</span><span style="color: #b060b0;">;</span>
$<span style="color: #d2cd86;">(</span><span style="color: #02d045;">"</span><span style="color: #00c4c4;">#prod0_a</span><span style="color: #02d045;">"</span><span style="color: #d2cd86;">)</span><span style="color: #d2cd86;">.</span>html<span style="color: #d2cd86;">(</span>serverresponse<span style="color: #d2cd86;">.</span>arreglo_producto<span style="color: #d2cd86;">[</span>pos1<span style="color: #d2cd86;">]</span><span style="color: #d2cd86;">)</span><span style="color: #b060b0;">;</span>
$<span style="color: #d2cd86;">(</span><span style="color: #02d045;">'</span><span style="color: #00c4c4;">#producto0</span><span style="color: #02d045;">'</span><span style="color: #d2cd86;">)</span><span style="color: #d2cd86;">.</span>click<span style="color: #d2cd86;">(</span><span style="color: #e66170; font-weight: bold;">function</span><span style="color: #d2cd86;">(</span><span style="color: #d2cd86;">)</span> <span style="color: #b060b0;">{</span>
window<span style="color: #d2cd86;">.</span>location<span style="color: #d2cd86;">.</span>href<span style="color: #d2cd86;">=</span><span style="color: #02d045;">'</span><span style="color: #00c4c4;">index.php?id=detalle&producto=</span><span style="color: #02d045;">'</span><span style="color: #d2cd86;">+</span>serverresponse<span style="color: #d2cd86;">.</span>arreglo_id<span style="color: #d2cd86;">[</span>pos1<span style="color: #d2cd86;">]</span><span style="color: #d2cd86;">+</span><span style="color: #02d045;">'</span><span style="color: #02d045;">'</span><span style="color: #b060b0;">;</span>
<span style="color: #b060b0;">}</span><span style="color: #d2cd86;">)</span><span style="color: #b060b0;">;</span>
$<span style="color: #d2cd86;">(</span><span style="color: #02d045;">"</span><span style="color: #00c4c4;">#prod1_b</span><span style="color: #02d045;">"</span><span style="color: #d2cd86;">)</span><span style="color: #d2cd86;">.</span>attr<span style="color: #d2cd86;">(</span><span style="color: #02d045;">"</span><span style="color: #00c4c4;">src</span><span style="color: #02d045;">"</span><span style="color: #d2cd86;">,</span> <span style="color: #02d045;">"</span><span style="color: #00c4c4;">images/</span><span style="color: #02d045;">"</span><span style="color: #d2cd86;">+</span>serverresponse<span style="color: #d2cd86;">.</span>arreglo_foto<span style="color: #d2cd86;">[</span>pos2<span style="color: #d2cd86;">]</span><span style="color: #d2cd86;">)</span><span style="color: #b060b0;">;</span>
$<span style="color: #d2cd86;">(</span><span style="color: #02d045;">"</span><span style="color: #00c4c4;">#prod1_a</span><span style="color: #02d045;">"</span><span style="color: #d2cd86;">)</span><span style="color: #d2cd86;">.</span>html<span style="color: #d2cd86;">(</span>serverresponse<span style="color: #d2cd86;">.</span>arreglo_producto<span style="color: #d2cd86;">[</span>pos2<span style="color: #d2cd86;">]</span><span style="color: #d2cd86;">)</span><span style="color: #b060b0;">;</span>
$<span style="color: #d2cd86;">(</span><span style="color: #02d045;">'</span><span style="color: #00c4c4;">#producto1</span><span style="color: #02d045;">'</span><span style="color: #d2cd86;">)</span><span style="color: #d2cd86;">.</span>click<span style="color: #d2cd86;">(</span><span style="color: #e66170; font-weight: bold;">function</span><span style="color: #d2cd86;">(</span><span style="color: #d2cd86;">)</span> <span style="color: #b060b0;">{</span>
window<span style="color: #d2cd86;">.</span>location<span style="color: #d2cd86;">.</span>href<span style="color: #d2cd86;">=</span><span style="color: #02d045;">'</span><span style="color: #00c4c4;">index.php?id=detalle&producto=</span><span style="color: #02d045;">'</span><span style="color: #d2cd86;">+</span>serverresponse<span style="color: #d2cd86;">.</span>arreglo_id<span style="color: #d2cd86;">[</span>pos2<span style="color: #d2cd86;">]</span><span style="color: #d2cd86;">+</span><span style="color: #02d045;">'</span><span style="color: #02d045;">'</span><span style="color: #b060b0;">;</span>
<span style="color: #b060b0;">}</span><span style="color: #d2cd86;">)</span><span style="color: #b060b0;">;</span>
$<span style="color: #d2cd86;">(</span><span style="color: #02d045;">"</span><span style="color: #00c4c4;">#prod2_b</span><span style="color: #02d045;">"</span><span style="color: #d2cd86;">)</span><span style="color: #d2cd86;">.</span>attr<span style="color: #d2cd86;">(</span><span style="color: #02d045;">"</span><span style="color: #00c4c4;">src</span><span style="color: #02d045;">"</span><span style="color: #d2cd86;">,</span> <span style="color: #02d045;">"</span><span style="color: #00c4c4;">images/</span><span style="color: #02d045;">"</span><span style="color: #d2cd86;">+</span>serverresponse<span style="color: #d2cd86;">.</span>arreglo_foto<span style="color: #d2cd86;">[</span>pos3<span style="color: #d2cd86;">]</span><span style="color: #d2cd86;">)</span><span style="color: #b060b0;">;</span>
$<span style="color: #d2cd86;">(</span><span style="color: #02d045;">"</span><span style="color: #00c4c4;">#prod2_a</span><span style="color: #02d045;">"</span><span style="color: #d2cd86;">)</span><span style="color: #d2cd86;">.</span>html<span style="color: #d2cd86;">(</span>serverresponse<span style="color: #d2cd86;">.</span>arreglo_producto<span style="color: #d2cd86;">[</span>pos3<span style="color: #d2cd86;">]</span><span style="color: #d2cd86;">)</span><span style="color: #b060b0;">;</span>
$<span style="color: #d2cd86;">(</span><span style="color: #02d045;">'</span><span style="color: #00c4c4;">#producto2</span><span style="color: #02d045;">'</span><span style="color: #d2cd86;">)</span><span style="color: #d2cd86;">.</span>click<span style="color: #d2cd86;">(</span><span style="color: #e66170; font-weight: bold;">function</span><span style="color: #d2cd86;">(</span><span style="color: #d2cd86;">)</span> <span style="color: #b060b0;">{</span>
window<span style="color: #d2cd86;">.</span>location<span style="color: #d2cd86;">.</span>href<span style="color: #d2cd86;">=</span><span style="color: #02d045;">'</span><span style="color: #00c4c4;">index.php?id=detalle&producto=</span><span style="color: #02d045;">'</span><span style="color: #d2cd86;">+</span>serverresponse<span style="color: #d2cd86;">.</span>arreglo_id<span style="color: #d2cd86;">[</span>pos3<span style="color: #d2cd86;">]</span><span style="color: #d2cd86;">+</span><span style="color: #02d045;">'</span><span style="color: #02d045;">'</span><span style="color: #b060b0;">;</span>
<span style="color: #b060b0;">}</span><span style="color: #d2cd86;">)</span><span style="color: #b060b0;">;</span>
$<span style="color: #d2cd86;">(</span><span style="color: #02d045;">"</span><span style="color: #00c4c4;">#prod3_b</span><span style="color: #02d045;">"</span><span style="color: #d2cd86;">)</span><span style="color: #d2cd86;">.</span>attr<span style="color: #d2cd86;">(</span><span style="color: #02d045;">"</span><span style="color: #00c4c4;">src</span><span style="color: #02d045;">"</span><span style="color: #d2cd86;">,</span> <span style="color: #02d045;">"</span><span style="color: #00c4c4;">images/</span><span style="color: #02d045;">"</span><span style="color: #d2cd86;">+</span>serverresponse<span style="color: #d2cd86;">.</span>arreglo_foto<span style="color: #d2cd86;">[</span>pos4<span style="color: #d2cd86;">]</span><span style="color: #d2cd86;">)</span><span style="color: #b060b0;">;</span>
$<span style="color: #d2cd86;">(</span><span style="color: #02d045;">"</span><span style="color: #00c4c4;">#prod3_a</span><span style="color: #02d045;">"</span><span style="color: #d2cd86;">)</span><span style="color: #d2cd86;">.</span>html<span style="color: #d2cd86;">(</span>serverresponse<span style="color: #d2cd86;">.</span>arreglo_producto<span style="color: #d2cd86;">[</span>pos4<span style="color: #d2cd86;">]</span><span style="color: #d2cd86;">)</span><span style="color: #b060b0;">;</span>
$<span style="color: #d2cd86;">(</span><span style="color: #02d045;">'</span><span style="color: #00c4c4;">#producto3</span><span style="color: #02d045;">'</span><span style="color: #d2cd86;">)</span><span style="color: #d2cd86;">.</span>click<span style="color: #d2cd86;">(</span><span style="color: #e66170; font-weight: bold;">function</span><span style="color: #d2cd86;">(</span><span style="color: #d2cd86;">)</span> <span style="color: #b060b0;">{</span>
window<span style="color: #d2cd86;">.</span>location<span style="color: #d2cd86;">.</span>href<span style="color: #d2cd86;">=</span><span style="color: #02d045;">'</span><span style="color: #00c4c4;">index.php?id=detalle&producto=</span><span style="color: #02d045;">'</span><span style="color: #d2cd86;">+</span>serverresponse<span style="color: #d2cd86;">.</span>arreglo_id<span style="color: #d2cd86;">[</span>pos4<span style="color: #d2cd86;">]</span><span style="color: #d2cd86;">+</span><span style="color: #02d045;">'</span><span style="color: #02d045;">'</span><span style="color: #b060b0;">;</span>
<span style="color: #b060b0;">}</span><span style="color: #d2cd86;">)</span><span style="color: #b060b0;">;</span>
<span style="color: #b060b0;">}</span>
<span style="color: #b060b0;">}</span>
<span style="color: #b060b0;">}</span>
<span style="color: #d2cd86;">)</span><span style="color: #b060b0;">;</span>
<span style="color: #b060b0;">}</span>
</pre>
<br />
<br />
3) El archivo que procesará la respuesta de estas funciones anteriores, es decir "cargar_slider.php", será de la siguiente forma:<br />
<span style="font-size: xx-small;"><i>(Nota: "json_encode" lo uso como forma de enviar de forma ordenada los arreglos que enviaré de vuelta como respuesta.)</i></span><br />
<br />
<br />
<pre style="background: #000000; color: #d1d1d1; font-size: 11px;"><span style="background: #281800; color: #f6c1d0;"><?php</span><span style="background: #281800; color: white;"></span>
<span style="background: #281800; color: #e66170; font-weight: bold;">include</span><span style="background: #281800; color: #d2cd86;">(</span><span style="background: #281800; color: #00c4c4;">"config.php"</span><span style="background: #281800; color: #d2cd86;">)</span><span style="background: #281800; color: #b060b0;">;</span><span style="background: #281800; color: white;"></span>
<span style="background: #281800; color: white;"></span>
<span style="background: #281800; color: white;">$action</span><span style="background: #281800; color: white;"> </span><span style="background: #281800; color: #d2cd86;">=</span><span style="background: #281800; color: white;"> </span><span style="background: #281800; color: white;">$_POST</span><span style="background: #281800; color: #d2cd86;">[</span><span style="background: #281800; color: #00c4c4;">'action'</span><span style="background: #281800; color: #d2cd86;">]</span><span style="background: #281800; color: #b060b0;">;</span><span style="background: #281800; color: white;"></span>
<span style="background: #281800; color: #e66170; font-weight: bold;">if</span><span style="background: #281800; color: #d2cd86;">(</span><span style="background: #281800; color: white;">$action</span><span style="background: #281800; color: white;"> </span><span style="background: #281800; color: #d2cd86;">=</span><span style="background: #281800; color: #d2cd86;">=</span><span style="background: #281800; color: white;"> </span><span style="background: #281800; color: #00c4c4;">"cargar_slider"</span><span style="background: #281800; color: #d2cd86;">)</span><span style="background: #281800; color: white;"></span>
<span style="background: #281800; color: #b060b0;">{</span><span style="background: #281800; color: white;"></span>
<span style="background: #281800; color: white;"> </span><span style="background: #281800; color: white;">$arreglo_foto</span><span style="background: #281800; color: white;"> </span><span style="background: #281800; color: #d2cd86;">=</span><span style="background: #281800; color: white;"> </span><span style="background: #281800; color: #e66170; font-weight: bold;">Array</span><span style="background: #281800; color: #d2cd86;">(</span><span style="background: #281800; color: #d2cd86;">)</span><span style="background: #281800; color: #b060b0;">;</span><span style="background: #281800; color: white;"></span>
<span style="background: #281800; color: white;"> </span><span style="background: #281800; color: white;">$arreglo_id</span><span style="background: #281800; color: white;"> </span><span style="background: #281800; color: #d2cd86;">=</span><span style="background: #281800; color: white;"> </span><span style="background: #281800; color: #e66170; font-weight: bold;">Array</span><span style="background: #281800; color: #d2cd86;">(</span><span style="background: #281800; color: #d2cd86;">)</span><span style="background: #281800; color: #b060b0;">;</span><span style="background: #281800; color: white;"></span>
<span style="background: #281800; color: white;"> </span><span style="background: #281800; color: white;">$arreglo_producto</span><span style="background: #281800; color: white;"> </span><span style="background: #281800; color: #d2cd86;">=</span><span style="background: #281800; color: white;"> </span><span style="background: #281800; color: #e66170; font-weight: bold;">Array</span><span style="background: #281800; color: #d2cd86;">(</span><span style="background: #281800; color: #d2cd86;">)</span><span style="background: #281800; color: #b060b0;">;</span><span style="background: #281800; color: white;"></span>
<span style="background: #281800; color: white;"> </span><span style="background: #281800; color: white;">$arreglo_id</span><span style="background: #281800; color: white;"> </span><span style="background: #281800; color: #d2cd86;">=</span><span style="background: #281800; color: white;"> </span><span style="background: #281800; color: #e66170; font-weight: bold;">Array</span><span style="background: #281800; color: #d2cd86;">(</span><span style="background: #281800; color: #d2cd86;">)</span><span style="background: #281800; color: #b060b0;">;</span><span style="background: #281800; color: white;"></span>
<span style="background: #281800; color: white;"> </span><span style="background: #281800; color: white;">$sql</span><span style="background: #281800; color: white;"> </span><span style="background: #281800; color: #d2cd86;">=</span><span style="background: #281800; color: white;"> </span><span style="background: #281800; color: #e66170; font-weight: bold;">mysqli_query</span><span style="background: #281800; color: #d2cd86;">(</span><span style="background: #281800; color: white;">$link</span><span style="background: #281800; color: #d2cd86;">,</span><span style="background: #281800; color: white;"> </span><span style="background: #281800; color: #00c4c4;">"select * from Productos"</span><span style="background: #281800; color: #d2cd86;">)</span><span style="background: #281800; color: #b060b0;">;</span><span style="background: #281800; color: white;"></span>
<span style="background: #281800; color: white;"> </span><span style="background: #281800; color: #e66170; font-weight: bold;">while</span><span style="background: #281800; color: #d2cd86;">(</span><span style="background: #281800; color: white;">$row</span><span style="background: #281800; color: white;"> </span><span style="background: #281800; color: #d2cd86;">=</span><span style="background: #281800; color: white;"> </span><span style="background: #281800; color: #e66170; font-weight: bold;">mysqli_fetch_array</span><span style="background: #281800; color: #d2cd86;">(</span><span style="background: #281800; color: white;">$sql</span><span style="background: #281800; color: #d2cd86;">)</span><span style="background: #281800; color: #d2cd86;">)</span><span style="background: #281800; color: white;"></span>
<span style="background: #281800; color: white;"> </span><span style="background: #281800; color: #b060b0;">{</span><span style="background: #281800; color: white;"></span>
<span style="background: #281800; color: white;"> </span><span style="background: #281800; color: #e66170; font-weight: bold;">array_push</span><span style="background: #281800; color: #d2cd86;">(</span><span style="background: #281800; color: white;">$arreglo_foto</span><span style="background: #281800; color: #d2cd86;">,</span><span style="background: #281800; color: white;"> </span><span style="background: #281800; color: white;">$row</span><span style="background: #281800; color: #d2cd86;">[</span><span style="background: #281800; color: #00c4c4;">'foto'</span><span style="background: #281800; color: #d2cd86;">]</span><span style="background: #281800; color: #d2cd86;">)</span><span style="background: #281800; color: #b060b0;">;</span><span style="background: #281800; color: white;"></span>
<span style="background: #281800; color: white;"> </span><span style="background: #281800; color: #e66170; font-weight: bold;">array_push</span><span style="background: #281800; color: #d2cd86;">(</span><span style="background: #281800; color: white;">$arreglo_id</span><span style="background: #281800; color: #d2cd86;">,</span><span style="background: #281800; color: white;"> </span><span style="background: #281800; color: white;">$row</span><span style="background: #281800; color: #d2cd86;">[</span><span style="background: #281800; color: #00c4c4;">'id_producto'</span><span style="background: #281800; color: #d2cd86;">]</span><span style="background: #281800; color: #d2cd86;">)</span><span style="background: #281800; color: #b060b0;">;</span><span style="background: #281800; color: white;"></span>
<span style="background: #281800; color: white;"> </span><span style="background: #281800; color: #e66170; font-weight: bold;">array_push</span><span style="background: #281800; color: #d2cd86;">(</span><span style="background: #281800; color: white;">$arreglo_producto</span><span style="background: #281800; color: #d2cd86;">,</span><span style="background: #281800; color: white;"> </span><span style="background: #281800; color: white;">$row</span><span style="background: #281800; color: #d2cd86;">[</span><span style="background: #281800; color: #00c4c4;">'producto'</span><span style="background: #281800; color: #d2cd86;">]</span><span style="background: #281800; color: #d2cd86;">)</span><span style="background: #281800; color: #b060b0;">;</span><span style="background: #281800; color: white;"></span>
<span style="background: #281800; color: white;"> </span><span style="background: #281800; color: #b060b0;">}</span><span style="background: #281800; color: white;"></span>
<span style="background: #281800; color: white;"> </span><span style="background: #281800; color: white;">$json</span><span style="background: #281800; color: white;"> </span><span style="background: #281800; color: #d2cd86;">=</span><span style="background: #281800; color: white;"> </span><span style="background: #281800; color: #e66170; font-weight: bold;">array</span><span style="background: #281800; color: #d2cd86;">(</span><span style="background: #281800; color: #00c4c4;">'arreglo_foto'</span><span style="background: #281800; color: white;"> </span><span style="background: #281800; color: #d2cd86;">=</span><span style="background: #281800; color: #d2cd86;">></span><span style="background: #281800; color: white;"> </span><span style="background: #281800; color: white;">$arreglo_foto</span><span style="background: #281800; color: #d2cd86;">,</span><span style="background: #281800; color: white;"> </span><span style="background: #281800; color: #00c4c4;">'arreglo_id'</span><span style="background: #281800; color: white;"> </span><span style="background: #281800; color: #d2cd86;">=</span><span style="background: #281800; color: #d2cd86;">></span><span style="background: #281800; color: white;"> </span><span style="background: #281800; color: white;">$arreglo_id</span><span style="background: #281800; color: #d2cd86;">,</span><span style="background: #281800; color: white;"> </span><span style="background: #281800; color: #00c4c4;">'arreglo_producto'</span><span style="background: #281800; color: white;"> </span><span style="background: #281800; color: #d2cd86;">=</span><span style="background: #281800; color: #d2cd86;">></span><span style="background: #281800; color: white;"> </span><span style="background: #281800; color: white;">$arreglo_producto</span><span style="background: #281800; color: white;"> </span><span style="background: #281800; color: #d2cd86;">)</span><span style="background: #281800; color: #b060b0;">;</span><span style="background: #281800; color: white;"></span>
<span style="background: #281800; color: white;"> </span><span style="background: #281800; color: #e66170; font-weight: bold;">echo</span><span style="background: #281800; color: white;"> </span><span style="background: #281800; color: #e66170; font-weight: bold;">json_encode</span><span style="background: #281800; color: #d2cd86;">(</span><span style="background: #281800; color: white;">$json</span><span style="background: #281800; color: #d2cd86;">)</span><span style="background: #281800; color: #b060b0;">;</span><span style="background: #281800; color: white;"></span>
<span style="background: #281800; color: #b060b0;">}</span><span style="background: #281800; color: white;"></span>
</pre>
<br />
Si tienes cualquier duda escríbeme, si te sirvió este artículo también recuerda dejar un comentario ^^<br />
<br />
Si quieres ver este código en funcionamiento haz click <a href="http://arcanita.cl/blog/slider_simple.php">aquí</a>,<br />
<br />
<a href="http://arcanita.cl/blog/codigo_slider.txt">Haciendo click aquí</a> podrás ver el código completo del archivo html con el css y las funciones javascript incluídas.<br />
<br />
<br />Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-3415610225025831574.post-55959693762172822672016-11-29T10:51:00.000-08:002016-12-07T10:42:20.143-08:00Mostrar datos y filtrarlos (Recargando página)En este caso, mostraremos la información que hay en una base de datos, pero además filtraremos esta información, recargando la página, mas adelante veremos un ejemplo de como hacerlo sin recargar la página, es decir, utilizando ajax.<br />
<br />
Para ver como mostrar la información desde una base de datos vea el ejemplo: <a href="https://arcanita.blogspot.cl/2016/11/como-generar-tabla-dinamicamente-con-la.html">"Como generar tabla dinámicamente con la base de datos"</a><br />
<br />
<br />
Ahora, vamos a dar la opción de mostrar usuarios casados o solteros.<br />
<br />
Para esto, tenemos que poner en option->value, el nombre como aparece en la base de datos<br />
<br />
Para ver funcionando este código acceda <a href="http://arcanita.cl/blog/tabla_filtro.php">aquí</a><br />
<br />
<pre style="background: #000; color: #f8f8f8; font-size: 12px;"><?php
<span style="color: #e28964;">include</span>(<span style="color: #65b042;">"config.php"</span>);
?>
<span style="color: #89bdff;"><<span style="color: #89bdff;">h3</span>></span>Filtrar por estado civil<span style="color: #89bdff;"></<span style="color: #89bdff;">h3</span>></span>
<span style="color: #89bdff;"><<span style="color: #89bdff;">form</span> <span style="color: #89bdff;">method</span>=<span style="color: #65b042;">"get"</span> <span style="color: #89bdff;">action</span>=<span style="color: #65b042;">""</span>></span>
<span style="color: #e0c589;"><<span style="color: #e0c589;">select</span> <span style="color: #e0c589;">name</span>=<span style="color: #65b042;">"filtro"</span>></span>
<span style="color: #e0c589;"><<span style="color: #e0c589;">option</span> <span style="color: #e0c589;">value</span>=<span style="color: #65b042;">"Casado"</span>></span>Casado<span style="color: #e0c589;"></<span style="color: #e0c589;">option</span>></span>
<span style="color: #e0c589;"><<span style="color: #e0c589;">option</span> <span style="color: #e0c589;">value</span>=<span style="color: #65b042;">"Soltero"</span>></span>Soltero<span style="color: #e0c589;"></<span style="color: #e0c589;">option</span>></span>
<span style="color: #e0c589;"></<span style="color: #e0c589;">select</span>></span>
<span style="color: #e0c589;"><<span style="color: #e0c589;">input</span> <span style="color: #e0c589;">type</span>=<span style="color: #65b042;">"submit"</span> <span style="color: #e0c589;">name</span>=<span style="color: #65b042;">"filtrar"</span> <span style="color: #e0c589;">value</span>=<span style="color: #65b042;">"Filtrar"</span>></span>
<span style="color: #89bdff;"></<span style="color: #89bdff;">form</span>></span>
<span style="color: #e0c589;"><<span style="color: #e0c589;">table</span> <span style="color: #e0c589;">border</span>=<span style="color: #65b042;">"1"</span>></span>
<span style="color: #e0c589;"><<span style="color: #e0c589;">tr</span>></span>
<span style="color: #e0c589;"><<span style="color: #e0c589;">td</span>></span>Id Usuario<span style="color: #e0c589;"></<span style="color: #e0c589;">td</span>></span>
<span style="color: #e0c589;"><<span style="color: #e0c589;">td</span>></span>Nombre y Apellido<span style="color: #e0c589;"></<span style="color: #e0c589;">td</span>></span>
<span style="color: #e0c589;"><<span style="color: #e0c589;">td</span>></span>Edad<span style="color: #e0c589;"></<span style="color: #e0c589;">td</span>></span>
<span style="color: #e0c589;"><<span style="color: #e0c589;">td</span>></span>Estado Civil<span style="color: #e0c589;"></<span style="color: #e0c589;">td</span>></span>
<span style="color: #e0c589;"></<span style="color: #e0c589;">tr</span>></span>
<?php
<span style="color: #e28964;"> if</span>(<span style="color: #dad085;">isset</span>(<span style="color: #3e87e3;">$_GET</span>[<span style="color: #65b042;">'filtro'</span>]))
{
<span style="color: #3e87e3;">$sql</span> <span style="color: #e28964;">=</span> <span style="color: #65b042;">"<span style="color: #daefa3;"><span style="color: #e28964;">SELECT</span> <span style="color: #e28964;">*</span> <span style="color: #e28964;">FROM</span> usuarios <span style="color: #e28964;">where</span> estado_civil <span style="color: #e28964;">=</span> <span style="color: #65b042;">'</span></span>"</span><span style="color: #e28964;">.</span><span style="color: #3e87e3;">$_GET</span>[<span style="color: #65b042;">'filtro'</span>]<span style="color: #e28964;">.</span><span style="color: #65b042;">"'"</span>;
}
<span style="color: #e28964;"> else</span>
{
<span style="color: #3e87e3;">$sql</span> <span style="color: #e28964;">=</span> <span style="color: #3e87e3;">$link</span>, <span style="color: #65b042;">"<span style="color: #daefa3;"><span style="color: #e28964;">SELECT</span> <span style="color: #e28964;">*</span> <span style="color: #e28964;">FROM</span> usuarios</span>"</span>;
}
<span style="color: #3e87e3;">$resul</span> <span style="color: #e28964;">=</span> <span style="color: #dad085;">mysqli_query</span>(<span style="color: #3e87e3;">$link</span>, <span style="color: #3e87e3;">$sql</span>);
<span style="color: #e28964;"> if</span>(<span style="color: #dad085;">mysqli_num_rows</span>(<span style="color: #3e87e3;">$resul</span>) <span style="color: #e28964;">></span> <span style="color: #3387cc;">0</span>)
{
<span style="color: #e28964;"> while</span>(<span style="color: #3e87e3;">$row</span> <span style="color: #e28964;">=</span> <span style="color: #dad085;">mysqli_fetch_array</span>(<span style="color: #3e87e3;">$resul</span>))
{
<span style="color: #dad085;">echo</span> <span style="color: #65b042;">"<tr>"</span>;
<span style="color: #dad085;">echo</span> <span style="color: #65b042;">"<td>"</span><span style="color: #e28964;">.</span><span style="color: #3e87e3;">$row</span>[<span style="color: #65b042;">'id_usuario'</span>]<span style="color: #e28964;">.</span><span style="color: #65b042;">"</td>"</span>;
<span style="color: #dad085;">echo</span> <span style="color: #65b042;">"<td>"</span><span style="color: #e28964;">.</span><span style="color: #3e87e3;">$row</span>[<span style="color: #65b042;">'nombre'</span>]<span style="color: #e28964;">.</span><span style="color: #65b042;">"</td>"</span>;
<span style="color: #dad085;">echo</span> <span style="color: #65b042;">"<td>"</span><span style="color: #e28964;">.</span><span style="color: #3e87e3;">$row</span>[<span style="color: #65b042;">'edad'</span>]<span style="color: #e28964;">.</span><span style="color: #65b042;">"</td>"</span>;
<span style="color: #dad085;">echo</span> <span style="color: #65b042;">"<td>"</span><span style="color: #e28964;">.</span><span style="color: #3e87e3;">$row</span>[<span style="color: #65b042;">'estado_civil'</span>]<span style="color: #e28964;">.</span><span style="color: #65b042;">"</td>"</span>;
<span style="color: #dad085;">echo</span> <span style="color: #65b042;">"</tr>"</span>;
}
} ?>
<span style="color: #e0c589;"></<span style="color: #e0c589;">table</span>></span>
</pre>
<br />
<br />
Si queremos que el "select box" se genere automáticamente desde la base de datos, valla a <a href="http://arcanita.blogspot.cl/2016/11/generar-select-box-dinamico-desde-la.html">"Generar select box dinámico desde la base de datos"</a>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-3415610225025831574.post-45818629193291838182016-11-29T07:42:00.001-08:002016-11-29T07:45:46.918-08:00Mostrar datos y filtrarlos (Sin recargar página)En una entrada anterior, les mostré como filtrar una tabla que viene desde una base de datos, recargando la página.<br />
<br />
Esto es mas sencillo de realizar pero puede ser incómodo sobre todo si hay muchos registros.<br />
<br />
Ahora les mostraré como lo hago yo para filtrar entradas de la tabla, sin recargar página, usando ajax.<br />
<br />
Para el caso ejemplo usaremos la siguiente base de datos:<br />
nombre: usuarios<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge5cNUQRJwSOikMRcMrY94jT3V2drXe-fEFPybi69jzDZbwBtMw5QWCEa5ax-b1arvdBW3k7y5bUlgLTCPimmF5xbcfxn_7cFhN7Zu6asYGTveNIruFMH5FXZB47RRXgc2OqBLtZyry0o/s1600/bdd3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="135" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge5cNUQRJwSOikMRcMrY94jT3V2drXe-fEFPybi69jzDZbwBtMw5QWCEa5ax-b1arvdBW3k7y5bUlgLTCPimmF5xbcfxn_7cFhN7Zu6asYGTveNIruFMH5FXZB47RRXgc2OqBLtZyry0o/s400/bdd3.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Primero, asignaré un id único a cada fila (<tr>) de la tabla, en este caso el id de la fila será el mismo que el id de usuario mas la palabra "tr_". </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Ya no es necesario abrir un tag <form> ya que le daremos al select box un id, así podemos acceder a su valor desde una función javascript usando jquery, la notación es: $("#id_objeto").val().</div>
<br />
Luego, enviaremos con ajax, este valor a un archivo php que procesara el filtro y me enviará de vuelta los "id" de los registros que cumple con el filtro y mostraremos solo estos, y ocultaremos los que no cumplen.<br />
<br />
Para que jQuery funcione en nuestra web, necesitamos incluir la librería, esto se hace con la siguiente linea:<br />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script><br />
<br />
Para hacer todo esto necesitamos 2 archivos, el que envía y muestra los datos y el que recibe y procesa por detrás.<br />
<br />
El que envía y muestra los datos queda:<br />
<br />
<br />
<pre style="background:#000;color:#f8f8f8; font-size:11px;"><?php
<span style="color:#e28964">include</span>(<span style="color:#65b042">"config.php"</span>);
?>
<span style="color:#89bdff"><<span style="color:#89bdff">script</span> <span style="color:#89bdff">src</span>=<span style="color:#65b042">"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"</span>></<span style="color:#89bdff">script</span>></span>
<span style="color:#89bdff"><<span style="color:#89bdff">h3</span>></span>Filtrar por estado civil<span style="color:#89bdff"></<span style="color:#89bdff">h3</span>></span>
<span style="color:#e0c589"><<span style="color:#e0c589">select</span> <span style="color:#e0c589">id</span>=<span style="color:#65b042">"filtro"</span>></span>
<span style="color:#e0c589"><<span style="color:#e0c589">option</span> <span style="color:#e0c589">value</span>=<span style="color:#65b042">"Casado"</span>></span>Casado<span style="color:#e0c589"></<span style="color:#e0c589">option</span>></span>
<span style="color:#e0c589"><<span style="color:#e0c589">option</span> <span style="color:#e0c589">value</span>=<span style="color:#65b042">"Soltero"</span>></span>Soltero<span style="color:#e0c589"></<span style="color:#e0c589">option</span>></span>
<span style="color:#e0c589"></<span style="color:#e0c589">select</span>></span>
<span style="color:#e0c589"><<span style="color:#e0c589">br</span>></span><span style="color:#e0c589"><<span style="color:#e0c589">br</span>></span>
<span style="color:#e0c589"><<span style="color:#e0c589">input</span> <span style="color:#e0c589">type</span>=<span style="color:#65b042">"button"</span> <span style="color:#e0c589">onclick</span>=<span style="color:#65b042">"filtrar()"</span> <span style="color:#e0c589">name</span>=<span style="color:#65b042">"filtrar"</span> <span style="color:#e0c589">value</span>=<span style="color:#65b042">"Filtrar"</span>></span>
<span style="color:#e0c589"><<span style="color:#e0c589">br</span>></span><span style="color:#e0c589"><<span style="color:#e0c589">br</span>></span>
<span style="color:#e0c589"><<span style="color:#e0c589">table</span> <span style="color:#e0c589">border</span>=<span style="color:#65b042">"1"</span>></span>
<span style="color:#e0c589"><<span style="color:#e0c589">tr</span>></span>
<span style="color:#e0c589"><<span style="color:#e0c589">td</span>></span>Id Usuario<span style="color:#e0c589"></<span style="color:#e0c589">td</span>></span>
<span style="color:#e0c589"><<span style="color:#e0c589">td</span>></span>Nombre y Apellido<span style="color:#e0c589"></<span style="color:#e0c589">td</span>></span>
<span style="color:#e0c589"><<span style="color:#e0c589">td</span>></span>Edad<span style="color:#e0c589"></<span style="color:#e0c589">td</span>></span>
<span style="color:#e0c589"><<span style="color:#e0c589">td</span>></span>Estado Civil<span style="color:#e0c589"></<span style="color:#e0c589">td</span>></span>
<span style="color:#e0c589"></<span style="color:#e0c589">tr</span>></span>
<?php
<span style="color:#3e87e3">$sql</span> <span style="color:#e28964">=</span> <span style="color:#dad085">mysqli_query</span>(<span style="color:#3e87e3">$link</span>, <span style="color:#65b042">"<span style="color:#daefa3"><span style="color:#e28964">SELECT</span> <span style="color:#e28964">*</span> <span style="color:#e28964">FROM</span> usuarios</span>"</span>);
<span style="color:#e28964"> if</span>(<span style="color:#dad085">mysqli_num_rows</span>(<span style="color:#3e87e3">$sql</span>) <span style="color:#e28964">></span> <span style="color:#3387cc">0</span>)
{
<span style="color:#e28964"> while</span>(<span style="color:#3e87e3">$row</span> <span style="color:#e28964">=</span> <span style="color:#dad085">mysqli_fetch_array</span>(<span style="color:#3e87e3">$sql</span>))
{
<span style="color:#dad085">echo</span> <span style="color:#65b042">"<tr id='tr_"</span><span style="color:#e28964">.</span><span style="color:#3e87e3">$row</span>[<span style="color:#65b042">'id_usuario'</span>]<span style="color:#e28964">.</span><span style="color:#65b042">"'>"</span>;
<span style="color:#dad085">echo</span> <span style="color:#65b042">"<td>"</span><span style="color:#e28964">.</span><span style="color:#3e87e3">$row</span>[<span style="color:#65b042">'id_usuario'</span>]<span style="color:#e28964">.</span><span style="color:#65b042">"</td>"</span>;
<span style="color:#dad085">echo</span> <span style="color:#65b042">"<td>"</span><span style="color:#e28964">.</span><span style="color:#3e87e3">$row</span>[<span style="color:#65b042">'nombre'</span>]<span style="color:#e28964">.</span><span style="color:#65b042">"</td>"</span>;
<span style="color:#dad085">echo</span> <span style="color:#65b042">"<td>"</span><span style="color:#e28964">.</span><span style="color:#3e87e3">$row</span>[<span style="color:#65b042">'edad'</span>]<span style="color:#e28964">.</span><span style="color:#65b042">"</td>"</span>;
<span style="color:#dad085">echo</span> <span style="color:#65b042">"<td>"</span><span style="color:#e28964">.</span><span style="color:#3e87e3">$row</span>[<span style="color:#65b042">'estado_civil'</span>]<span style="color:#e28964">.</span><span style="color:#65b042">"</td>"</span>;
<span style="color:#dad085">echo</span> <span style="color:#65b042">"</tr>"</span>;
}
} ?>
<span style="color:#e0c589"></<span style="color:#e0c589">table</span>></span>
<<span style="color:#e0c589">script</span>>
<span style="color:#99cf50">function</span> <span style="color:#89bdff">filtrar</span>()
{
<span style="color:#aeaeae;font-style:italic">//de esta forma se accede a un valor con jquery, en donde "filtro" es el id del input</span>
<span style="color:#99cf50">var</span> filtro <span style="color:#e28964">=</span> <span style="color:#e28964">$</span>(<span style="color:#65b042">"#filtro"</span>).val();
<span style="color:#e28964">$</span>.post(
<span style="color:#65b042">"filtrar.php"</span>,
{
fil: filtro
},
<span style="color:#99cf50">function</span>(data, status)
{
<span style="color:#e28964">if</span>(status<span style="color:#e28964">==</span><span style="color:#65b042">'success'</span>)
{
<span style="text-decoration:underline">console</span><span style="color:#dad085">.log</span>(data);
<span style="color:#99cf50">var</span> response <span style="color:#e28964">=</span> JSON.<span style="color:#dad085">parse</span>(data);
<span style="color:#e28964">if</span>(response.mostrar.<span style="color:#cf6a4c">length</span> <span style="color:#e28964">!</span><span style="color:#e28964">=</span> <span style="color:#3387cc">0</span>)
{
<span style="color:#e28964">for</span>(<span style="color:#99cf50">var</span> y <span style="color:#e28964">=</span> <span style="color:#3387cc">0</span>; y <span style="color:#e28964"><</span> response.mostrar.<span style="color:#cf6a4c">length</span>; y<span style="color:#e28964">++</span>)
{
<span style="color:#e28964">$</span>(<span style="color:#65b042">"#tr_"</span><span style="color:#e28964">+</span>response.mostrar[y]).slideDown();
<span style="color:#e28964">$</span>(<span style="color:#65b042">"#tr_"</span><span style="color:#e28964">+</span>response.ocultar[y]).slideUp();
}
}
<span style="color:#e28964">else</span>
{
<span style="color:#dad085">alert</span>(<span style="color:#65b042">"No hay usuarios con ese filtro"</span>);
}
}
}
);
}
</<span style="color:#e0c589">script</span>>
</pre>
<br />
<br />
El archivo "filtrar.php" que es quien recibe el filtro y procesa la consulta queda:<br />
<br />
<br />
<pre style="background: #000; color: #f8f8f8; font-size: 11px;"><?php
<span style="color: #e28964;">include</span>(<span style="color: #65b042;">"config.php"</span>);
<span style="color: #3e87e3;">$filtro</span> <span style="color: #e28964;">=</span> <span style="color: #3e87e3;">$_POST</span>[<span style="color: #65b042;">'fil'</span>];
<span style="color: #3e87e3;">$mostrar</span> <span style="color: #e28964;">=</span> <span style="color: #dad085;">array</span>();
<span style="color: #3e87e3;">$ocultar</span> <span style="color: #e28964;">=</span> <span style="color: #dad085;">array</span>();
<span style="color: #3e87e3;">$sql</span> <span style="color: #e28964;">=</span> <span style="color: #dad085;">mysqli_query</span>(<span style="color: #3e87e3;">$link</span>, <span style="color: #65b042;">"select * from usuarios"</span>);
<span style="color: #e28964;">if</span>( <span style="color: #dad085;">mysqli_num_rows</span>(<span style="color: #3e87e3;">$sql</span>) <span style="color: #e28964;">></span> <span style="color: #3387cc;">0</span> )
{
<span style="color: #e28964;"> while</span>( <span style="color: #3e87e3;">$row</span> <span style="color: #e28964;">=</span> <span style="color: #dad085;">mysqli_fetch_array</span>(<span style="color: #3e87e3;">$sql</span>) )
{
<span style="color: #e28964;"> if</span>( <span style="color: #3e87e3;">$row</span>[<span style="color: #65b042;">'estado_civil'</span>] <span style="color: #e28964;">==</span> <span style="color: #3e87e3;">$filtro</span> )
{
<span style="color: #dad085;">array_push</span>( <span style="color: #3e87e3;">$mostrar</span>, <span style="color: #3e87e3;">$row</span>[<span style="color: #65b042;">'id_usuario'</span>] );
}
<span style="color: #e28964;"> else</span>
{
<span style="color: #dad085;">array_push</span>( <span style="color: #3e87e3;">$ocultar</span>, <span style="color: #3e87e3;">$row</span>[<span style="color: #65b042;">'id_usuario'</span>] );
}
}
<span style="color: #3e87e3;">$json</span> <span style="color: #e28964;">=</span> <span style="color: #dad085;">array</span>(<span style="color: #65b042;">"mostrar"</span> <span style="color: #e28964;">=></span> <span style="color: #3e87e3;">$mostrar</span>, <span style="color: #65b042;">"ocultar"</span> <span style="color: #e28964;">=></span> <span style="color: #3e87e3;">$ocultar</span>);
}
<span style="color: #e28964;">else</span>
{
<span style="color: #3e87e3;">$mostrar</span> <span style="color: #e28964;">=</span> <span style="color: #65b042;">""</span>;
<span style="color: #3e87e3;">$ocultar</span> <span style="color: #e28964;">=</span> <span style="color: #65b042;">""</span>;
<span style="color: #3e87e3;">$json</span> <span style="color: #e28964;">=</span> <span style="color: #dad085;">array</span>(<span style="color: #65b042;">"mostrar"</span> <span style="color: #e28964;">=></span> <span style="color: #3e87e3;">$mostrar</span>, <span style="color: #65b042;">"ocultar"</span> <span style="color: #e28964;">=></span> <span style="color: #3e87e3;">$ocultar</span> );
}
<span style="color: #dad085;">echo</span> <span style="color: #dad085;">json_encode</span>(<span style="color: #3e87e3;">$json</span>);
</pre>
<br />
Para ver funcionando este código accede <a href="http://arcanita.cl/blog/filtrar_sin_recargar.php">aquí</a><br />
<br />
<br />
Gracias por leer ^^<br />
<br />
<br />Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-3415610225025831574.post-8505402379206866922016-11-29T07:02:00.001-08:002016-11-29T10:54:57.492-08:00Generar select box dinámico desde la base de datosA veces necesitamos que los select box de un formulario se generen según lo que hay en la base de datos.<br />
<br />
En este ejemplo veremos como hacer esto:<br />
<br />
Imaginemos que queremos hacer un formulario donde se deba escoger un item desde una lista de Sucursales que tenemos de una tienda.<br />
<br />
Para este ejemplo usaremos la siguiente base de datos con nombre: sucursales<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikyChYDmAKVEK7EIGXJG38hHlNArtabRvBBtzFSZUKLxYCXTxLBxH6KoLplG_3nl2CpldgSIgJG7HqW3F2en9m28EBJFT7OozyCY6adGg5RQBE4LK4qRwWR_Ifgem29l-lGW1yysYJzpo/s1600/bdd2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="180" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikyChYDmAKVEK7EIGXJG38hHlNArtabRvBBtzFSZUKLxYCXTxLBxH6KoLplG_3nl2CpldgSIgJG7HqW3F2en9m28EBJFT7OozyCY6adGg5RQBE4LK4qRwWR_Ifgem29l-lGW1yysYJzpo/s400/bdd2.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
El código para esto será:</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<br />
<pre style="background:#000;color:#f8f8f8;font-size:11px;"><?php
<span style="color:#e28964">include</span>(<span style="color:#65b042">"config.php"</span>);
<span style="color:#3e87e3">$sql</span> <span style="color:#e28964">=</span> <span style="color:#dad085">mysqli_query</span>(<span style="color:#3e87e3">$link</span>, <span style="color:#65b042">"select * from sucursales"</span>);
?>
<span style="color:#89bdff"><<span style="color:#89bdff">form</span> <span style="color:#89bdff">name</span>=<span style="color:#65b042">"elegir_sucursal"</span> <span style="color:#89bdff">action</span>=<span style="color:#65b042">""</span>></span>
<span style="color:#e0c589"><<span style="color:#e0c589">select</span> <span style="color:#e0c589">name</span>=<span style="color:#65b042">"sucursal"</span>></span>
<?php
<span style="color:#e28964"> while</span>(<span style="color:#3e87e3">$row</span> <span style="color:#e28964">=</span> <span style="color:#dad085">mysqli_fetch_array</span>(<span style="color:#3e87e3">$sql</span>))
{ ?>
<span style="color:#e0c589"><<span style="color:#e0c589">option</span> <span style="color:#e0c589">value</span>=<span style="color:#65b042">"<span style="color:#daefa3"><?=<span style="color:#8a9a95">$row</span>[<span style="color:#65b042">'id_sucursal'</span>]?></span>"</span>></span> <?=<span style="color:#3e87e3">$row</span>[<span style="color:#65b042">'nombre_sucursal'</span>]?> <span style="color:#e0c589"></<span style="color:#e0c589">option</span>></span>
<?php } ?>
<span style="color:#e0c589"></<span style="color:#e0c589">select</span>></span>
<span style="color:#89bdff"></<span style="color:#89bdff">form</span>></span>
</pre>
<br />
<br />
Es importante notar que podemos invocar código php entre medio de código html, y que también puedo usar la notación "<?= ?>" para poner variables de php en tags html.<br />
<br />
También es importante destacar que en el option-> value siempre debe ir el id único del objeto en la base de datos.<br />
<br />
Siempre hay que recordar abrir y cerrar las secciones PHP que estarán embebidas dentro del código HTML, por ejemplo para cerrar la llave } se debe escribir <?php } ?><br />
<br />
Para ver este código funcionando ingresa <a href="http://arcanita.cl/blog/elegir_sucursal.php">aquí</a>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-3415610225025831574.post-86550871576282805052016-11-29T06:09:00.002-08:002016-11-29T06:38:30.562-08:00Como conectarse con una base de datosEn este caso yo uso $mysqli_query y no $mysql_query, por lo tanto mostraré como se hace para usarlo con <span style="color: blue;">$mysqli</span><br />
<span style="color: red;"><br /></span>
<span style="color: red;"><br /></span>
<br />
<pre style="background: #000; font-size:12px; color: #f8f8f8; overflow-x: scroll"><?php
<span style="color: #3e87e3;">$dbhost</span> <span style="color: #e28964;">=</span> <span style="color: #65b042;">'localhost'</span>;
<span style="color: #3e87e3;">$dbuser</span> <span style="color: #e28964;">=</span> <span style="color: #65b042;">'arcanita'</span>;
<span style="color: #3e87e3;">$dbpass</span> <span style="color: #e28964;">=</span> <span style="color: #65b042;">'clave'</span>;
<span style="color: #3e87e3;">$db</span> <span style="color: #e28964;">=</span> <span style="color: #65b042;">'arcanita_bddprueba'</span>;
<span style="color: #3e87e3;">$link</span> <span style="color: #e28964;">=</span> <span style="color: #dad085;">mysqli_connect</span>(<span style="color: #3e87e3;">$dbhost</span>,<span style="color: #3e87e3;">$dbuser</span>,<span style="color: #3e87e3;">$dbpass</span>,<span style="color: #3e87e3;">$db</span>) <span style="color: #e28964;">or</span><span style="color: #e28964;"> die</span>(<span style="color: #65b042;">"Error "</span> <span style="color: #e28964;">.</span> <span style="color: #dad085;">mysqli_error</span>(<span style="color: #3e87e3;">$link</span>));
<span style="color: #e28964;">if</span> (<span style="color: #dad085;">mysqli_connect_errno</span>()) {
<span style="color: #dad085;">printf</span>(<span style="color: #65b042;">"Falló la conexión: %s<span style="color: #ddf2a4;">\n</span>"</span>, <span style="color: #dad085;">mysqli_connect_error</span>());
<span style="color: #e28964;"> exit</span>();
}
</pre>
<br />
Yo aconsejo poner esta configuración en un archivo .php y despues incluir este archivo en los demas lugares donde usaremos la base de datos.<br />
Por ejemplo si el archivo de configuración se llama config.php, se debe incluir en los demas archvos de la siguiente forma<br />
<i><?php</i><br />
<i>include("config.php");</i><br />
<i>?></i><br />
<i><br /></i>
Esto lo hago así por que, si cambia la clave de la base de datos y tenemos la información de conexión en cada una de las páginas donde la usamos, tendremos que entrar a todas a cambiar la clave.<br />
<br />
Gracias por leer ^^Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-3415610225025831574.post-32400481355571406412016-11-28T11:45:00.000-08:002016-12-07T10:33:03.364-08:00Generar tabla dinámicamente con la base de datosA veces necesitamos mostrar el contenido de una base de datos en un sitio web, en este artículo aprenderemos a hacer esto.<br />
<br />
Para este objetivo creare una tabla imaginaria (ustedes deben usar sus propios datos)<br />
<br />
Nombre tabla: usuarios<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh00rWy_nPza1z1Xvz2USfCLOF_tFw8qPxSHw_Yq8dCIyy_MTR5m2rjRndm33C3R17d3xcW6WYzyvwbKb-KW9C87NsDUephZCSnKx73Rdb78vuaSAGziwejfcm5Bd20wqkrBN7BNJ5HOI8/s1600/bdd1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh00rWy_nPza1z1Xvz2USfCLOF_tFw8qPxSHw_Yq8dCIyy_MTR5m2rjRndm33C3R17d3xcW6WYzyvwbKb-KW9C87NsDUephZCSnKx73Rdb78vuaSAGziwejfcm5Bd20wqkrBN7BNJ5HOI8/s400/bdd1.png" width="400" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
Así quedará nuestro código (explicaciones van como comentarios en el mismo código)
<br />
<pre style="background: #000; color: #f8f8f8; font-size: 12px;"><span style="color: #aeaeae; font-style: italic;"><!--Primero hacemos la cabecera de la tabla--></span>
<span style="color: #e0c589;"><<span style="color: #e0c589;">table</span>></span>
<span style="color: #e0c589;"><<span style="color: #e0c589;">tr</span>></span>
<span style="color: #e0c589;"><<span style="color: #e0c589;">td</span>></span>Id Usuario<span style="color: #e0c589;"></<span style="color: #e0c589;">td</span>></span>
<span style="color: #e0c589;"><<span style="color: #e0c589;">td</span>></span>Nombre y Apellido<span style="color: #e0c589;"></<span style="color: #e0c589;">td</span>></span>
<span style="color: #e0c589;"><<span style="color: #e0c589;">td</span>></span>Edad<span style="color: #e0c589;"></<span style="color: #e0c589;">td</span>></span>
<span style="color: #e0c589;"><<span style="color: #e0c589;">td</span>></span>Estado Civil<span style="color: #e0c589;"></<span style="color: #e0c589;">td</span>></span>
<span style="color: #e0c589;"></<span style="color: #e0c589;">tr</span>></span>
<span style="color: #aeaeae; font-style: italic;"><!--Incluímos código PHP dentro de HTML usando <?php ?> --></span>
<?php
<span style="color: #aeaeae; font-style: italic;">//usaremos mysqli_query porque mysql_query esta por quedar obsoleto</span>
<span style="color: #3e87e3;">$sql</span> <span style="color: #e28964;">=</span> <span style="color: #dad085;">mysqli_query</span>(<span style="color: #3e87e3;">$link</span>, <span style="color: #65b042;">"<span style="color: #daefa3;"><span style="color: #e28964;">SELECT</span> <span style="color: #e28964;">*</span> <span style="color: #e28964;">FROM</span> usuarios</span>"</span>);
<span style="color: #aeaeae; font-style: italic;">//comprobamos que existan registros en la tabla</span>
<span style="color: #e28964;"> if</span>(<span style="color: #dad085;">mysqli_num_rows</span>(<span style="color: #3e87e3;">$sql</span>) <span style="color: #e28964;">></span> <span style="color: #3387cc;">0</span>)
{
<span style="color: #aeaeae; font-style: italic;">//Metemos los registros en un arreglo llamado $row</span>
<span style="color: #e28964;"> while</span>(<span style="color: #3e87e3;">$row</span> <span style="color: #e28964;">=</span> <span style="color: #dad085;">mysqli_fetch_array</span>(<span style="color: #3e87e3;">$sql</span>))
{
<span style="color: #dad085;">echo</span> <span style="color: #65b042;">"<tr>"</span>;
<span style="color: #dad085;">echo</span> <span style="color: #65b042;">"<td>"</span><span style="color: #e28964;">.</span><span style="color: #3e87e3;">$row</span>[<span style="color: #65b042;">'id_usuario'</span>]<span style="color: #e28964;">.</span><span style="color: #65b042;">"</td>"</span>;
<span style="color: #dad085;">echo</span> <span style="color: #65b042;">"<td>"</span><span style="color: #e28964;">.</span><span style="color: #3e87e3;">$row</span>[<span style="color: #65b042;">'nombre'</span>]<span style="color: #e28964;">.</span><span style="color: #65b042;">"</td>"</span>;
<span style="color: #dad085;">echo</span> <span style="color: #65b042;">"<td>"</span><span style="color: #e28964;">.</span><span style="color: #3e87e3;">$row</span>[<span style="color: #65b042;">'edad'</span>]<span style="color: #e28964;">.</span><span style="color: #65b042;">"</td>"</span>;
<span style="color: #dad085;">echo</span> <span style="color: #65b042;">"<td>"</span><span style="color: #e28964;">.</span><span style="color: #3e87e3;">$row</span>[<span style="color: #65b042;">'estado_civil'</span>]<span style="color: #e28964;">.</span><span style="color: #65b042;">"</td>"</span>;
<span style="color: #dad085;">echo</span> <span style="color: #65b042;">"</tr>"</span>;
}
} ?>
<span style="color: #e0c589;"></<span style="color: #e0c589;">table</span>></span>
</pre>
En el caso ejemplo falta la conexión a la base de datos, que puedes ver<a href="https://arcanita.blogspot.cl/2016/11/como-conectarse-con-una-base-de-datos.html"> aquí</a> como hacerlo.
Para ver funcionando este ejemplo haz <a href="http://arcanita.cl/blog/">click aquí</a>Unknownnoreply@blogger.com0