<?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>lightbox &#8211; Matthew Petroff</title>
	<atom:link href="https://mpetroff.net/tag/lightbox/feed/" rel="self" type="application/rss+xml" />
	<link>https://mpetroff.net</link>
	<description>mpetroff.net</description>
	<lastBuildDate>Wed, 30 Nov 2016 02:22:33 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	
	<item>
		<title>Introducing Slenderbox</title>
		<link>https://mpetroff.net/2012/12/introducing-slenderbox/</link>
					<comments>https://mpetroff.net/2012/12/introducing-slenderbox/#respond</comments>
		
		<dc:creator><![CDATA[Matthew Petroff]]></dc:creator>
		<pubDate>Thu, 20 Dec 2012 20:15:23 +0000</pubDate>
				<category><![CDATA[Programming]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[lightbox]]></category>
		<category><![CDATA[plugin]]></category>
		<category><![CDATA[Slenderbox]]></category>
		<category><![CDATA[wordpress]]></category>
		<guid isPermaLink="false">http://www.mpetroff.net/?p=808</guid>

					<description><![CDATA[For the past two years, I&#8217;ve been using a WordPress lightbox plugin based on v2.0x of Lightbox 2 for displaying full-size images. While it worked well, it was also quite large, relying on the Prototype JavaScript framework. Looking at alternatives, &#8230; <a href="https://mpetroff.net/2012/12/introducing-slenderbox/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
										<content:encoded><![CDATA[<p><span class="dropcap">F</span>or the past two years, I&#8217;ve been using a WordPress lightbox plugin based on v2.0x of <a href="http://lokeshdhakar.com/projects/lightbox2/">Lightbox 2</a> for displaying full-size images. While it worked well, it was also quite large, relying on the <a href="http://prototypejs.org/">Prototype</a> JavaScript framework. Looking at alternatives, I found that almost all were based on <a href="http://jquery.com/">jQuery</a>, something I found to be overkill for something simple like a lightbox script. As I found nothing nearly as optimized as I would like, I set out to write my own script.</p>
<p>Using CSS3, SVG, and regular JavaScript, I was able to write a script, <a href="http://mpetroff.github.io/slenderbox/">Slenderbox</a>, that is just 2kB minified and gzipped, smaller than even the GIF loading icons used by most similar scripts. The only downside is older browsers aren&#8217;t supported, particularly Internet Explorer prior to version 9. <del datetime="2013-03-07T01:23:38+00:00">In addition, the loading icon is a SMIL animated SVG, which isn&#8217;t supported by any version of Internet Explorer.</del> Starting with version 1.1, a CSS3 animation, supported by Internet Explorer 10+, is used for the loading icon.<br />

<a href='https://cdn0.mpetroff.net/wp-content/uploads/2012/12/img0.jpg' data-sbox="808"><img loading="lazy" decoding="async" width="150" height="150" src="https://cdn0.mpetroff.net/wp-content/uploads/2012/12/img0-150x150.jpg" class="attachment-thumbnail size-thumbnail" alt="" /></a>
<a href='https://cdn0.mpetroff.net/wp-content/uploads/2012/12/img2.jpg' data-sbox="808"><img loading="lazy" decoding="async" width="150" height="150" src="https://cdn0.mpetroff.net/wp-content/uploads/2012/12/img2-150x150.jpg" class="attachment-thumbnail size-thumbnail" alt="" /></a>
<a href='https://cdn0.mpetroff.net/wp-content/uploads/2012/12/img5.jpg' data-sbox="808"><img loading="lazy" decoding="async" width="150" height="150" src="https://cdn0.mpetroff.net/wp-content/uploads/2012/12/img5-150x150.jpg" class="attachment-thumbnail size-thumbnail" alt="" /></a>
</p>
<p>Slenderbox is available <a href="http://mpetroff.github.io/slenderbox/">by itself</a> and as a <a href="http://wordpress.org/extend/plugins/slenderbox/">WordPress plugin</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://mpetroff.net/2012/12/introducing-slenderbox/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>

<!--
Performance optimized by W3 Total Cache. Learn more: https://www.boldgrid.com/w3-total-cache/?utm_source=w3tc&utm_medium=footer_comment&utm_campaign=free_plugin

Page Caching using Disk: Enhanced 
Content Delivery Network via Amazon Web Services: CloudFront: cdn0.mpetroff.net
Minified using Disk

Served from: mpetroff.net @ 2026-03-29 22:11:41 by W3 Total Cache
-->