<?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>jQuery Tutorials &#38; Plugins &#187; s3Slider</title>
	<atom:link href="http://jqueryblog.net/tag/s3slider/feed/" rel="self" type="application/rss+xml" />
	<link>http://jqueryblog.net</link>
	<description></description>
	<lastBuildDate>Mon, 05 Jul 2010 08:45:57 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.6</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>s3Slider jQuery Plugin &amp; Tutorial</title>
		<link>http://jqueryblog.net/2009/11/s3slider-jquery-plugin-tutorial/</link>
		<comments>http://jqueryblog.net/2009/11/s3slider-jquery-plugin-tutorial/#comments</comments>
		<pubDate>Tue, 10 Nov 2009 14:47:16 +0000</pubDate>
		<dc:creator>Osman Erdo&#287;an</dc:creator>
				<category><![CDATA[jQuery Plugin]]></category>
		<category><![CDATA[jQuery Tutorial]]></category>
		<category><![CDATA[image slider]]></category>
		<category><![CDATA[Plugin]]></category>
		<category><![CDATA[s3Slider]]></category>
		<category><![CDATA[slider]]></category>
		<category><![CDATA[Tutorial]]></category>

		<guid isPermaLink="false">http://jqueryblog.net/?p=22</guid>
		<description><![CDATA[The s3Slider jQuery plugin is made by example of jd`s smooth slide show script.
Usage:
&#60;script src=&#34;js/jquery.js&#34; type=&#34;text/javascript&#34;&#62;&#60;/script&#62;
&#60;script src=&#34;js/s3Slider.js&#34; type=&#34;text/javascript&#34;&#62;&#60;/script&#62;
HTML:
&#60;div id=&#34;s3slider&#34;&#62;
   &#60;ul id=&#34;s3sliderContent&#34;&#62;
      &#60;li class=&#34;s3sliderImage&#34;&#62;
          &#60;img src=&#34;#&#34; /&#62;
          &#60;span&#62;Your text comes here&#60;/span&#62;
 [...]]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 10px;"><a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fjqueryblog.net%2F2009%2F11%2Fs3slider-jquery-plugin-tutorial%2F"><img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fjqueryblog.net%2F2009%2F11%2Fs3slider-jquery-plugin-tutorial%2F" height="61" width="51" /></a></div><p>The s3Slider jQuery plugin is made by example of jd`s smooth slide show script.</p>
<p><strong>Usage:</strong></p>
<pre class="brush: jscript;">&lt;script src=&quot;js/jquery.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;js/s3Slider.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;</pre>
<p><strong>HTML:</strong></p>
<pre class="brush: xml;">&lt;div id=&quot;s3slider&quot;&gt;
   &lt;ul id=&quot;s3sliderContent&quot;&gt;
      &lt;li class=&quot;s3sliderImage&quot;&gt;
          &lt;img src=&quot;#&quot; /&gt;
          &lt;span&gt;Your text comes here&lt;/span&gt;
      &lt;/li&gt;
      &lt;li class=&quot;s3sliderImage&quot;&gt;
          &lt;img src=&quot;#&quot; /&gt;
          &lt;span&gt;Your text comes here&lt;/span&gt;
      &lt;/li&gt;
      &lt;div class=&quot;clear s3sliderImage&quot;&gt;&lt;/div&gt;
   &lt;/ul&gt;
&lt;/div&gt;</pre>
<p><strong>Sample CSS:</strong></p>
<pre class="brush: css;">#s3slider {
   width: 400px; /* important to be same as image width */
   height: 300px; /* important to be same as image height */
   position: relative; /* important */
   overflow: hidden; /* important */
}

#s3sliderContent {
   width: 400px; /* important to be same as image width or wider */
   position: absolute; /* important */
   top: 0; /* important */
   margin-left: 0; /* important */
}

.s3sliderImage {
   float: left; /* important */
   position: relative; /* important */
   display: none; /* important */
}

.s3sliderImage span {
   position: absolute; /* important */
   left: 0;
   font: 10px/15px Arial, Helvetica, sans-serif;
   padding: 10px 13px;
   width: 374px;
   background-color: #000;
   filter: alpha(opacity=70); /* here you can set the opacity of box with text */
   -moz-opacity: 0.7; /* here you can set the opacity of box with text */
   -khtml-opacity: 0.7; /* here you can set the opacity of box with text */
   opacity: 0.7; /* here you can set the opacity of box with text */
   color: #fff;
   display: none; /* important */
   top: 0;

   /*
       if you put
       top: 0; -&gt; the box with text will be shown at the top of the image
       if you put
       bottom: 0; -&gt; the box with text will be shown at the bottom of the image
   */
}

.clear {
   clear: both;
}</pre>
<p><strong>Inside in HTML:</strong></p>
<pre class="brush: jscript;">$(document).ready(function() {
   $('#s3slider').s3Slider({
      timeOut: 4000
   });
});</pre>
<p><em><strong>timeOut</strong></em>: values in miliseconds&#8230;</p>
<p><a href="http://serie3.info/s3slider/demonstration.html" target="_blank">Example</a> &#8211; <a href="http://serie3.info/s3slider/index.php" target="_blank">Website</a></p>
<p><strong>Download</strong></p>
<p><a href="http://serie3.info/s3slider/style/code/s3SliderFull.rar" target="_blank">Full version (with examples)</a> (size: 574kb)<br />
<a href="http://serie3.info/s3slider/style/code/s3Slider.rar" target="_blank">Uncompressed version</a> (size: 4.12kb)<br />
<a href="http://serie3.info/s3slider/style/code/s3SliderPacked.rar" target="_blank">Compressed version</a> (size: 1.66kb)</p>
]]></content:encoded>
			<wfw:commentRss>http://jqueryblog.net/2009/11/s3slider-jquery-plugin-tutorial/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

