<?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; images</title>
	<atom:link href="http://jqueryblog.net/tag/images/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>Image Captions Generated with CSS and jQuery</title>
		<link>http://jqueryblog.net/2009/11/image-captions-generated-with-css-and-jquery/</link>
		<comments>http://jqueryblog.net/2009/11/image-captions-generated-with-css-and-jquery/#comments</comments>
		<pubDate>Mon, 30 Nov 2009 20:02:54 +0000</pubDate>
		<dc:creator>Osman Erdo&#287;an</dc:creator>
				<category><![CDATA[jQuery Tutorial]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[css jquery]]></category>
		<category><![CDATA[examples]]></category>
		<category><![CDATA[image]]></category>
		<category><![CDATA[image captions]]></category>
		<category><![CDATA[image css]]></category>
		<category><![CDATA[images]]></category>
		<category><![CDATA[jquery examples]]></category>

		<guid isPermaLink="false">http://jqueryblog.net/?p=64</guid>
		<description><![CDATA[This script have very simple usage;
Usage
Script:
$(document).ready(function(){
	$('img.captioned').each(
		function() {
			var caption = $(this).attr('title');
			$(this)
				.wrap('&#60;div class=&#34;imgcontainer&#34;&#62;&#60;/div&#62;')
				.after('&#60;div class=&#34;caption&#34;&#62;'+caption+'&#60;/div&#62;');
		}
	);
});
CSS:
.imgcontainer {
	position:relative;
	float:left;
	}
.caption {
	position:absolute;
	bottom:0;
	left:0;
	text-align:center;
	background:#fff;
	width:100%;
	opacity:.75;
	filter:alpha(opacity=85);
	color:#000;
	}
.imgcontainer img {display:block;}
HTML:
&#60;img src=&#34;images/news1.jpg&#34; class=&#34;captioned&#34; alt=&#34;&#34; title=&#34;jQuery blog News#1&#34; /&#62;
&#60;img src=&#34;images/news2.jpg&#34; class=&#34;captioned&#34; alt=&#34;&#34; title=&#34;jQuery blog News#2&#34; /&#62;
Demo
]]></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%2Fimage-captions-generated-with-css-and-jquery%2F"><img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fjqueryblog.net%2F2009%2F11%2Fimage-captions-generated-with-css-and-jquery%2F" height="61" width="51" /></a></div><p>This script have very simple usage;</p>
<p><strong>Usage</strong><br />
<em>Script:</em></p>
<pre class="brush: jscript;">$(document).ready(function(){
	$('img.captioned').each(
		function() {
			var caption = $(this).attr('title');
			$(this)
				.wrap('&lt;div class=&quot;imgcontainer&quot;&gt;&lt;/div&gt;')
				.after('&lt;div class=&quot;caption&quot;&gt;'+caption+'&lt;/div&gt;');
		}
	);
});</pre>
<p><em>CSS:</em></p>
<pre class="brush: css;">.imgcontainer {
	position:relative;
	float:left;
	}
.caption {
	position:absolute;
	bottom:0;
	left:0;
	text-align:center;
	background:#fff;
	width:100%;
	opacity:.75;
	filter:alpha(opacity=85);
	color:#000;
	}
.imgcontainer img {display:block;}</pre>
<p><em>HTML:</em></p>
<pre class="brush: xml;">&lt;img src=&quot;images/news1.jpg&quot; class=&quot;captioned&quot; alt=&quot;&quot; title=&quot;jQuery blog News#1&quot; /&gt;
&lt;img src=&quot;images/news2.jpg&quot; class=&quot;captioned&quot; alt=&quot;&quot; title=&quot;jQuery blog News#2&quot; /&gt;</pre>
<p><a href="http://www.askthecssguy.com/examples/examplesUsingjQuery/imageCaptions.html" target="_blank">Demo</a></p>
]]></content:encoded>
			<wfw:commentRss>http://jqueryblog.net/2009/11/image-captions-generated-with-css-and-jquery/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
