<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>ZoneArtCSS &#124; Desarrollo Web, Diseño de páginas Web, Aplicaciones Móviles, Notas de Tecnología &#187; plugin</title>
	<atom:link href="http://www.zoneartcss.com/tag/plugin/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.zoneartcss.com</link>
	<description>Tips de Diseño y Desarrollo Web</description>
	<lastBuildDate>Wed, 26 Oct 2011 18:31:39 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>&#191;C&#243;mo insertar videos de Youtube con WordPress?</title>
		<link>http://www.zoneartcss.com/webdevelopment/cms/wordpress-cms/cmo-insertar-videos-de-youtube-con-wordpress/</link>
		<comments>http://www.zoneartcss.com/webdevelopment/cms/wordpress-cms/cmo-insertar-videos-de-youtube-con-wordpress/#comments</comments>
		<pubDate>Fri, 01 Oct 2010 22:14:18 +0000</pubDate>
		<dc:creator>miguelortega</dc:creator>
				<category><![CDATA[Wordpress]]></category>
		<category><![CDATA[plugin]]></category>
		<category><![CDATA[Plugin Wordpress]]></category>
		<category><![CDATA[plugin youtube wordpress]]></category>
		<category><![CDATA[wordpress]]></category>
		<category><![CDATA[youtube]]></category>

		<guid isPermaLink="false">http://www.zoneartcss.com/cms/wordpress-cms/cmo-insertar-videos-de-youtube-con-wordpress/</guid>
		<description><![CDATA[WP Youtube Player es un plugin de WordPress que te permitirá insertar videos de youtube de manera sencilla utilizando el quicktag [tube][/tube], además de ello tiene un panel de configuración para personalizar los parámetros&#160; del reproductor. WP Youtube Player te facilita la publicación de vídeos en tu blog&#160; y tiene las siguientes características: Publicar vídeos utilizando una línea de código. Configurar las dimensiones y el tipo de player a utilizar. Configurar el método para embeber [...]]]></description>
			<content:encoded><![CDATA[<div id=HOTWordsTxt name=HOTWordsTxt><p><strong>WP Youtube Player</strong> es un plugin de <strong>WordPress</strong> que te permitirá insertar videos de <strong>youtube</strong> de manera sencilla utilizando el quicktag <code>[tube][/tube]</code>, además de ello tiene un panel de configuración para personalizar los parámetros&#160; del reproductor.</p>
<p> <span id="more-2213"></span>
<p><a href="http://www.zoneartcss.com/wp-content/uploads/2010/10/image.png"><img title="image" style="border-right: 0px; border-top: 0px; display: block; float: none; margin-left: auto; border-left: 0px; margin-right: auto; border-bottom: 0px" height="172" alt="image" src="http://www.zoneartcss.com/wp-content/uploads/2010/10/image_thumb.png" width="284" border="0" /></a> </p>
<p><em><strong>WP Youtube Player</strong></em> te facilita la publicación de vídeos en tu blog&#160; y tiene las siguientes características:</p>
<ul>
<li>Publicar vídeos utilizando una línea de código. </li>
<li>Configurar las dimensiones y el tipo de player a utilizar. </li>
<li>Configurar el método para embeber el player, incluyendo mediante <em>iframe</em></li>
<li>Permite configurar los parámetros del player. </li>
<li>Genera el código necesario para compatibilidad con los Feeds. </li>
<li>Genera el código necesario para compatibilidad con iPhone.</li>
</ul>
<p align="center"><a href="http://wordpress.org/extend/plugins/wp-youtube-player/" target="_blank">Descarga Wp youtube player aquí</a></p>
</div>]]></content:encoded>
			<wfw:commentRss>http://www.zoneartcss.com/webdevelopment/cms/wordpress-cms/cmo-insertar-videos-de-youtube-con-wordpress/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Mensajes de Error o Advertencia al hacer clic en un boton con jQuery</title>
		<link>http://www.zoneartcss.com/webdevelopment/jquery/mensajes-de-error-o-advertencia-al-hacer-clic-en-un-boton-con-jquery/</link>
		<comments>http://www.zoneartcss.com/webdevelopment/jquery/mensajes-de-error-o-advertencia-al-hacer-clic-en-un-boton-con-jquery/#comments</comments>
		<pubDate>Fri, 18 Dec 2009 08:29:47 +0000</pubDate>
		<dc:creator>miguelortega</dc:creator>
				<category><![CDATA[jQuery]]></category>
		<category><![CDATA[botones]]></category>
		<category><![CDATA[efectos]]></category>
		<category><![CDATA[Mensjaes de error]]></category>
		<category><![CDATA[plugin]]></category>

		<guid isPermaLink="false">http://www.zoneartcss.com/?p=1160</guid>
		<description><![CDATA[Este es un efecto mas que nos ofrece la libreria de jQuery, el cual consiste al hacer clic sobre un botón podemos hacer que arroje un mensaje predeterminadode la libreria jQuery. ya sea de advertencia o de error, al presentarse ese mensaje a los poco segundos desaparece con un efecto de degradado. Espero que les sea util este efecto. Uno de los muchos que podemos hacer con jQuery Ver Ejemplo &#60;script&#62; $&#40;&#34;#msg&#34;&#41;.click&#40;function&#40;&#41; &#123; $&#40;this&#41;.feedback&#40;&#34;This is [...]]]></description>
			<content:encoded><![CDATA[<div id=HOTWordsTxt name=HOTWordsTxt><p>Este es un efecto mas que nos ofrece la libreria de jQuery, el cual consiste al hacer clic sobre un botón podemos hacer que arroje un mensaje predeterminadode la libreria jQuery. ya sea de advertencia o de error, al presentarse ese mensaje a los poco segundos desaparece con un efecto  de degradado.<br />
<span id="more-1160"></span><br />
Espero que les sea util este efecto. Uno de los muchos que podemos hacer con jQuery</p>
<p><a class="verdemo" href="http://www.fbloggs.com/sandbox/index.html">Ver Ejemplo</a></p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #339933;">&lt;</span>script<span style="color: #339933;">&gt;</span>
$<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;#msg&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">.</span>click<span style="color: #009900;">&#40;</span><span style="color: #000000; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> 
 	$<span style="color: #009900;">&#40;</span>this<span style="color: #009900;">&#41;</span><span style="color: #339933;">.</span>feedback<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;This is a sample info message&quot;</span><span style="color: #339933;">,</span> <span style="color: #009900;">&#123;</span>duration<span style="color: #339933;">:</span> <span style="color: #cc66cc;">3000</span><span style="color: #339933;">,</span> right<span style="color: #339933;">:</span> <span style="color: #009900; font-weight: bold;">true</span><span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> 
&nbsp;
&nbsp;
 $<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;#err&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">.</span>click<span style="color: #009900;">&#40;</span><span style="color: #000000; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> 
 	$<span style="color: #009900;">&#40;</span>this<span style="color: #009900;">&#41;</span><span style="color: #339933;">.</span>feedback<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;This is a fatal error message!&quot;</span><span style="color: #339933;">,</span> <span style="color: #009900;">&#123;</span>duration<span style="color: #339933;">:</span> <span style="color: #cc66cc;">3000</span><span style="color: #339933;">,</span> right<span style="color: #339933;">:</span> <span style="color: #009900; font-weight: bold;">true</span><span style="color: #339933;">,</span> type<span style="color: #339933;">:</span> <span style="color: #0000ff;">&quot;error&quot;</span><span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> 
&nbsp;
 $<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;#custom&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">.</span>click<span style="color: #009900;">&#40;</span><span style="color: #000000; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> 
 	$<span style="color: #009900;">&#40;</span>this<span style="color: #009900;">&#41;</span><span style="color: #339933;">.</span>feedback<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;This uses a custom class for a status message!&quot;</span><span style="color: #339933;">,</span> <span style="color: #009900;">&#123;</span>duration<span style="color: #339933;">:</span> <span style="color: #cc66cc;">3000</span><span style="color: #339933;">,</span> right<span style="color: #339933;">:</span> <span style="color: #009900; font-weight: bold;">true</span><span style="color: #339933;">,</span> infoClass <span style="color: #339933;">:</span> <span style="color: #0000ff;">&quot;custom&quot;</span><span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> 
&nbsp;
 $<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;#leftmsg&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">.</span>click<span style="color: #009900;">&#40;</span><span style="color: #000000; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> 
 	$<span style="color: #009900;">&#40;</span>this<span style="color: #009900;">&#41;</span><span style="color: #339933;">.</span>feedback<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;This appears to left of input field &quot;</span><span style="color: #339933;">,</span> <span style="color: #009900;">&#123;</span>duration<span style="color: #339933;">:</span> <span style="color: #cc66cc;">3000</span><span style="color: #339933;">,</span> left<span style="color: #339933;">:</span> <span style="color: #009900; font-weight: bold;">true</span><span style="color: #339933;">,</span> offsetX<span style="color: #339933;">:</span> $<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;#customer&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">.</span>outerWidth<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span><span style="color: #cc66cc;">10</span> <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> 
&nbsp;
 $<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;#leftbtn&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">.</span>click<span style="color: #009900;">&#40;</span><span style="color: #000000; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> 
  	$<span style="color: #009900;">&#40;</span>this<span style="color: #009900;">&#41;</span><span style="color: #339933;">.</span>feedback<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;This appears to left of the button &quot;</span><span style="color: #339933;">,</span> <span style="color: #009900;">&#123;</span>duration<span style="color: #339933;">:</span> <span style="color: #cc66cc;">3000</span><span style="color: #339933;">,</span> left<span style="color: #339933;">:</span> <span style="color: #009900; font-weight: bold;">true</span><span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> 
<span style="color: #000000; font-weight: bold;">&lt;/script&gt;</span>
&nbsp;
<span style="color: #666666; font-style: italic;">// CODIGO DEL BOTON</span>
&nbsp;
<span style="color: #339933;">&lt;</span>button id<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;msg&quot;</span><span style="color: #339933;">&gt;</span>Zone Art Css<span style="color: #339933;">.</span>com<span style="color: #339933;">&lt;/</span>button<span style="color: #339933;">&gt;&lt;/</span>div<span style="color: #339933;">&gt;</span></pre></div></div>

</div>]]></content:encoded>
			<wfw:commentRss>http://www.zoneartcss.com/webdevelopment/jquery/mensajes-de-error-o-advertencia-al-hacer-clic-en-un-boton-con-jquery/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Galeria de Imagenes con jQuery Plugin</title>
		<link>http://www.zoneartcss.com/webdevelopment/jquery/galeria-de-imagenes-con-jquery-plugin/</link>
		<comments>http://www.zoneartcss.com/webdevelopment/jquery/galeria-de-imagenes-con-jquery-plugin/#comments</comments>
		<pubDate>Fri, 18 Dec 2009 08:11:56 +0000</pubDate>
		<dc:creator>miguelortega</dc:creator>
				<category><![CDATA[Desarrollo Web]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[efectos ajax]]></category>
		<category><![CDATA[galeria de imagenes]]></category>
		<category><![CDATA[galeria jquery]]></category>
		<category><![CDATA[plugin]]></category>

		<guid isPermaLink="false">http://www.zoneartcss.com/?p=1156</guid>
		<description><![CDATA[Para los que les gusta poner su web bien fresona.. aqui les dejo una galeria echa en jQuery, con unos efectos muy buenos para que puedan implementar en su web. En esta galería le puedes poner títulos a cada imagen, también puedes navegar fácilmente de un lado a otro con los botones de navegación. Ver Ejemplo Descargar]]></description>
			<content:encoded><![CDATA[<div id=HOTWordsTxt name=HOTWordsTxt><p>Para los que les gusta poner su web bien fresona.. aqui les dejo una galeria echa en jQuery, con unos efectos muy buenos para que puedan implementar en su web.<br />
<span id="more-1156"></span><br />
En esta galería le puedes poner títulos a cada imagen, también puedes navegar fácilmente de un lado a otro con los botones de navegación.</p>
<p><a class="verdemo" href="http://coffeescripter.com/code/ad-gallery/">Ver Ejemplo</a></p>
<p><a class="verdemo" href="http://coffeescripter.com/code/ad-gallery/jquery.ad-gallery.1.2.2.zip">Descargar</a></p>
</div>]]></content:encoded>
			<wfw:commentRss>http://www.zoneartcss.com/webdevelopment/jquery/galeria-de-imagenes-con-jquery-plugin/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Slider jQuery plugin</title>
		<link>http://www.zoneartcss.com/webdevelopment/jquery/slider-jquery-plugin/</link>
		<comments>http://www.zoneartcss.com/webdevelopment/jquery/slider-jquery-plugin/#comments</comments>
		<pubDate>Fri, 18 Dec 2009 08:00:58 +0000</pubDate>
		<dc:creator>miguelortega</dc:creator>
				<category><![CDATA[Desarrollo Web]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[plugin]]></category>
		<category><![CDATA[slider]]></category>

		<guid isPermaLink="false">http://www.zoneartcss.com/?p=1154</guid>
		<description><![CDATA[Les presento un efecto que para mi es uno de los más útiles cuando desarrollo una página web, es el famoso slider y este sobre todo me fascina por que esta con jQuery, de echo últimamente publico todo los efectos que tenga que ver con jQuery, me estoy volviendo adicto a esta librería. Espero que les agrade este efecto. Recuerden que lo único que tiene que hacer para implementar este efecto es descargar el jQuery [...]]]></description>
			<content:encoded><![CDATA[<div id=HOTWordsTxt name=HOTWordsTxt><p>Les presento un efecto que para mi es uno de los más útiles cuando desarrollo una página web, es el famoso slider y este sobre todo me fascina por que esta con jQuery, de echo últimamente publico todo los efectos que tenga que ver con jQuery, me estoy volviendo adicto a esta librería. Espero que les agrade este efecto.<br />
<span id="more-1154"></span><br />
Recuerden que lo único que tiene que hacer para implementar este efecto es descargar el jQuery y en en link que les doy copiar el código y pegarlo en su página web.</p>
<p><a class="verdemo" href="http://cssglobe.com/lab/easyslider1.7/03.html">Ver Ejemplo</a></p>
<p>Código del Plugin</p>

<div class="wp_syntax"><div class="code"><pre class="html" style="font-family:monospace;">$(document).ready(function(){	
	$(&quot;#slider&quot;).easySlider({
		auto: true,
		continuous: true,
		nextId: &quot;slider1next&quot;,
		prevId: &quot;slider1prev&quot;
	});
	$(&quot;#slider2&quot;).easySlider({ 
		numeric: true
	});
});</pre></div></div>

</div>]]></content:encoded>
			<wfw:commentRss>http://www.zoneartcss.com/webdevelopment/jquery/slider-jquery-plugin/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>jQuery Cycle Plugin – Transiciones animadas de imágenes (slideshow)</title>
		<link>http://www.zoneartcss.com/webdevelopment/programacion-con-style/jquery-cycle-plugin-%e2%80%93-transiciones-animadas-de-imagenes-slideshow/</link>
		<comments>http://www.zoneartcss.com/webdevelopment/programacion-con-style/jquery-cycle-plugin-%e2%80%93-transiciones-animadas-de-imagenes-slideshow/#comments</comments>
		<pubDate>Sat, 11 Jul 2009 15:59:51 +0000</pubDate>
		<dc:creator>Liz Palacios</dc:creator>
				<category><![CDATA[Programación con Style]]></category>
		<category><![CDATA[animated]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[Cycle]]></category>
		<category><![CDATA[efecto]]></category>
		<category><![CDATA[effect]]></category>
		<category><![CDATA[estilo]]></category>
		<category><![CDATA[framework]]></category>
		<category><![CDATA[gallery]]></category>
		<category><![CDATA[images]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[js]]></category>
		<category><![CDATA[library]]></category>
		<category><![CDATA[libreria]]></category>
		<category><![CDATA[plugin]]></category>
		<category><![CDATA[slideshow]]></category>
		<category><![CDATA[style]]></category>
		<category><![CDATA[transition]]></category>
		<category><![CDATA[zoneartcss]]></category>

		<guid isPermaLink="false">http://www.zoneartcss.com/?p=214</guid>
		<description><![CDATA[jQuery Cycle plugin proporciona un mecanismo para hacer transiciones animadas de imágenes. El plugin soporta pausas al pasar el ratón por encima de la imágen, paradas automáticas, retrollamadas (callbacks) antes y después, disparadores (triggers) y una gran cantidad de efectos para las trasiciones. La última versión estable (2.34), publicada en esta misma semana, requiere, como mínimo, la versión 1.2.3 de jQuery. Es un plugin muy ligero, tan solo ocupa 18 KB en su versión para [...]]]></description>
			<content:encoded><![CDATA[<div id=HOTWordsTxt name=HOTWordsTxt><p style="text-align: center;"><img class="aligncenter" src="http://www.zoneartcss.com/wp-content/trans_query.jpg" alt="Transiciones animadas de ayer y hoy con jquery" width="500" height="130" /></p>
<p><strong><a href="http://www.miempresaenlinea.com/paginas-web/programas-para-hacer-crear-y-publicar-paginas-web.aspx">jQuery </a>Cycle plugin</strong> proporciona un mecanismo para hacer <strong>transiciones animadas de imágenes</strong>. El <strong>plugin</strong> soporta pausas al pasar el ratón por encima de la imágen, paradas automáticas, retrollamadas (callbacks) antes y después, disparadores (triggers) y una gran cantidad de <strong>efectos</strong> para las <strong>trasiciones</strong>.<br />
<span id="more-214"></span><br />
La última versión estable (2.34), publicada en esta misma semana, requiere, como mínimo, la versión 1.2.3 de <strong>jQuery</strong>.</p>
<p>Es un <strong>plugin</strong> muy ligero, tan solo ocupa 18 KB en su versión para entornos de producción.</p>
<p>Como casi todo en <strong>jQuery</strong>, es muy fácil de usar. Aquí pongo un breve ejemplo básico:</p>
<p><strong>HTML</strong></p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
</pre></td><td class="code"><pre class="html4strict" style="font-family:monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;s1&quot;</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;pics&quot;</span>&gt;</span>
    <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">img</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;images/beach1.jpg&quot;</span> <span style="color: #000066;">width</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;200&quot;</span> <span style="color: #000066;">height</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;200&quot;</span> <span style="color: #66cc66;">/</span>&gt;</span>
    <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">img</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;images/beach2.jpg&quot;</span> <span style="color: #000066;">width</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;200&quot;</span> <span style="color: #000066;">height</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;200&quot;</span> <span style="color: #66cc66;">/</span>&gt;</span>
    <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">img</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;images/beach3.jpg&quot;</span> <span style="color: #000066;">width</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;200&quot;</span> <span style="color: #000066;">height</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;200&quot;</span> <span style="color: #66cc66;">/</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span></pre></td></tr></table></div>

<p><strong>CSS:</strong></p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
</pre></td><td class="code"><pre class="css" style="font-family:monospace;"><span style="color: #6666ff;">.pics</span> <span style="color: #00AA00;">&#123;</span>
    <span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span>  <span style="color: #933;">232px</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span>   <span style="color: #933;">232px</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">margin</span><span style="color: #00AA00;">:</span>  <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span> 
&nbsp;
<span style="color: #6666ff;">.pics</span> img <span style="color: #00AA00;">&#123;</span>
    <span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span> <span style="color: #933;">15px</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">border</span><span style="color: #00AA00;">:</span>  <span style="color: #933;">1px</span> <span style="color: #993333;">solid</span> <span style="color: #cc00cc;">#ccc</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">background-color</span><span style="color: #00AA00;">:</span> <span style="color: #cc00cc;">#eee</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span>  <span style="color: #933;">200px</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span> <span style="color: #933;">200px</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">top</span><span style="color: #00AA00;">:</span>  <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">left</span><span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">0</span>
<span style="color: #00AA00;">&#125;</span></pre></td></tr></table></div>

<p><strong>JavaScript:</strong></p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;">$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#s1'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">cycle</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'fade'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>Puedes acceder a la <strong>web oficial</strong> para obtener más información, la descarga, ejemplos de <strong>códigos fuentes</strong> y <strong>ejemplos </strong>en funcionamiento desde el siguiente enlace:</p>
<p><a href="http://malsup.com/jquery/cycle/">jQuery Cycle Plugin.</a></p>
</div>]]></content:encoded>
			<wfw:commentRss>http://www.zoneartcss.com/webdevelopment/programacion-con-style/jquery-cycle-plugin-%e2%80%93-transiciones-animadas-de-imagenes-slideshow/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>PrettyPhoto, un Lightbox de jQuery</title>
		<link>http://www.zoneartcss.com/webdevelopment/programacion-con-style/prettyphoto-un-lightbox-de-jquery/</link>
		<comments>http://www.zoneartcss.com/webdevelopment/programacion-con-style/prettyphoto-un-lightbox-de-jquery/#comments</comments>
		<pubDate>Tue, 30 Jun 2009 18:36:45 +0000</pubDate>
		<dc:creator>Liz Palacios</dc:creator>
				<category><![CDATA[Programación con Style]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[js]]></category>
		<category><![CDATA[Photo]]></category>
		<category><![CDATA[plugin]]></category>
		<category><![CDATA[Pretty]]></category>

		<guid isPermaLink="false">http://www.zoneartcss.com/?p=64</guid>
		<description><![CDATA[Hola!! como estan Les dejo aki uno de mis Lightbox favoritos, la verdad esta muy chido!! es muy facil de utilizar. Les paso el Link para que lo apliquen!!]]></description>
			<content:encoded><![CDATA[<div id=HOTWordsTxt name=HOTWordsTxt><p style="text-align: center;"><a title="Ver demo Pretty Photo Lightbox" href="http://www.no-margin-for-errors.com/projects/prettyPhoto-jquery-lightbox-clone"><img class="aligncenter" src="http://www.zoneartcss.com/wp-content/lightbox_prettyphoto.jpg" alt="Pretty Photo" width="500" height="130" /></a></p>
<p>Hola!!<br />
como estan Les dejo aki uno de mis <strong><a href="http://www.miempresaenlinea.com">Lightbox</a></strong> favoritos, la verdad esta muy chido!!<br />
es muy facil de utilizar.<br />
<span id="more-64"></span><br />
Les paso el <a href="http://www.no-margin-for-errors.com/projects/prettyPhoto-jquery-lightbox-clone/">Link</a> para que lo apliquen!!</p>
</div>]]></content:encoded>
			<wfw:commentRss>http://www.zoneartcss.com/webdevelopment/programacion-con-style/prettyphoto-un-lightbox-de-jquery/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

