<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta content="This example shows you how to create an amazing gallery with booth strips style, using jQuery. It also includes a lightbox when you click over the thumbnails|Page-1" name="description"/>
<meta name="keywords" content="ajax,php,javascript,templates,frameworks, js, ajax plugins,net ajax,ajax manual, ajax jquery, jquery autocomplete,addons,javascript demos, scripting, XML, Web Services, php ajax,xslt, DHTML, web applications, Ajax JavaScript, javascript programming,scripts, jQuery, jQuery scripts, jQuery plugin,prototype,scriptaculous,mootools"/>
<title>
Photo strips effect with lightbox using jQuery - photoStrips -
JQUERY |Javascript Examples
| Page-1
</title>
<link rel="canonical" href="http://www.ajaxshake.com/en/JS/2410961/photo-strips-effect-with-lightbox-using-jquery-photostrips.html"/>
<base href="http://www.ajaxshake.com/"/>
<link rel="alternate" type="application/rss+xml" title="AjaxShake RSS Feed" href="http://feeds.feedburner.com/ajaxshake"/>
<link rel="stylesheet" href="public/resources/styles/all.3.0.min.css" type="text/css" media="screen, projection"/>
<link rel="shortcut icon" href="http://www.ajaxshake.com/favicon.ico"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<div class="container">
<div id="showPictures"></div>
<div id="header" class="span-24 last">
<div class="headerLogo">
<div id="shaker"><a id="ajaxshakeLink" onclick="markinfo(1,'logo')" href="http://www.ajaxshake.com/"><img class="logo" alt="AJAXSHAKE" src="public/resources/images/logo.jpg"/></a></div>
</div>
<div id="sections">
<ul>
<li>
<h1><a rel="nofollow" class="sectionActive" href="http://www.ajaxshake.com/">Javascript Examples</a></h1>
</li>
</ul>
</div>
<div class="ilikeit">
</div>
<div id="facebookLogin" class="facebookLogin">
</div>
<div class="socialItems">
<a rel="nofollow" target="_blank" href="http://feeds.feedburner.com/ajaxshake" title="Ajaxshake Feed Rss">
<img src="public/resources/images/social/feed.png"/>
</a>
<a rel="nofollow" target="_blank" href="http://www.facebook.com/pages/AjaxShake/126603027394570" title="Ajaxshake Facebook">
<img src="public/resources/images/social/facebook.png"/>
</a>
<a rel="nofollow" target="_blank" href="http://www.twitter.com/ajaxshake" title="Ajaxshake Twitter">
<img src="public/resources/images/social/twitter.png"/>
</a>
</div>
<div class="clear"></div>
<div class="lanBox">
<a href="javascript:void(0);"><img width='32px' height='32px' src="public/resources/images/eng32.png" alt="EN"/></a>
<a href="http://www.ajaxshake.com/es/JS/2410961/galeria-de-fotos-estilo-tiras-fotograficas-con-lightbox-usando-jquery-photostrips.html"><img width='32px' height='32px' src="public/resources/images/spa32.png" alt="ES"/></a>
</div>
</div>
<div class="globalContent">
<div id="leftContent" class="span-15 first">
<div style="margin-bottom: 50px;">
 
<div id="bsap_1278345" class="bsarocks bsap_95111c43e0348a419d1a20d834c0b28f"></div>
 
<div class="clear"></div>
</div>
<div class="linkNewWin">
<div class="newWinOp"><input id="openLink" name="openLink" type="checkbox" onClick="openLink('http://www.ajaxshake.com/en/JS/2410961/nb/photo-strips-effect-with-lightbox-using-jquery-photostrips.html');" checked /><label for="openLink">Open Links in a new Window</label></div>
</div>
<div class="post">
<div class="postTitle">
<h2 class="l titlemax">
Photo strips effect with lightbox using jQuery </h2>
</div>
<div class="clear"></div>
<div class="categoriesBar">
<div class="categoriesLinks">
<span class="tagLabel">Tags:</span>
<a rel="nofollow" onclick="markinfo(1,'category-b')" href="http://www.ajaxshake.com/en/JS/1111/jquery.html" class="barLink">JQUERY</a>
<span class="firstPost">,&nbsp;</span>
<a rel="nofollow" onclick="markinfo(62,'category-b')" href="http://www.ajaxshake.com/en/JS/12621/styles.html" class="barLink">styles</a>
<span class="firstPost">,&nbsp;</span>
<a rel="nofollow" onclick="markinfo(13,'category-b')" href="http://www.ajaxshake.com/en/JS/12131/galleries.html" class="barLink">Galleries</a>
<span class="firstPost">,&nbsp;</span>
<a rel="nofollow" onclick="markinfo(26,'category-b')" href="http://www.ajaxshake.com/en/JS/12261/lightbox.html" class="barLink">LightBox</a>
<a rel="nofollow" href="http://www.ajaxshake.com/en/JS/2410961/photo-strips-effect-with-lightbox-using-jquery-photostrips.html#comments" class="barLink"> | Comments(3)</a>
</div>
<div class="clear"></div>
</div>
<div class="mainPostSocial">
<a rel="nofollow" href="http://twitter.com/share" data-url="http://www.ajaxshake.com/en/JS/2410961/photo-strips-effect-with-lightbox-using-jquery-photostrips.html" data-text="Photo strips effect with lightbox using jQuery" class="twitter-share-button" data-count="horizontal" data-via="Ajaxshake">Tweet</a>
</div>
<div class="fblike" style="width:116px;">
<div id="fb-root"></div>
<fb:like href="http://www.ajaxshake.com/en/JS/2410961/photo-strips-effect-with-lightbox-using-jquery-photostrips.html" layout="button_count" width="450" send="true" show_faces="true"></fb:like>
</div>
<div style="width:100px; float:left;margin-top:18px;margin-left:35px;">
<g:plusone></g:plusone>
</div>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<div class="clear"></div>
<p class="postDescription">
This example shows you how to create an amazing gallery with booth strips style, using jQuery. It also includes a lightbox when you click over the thumbnails
<div class="centralImage">
<a rel="nofollow" title="Photo strips effect with lightbox using jQuery&nbsp;-&nbsp;photoStrips" href="http://www.ajaxshake.com/en/JS/2410961/photo-strips-effect-with-lightbox-using-jquery-photostrips.html" onClick="showPictures(1096);return false;">
<img src="http://www.ajaxshake.com/public/usersFiles/main/link_user_1_abb9a.jpg" alt="Photo strips effect with lightbox using jQuery&nbsp;-&nbsp;photoStrips" style="cursor:pointer;"/>
</a>
</div>
<div style="margin-bottom:50px;margin-top:50px">
<script type="text/javascript"><!--
                google_ad_client = "ca-pub-2827027577271242";
                /* Ajaxshake Banner 1 */
                google_ad_slot = "0453445685";
                google_ad_width = 728;
                google_ad_height = 90;
                //-->
                </script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
                </script>
</div>
<div class="bigSection">
<div class="tTip" title="
                    <span class='scriptInfo'><b>photoStrips</b></span>
                    <br/>
                    <b>Requiriments:&nbsp;</b><br/>jQuery 1.7<br/>                    <b>License:&nbsp;</b>License Free                    <br/>
                    <b>Size:&nbsp;</b>n/a&nbsp;(v1.0)<br/>                    <b>Author:&nbsp;</b>&nbsp;Mary Lou                    <br/>
                    <span class='tipLanLabel'>Language:&nbsp;</span>
                    <img src='public/resources/images/eng24.png' /><div class='clear'></div> ">
<a class="bigLink linkDownloadEN" target="_blank" href="http://www.ajaxshake.com/plugin/EN/1096/838953ec/photo-strips-effect-with-lightbox-using-jquery-photostrips.html" onClick="setView(1096,'EN');"></a>
</div>
<a class="bigLink linkDemoEN" target="_blank" href="http://www.ajaxshake.com/demo/EN/1096/838953ec/photo-strips-effect-with-lightbox-using-jquery-photostrips.html" onClick="setView(1096,'EN');"></a>
</div>
</p>
</div>
<div class="ads3">
 
<div id="bsap_1261933" class="bsarocks bsap_95111c43e0348a419d1a20d834c0b28f"></div>
 
</div>
<div>
<script type="text/javascript"><!--
        google_ad_client = "pub-2827027577271242";
        /* AJAXSHAKE 3 */
        google_ad_slot = "7420787432";
        google_ad_width = 336;
        google_ad_height = 280;
        //-->
        </script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
        </script>
</div>
<a rel="nofollow" name="comments"></a>
﻿<div class="hcomment">
<h3>Comments</h3>
</div>
<div class="bcomment">
<h4>
<div class="l">
arturo:
</div>
<span>2012-09-03 12:09:19</span>
</h4>
<div class="clear"> </div>
<div class="mainCommentInfo">
</div>
<p class="l">
cool
</p>
<div class="clear"> </div>
</div>
<div class="bcomment">
<h4>
<div class="l">
Ali:
</div>
<span>2012-10-27 16:10:05</span>
</h4>
<div class="clear"> </div>
<div class="mainCommentInfo">
<a href="http://mintik.com" rel="nofollow"> <img src="public/resources/images/net.png" alt="web"/></a> </div>
<p class="l">
Very useful example. Thanks.
</p>
<div class="clear"> </div>
</div>
<div class="bcomment">
<h4>
<div class="l">
Raúl:
</div>
<span>2013-02-22 09:02:46</span>
</h4>
<div class="clear"> </div>
<div class="mainCommentInfo">
</div>
<p class="l">
Hi there!<br/>
<br/>
First of all, thanks for your help.<br/>
I was wondering if it is possible to remove the white squares on the pictures. <br/>
Thanks a lot,<br/>
<br/>
Raúl.-
</p>
<div class="clear"> </div>
</div>
<div id="addComent_1096" class="addComment">
<div class="leaveComment">
Leave a comment
</div>
<form id="commentForm" name="commentForm">
<div><label>Name:</label><input type="text" id="commentName" name="commentName"/></div>
<div class="clear"></div>
<div><label>Web Site:</label><input type="text" id="website" name="website" class="commentBox"/><span class="minText">[Optional]</span></div>
<div class="clear"></div>
<div><label>e-mail:</label><input type="text" id="mail" name="mail" class="commentBox"/><span class="minText">(Will not be shown on the site)</span></div>
<div class="clear"></div>
<div><label>Twitter:</label><input type="text" id="twitter" name="twitter" class="commentBox"/><span class="minText">[Optional]</span></div>
<div class="clear"></div>
<div><label>Facebook:</label><input type="text" id="facebook" name="facebook" class="commentBox"/><span class="minText">[Optional]</span></div>
<div class="clear"></div>
<div><label>Comment:</label><textarea id="comment" name="comment"></textarea></div>
<div><input type="button" class="r" value="Send" onclick="$('#captcha_1096').attr('src',$('#captcha_1096').attr('data-src'));$('.commmarg').show();$(this).hide();"/></div>
<div class="commmarg" style="display:none;">
<input type="hidden" name="post" id="post" value="1096"/>
<input type="hidden" name="lan" id="lan" value="EN"/>
<img id="captcha_1096" class="commentClass l" data-src="/lib/simplephpcaptcha/captcha.php?rnd=213984995" src=""/>
<img src="public/resources/images/refresh.png" onclick="renewCaptcha(1096);" class="l refresh"/>
<label>Capcha:</label>
<input type="text" name="captcha" id="captcha" class="l"/>
<input type="button" class="r" value="Send" onclick="sendComment(1096,'The comment has been saved succesfuly.<br/>It will be checked before appear in this section<br/>Please don\'t duplicate the comment.','Please check the captcha and try again.');"/>
<div class="clear"></div>
</div>
</form>
</div> </div>
<div id="rightContent" class="span-9 last">
<div id="search">
<input type="text" name="searchBox" id="searchBox" onkeypress="checkKey(event);" value="Search ..." onfocus="checkSearch(this,'Search ...')"/>
<a rel="nofollow" id="searchbutton" href="javascript:void(0);" onclick="searchString('http://www.ajaxshake.com/en/JS')"><img alt="Search" src="public/resources/images/searchButton.gif"/></a>
<div class="searchFound">
</div>
<div class="clear"></div>
</div>
<div class="generalOptions">
<div class="inner" style="width:256px;">
<div id="filterLoadIcon" class="l dn"><img alt="Loading ..." src="public/resources/images/ajax-loader.gif"/></div>
<a rel="nofollow" href="javascript:void(0);" class="filterSelectLink">Filter By Category</a>
<div class="clear"></div>
<div id="filterAdder">
<div class="filterSelect" style="display:none;">
<a rel="nofollow" href="http://www.ajaxshake.com/en/JS/12101/accordions.html" data-id="10">Accordions</a>
<a rel="nofollow" href="http://www.ajaxshake.com/en/JS/131351/android.html" data-id="135">Android</a>
<a rel="nofollow" href="http://www.ajaxshake.com/en/JS/12601/animation.html" data-id="60">Animation</a>
<a rel="nofollow" href="http://www.ajaxshake.com/en/JS/12831/asp-net.html" data-id="83">ASP.NET</a>
<a rel="nofollow" href="http://www.ajaxshake.com/en/JS/131341/audio.html" data-id="134">Audio</a>
<a rel="nofollow" href="http://www.ajaxshake.com/en/JS/12521/autocomplete.html" data-id="52">Autocomplete</a>
<a rel="nofollow" href="http://www.ajaxshake.com/en/JS/12941/banners.html" data-id="94">Banners</a>
<a rel="nofollow" href="http://www.ajaxshake.com/en/JS/12781/buttons.html" data-id="78">Buttons</a>
<a rel="nofollow" href="http://www.ajaxshake.com/en/JS/1151/calendars.html" data-id="5">Calendars</a>
<a rel="nofollow" href="http://www.ajaxshake.com/en/JS/12901/captcha.html" data-id="90">Captcha</a>
<a rel="nofollow" href="http://www.ajaxshake.com/en/JS/12951/caption.html" data-id="95">Caption</a>
<a rel="nofollow" href="http://www.ajaxshake.com/en/JS/12971/carousel.html" data-id="97">Carousel</a>
<a rel="nofollow" href="http://www.ajaxshake.com/en/JS/12361/charts.html" data-id="36">Charts</a>
<a rel="nofollow" href="http://www.ajaxshake.com/en/JS/131141/chat.html" data-id="114">Chat</a>
<a rel="nofollow" href="http://www.ajaxshake.com/en/JS/12711/checkbox.html" data-id="71">Checkbox</a>
<a rel="nofollow" href="http://www.ajaxshake.com/en/JS/12141/clocks.html" data-id="14">Clocks</a>
<a rel="nofollow" href="http://www.ajaxshake.com/en/JS/12671/color-picker.html" data-id="67">Color Picker</a>
<a rel="nofollow" href="http://www.ajaxshake.com/en/JS/12841/counters.html" data-id="84">Counters</a>
<a rel="nofollow" href="http://www.ajaxshake.com/en/JS/12691/crop-resize.html" data-id="69">Crop-resize</a>
<a rel="nofollow" href="http://www.ajaxshake.com/en/JS/1181/css.html" data-id="8">CSS</a>
<a rel="nofollow" href="http://www.ajaxshake.com/en/JS/131181/database.html" data-id="118">DataBase</a>
<a rel="nofollow" href="http://www.ajaxshake.com/en/JS/12501/dates-pickers.html" data-id="50">Dates Pickers</a>
<a rel="nofollow" href="http://www.ajaxshake.com/en/JS/12791/dijit.html" data-id="79">Dijit</a>
<a rel="nofollow" href="http://www.ajaxshake.com/en/JS/12771/dojo.html" data-id="77">Dojo</a>
<a rel="nofollow" href="http://www.ajaxshake.com/en/JS/12761/drag-and-drop.html" data-id="76">Drag and Drop</a>
<a rel="nofollow" href="http://www.ajaxshake.com/en/JS/12731/encryption.html" data-id="73">Encryption</a>
<a rel="nofollow" href="http://www.ajaxshake.com/en/JS/12991/ext-js.html" data-id="99">Ext.JS</a>
<a rel="nofollow" href="http://www.ajaxshake.com/en/JS/131001/filter.html" data-id="100">Filter</a>
<a rel="nofollow" href="http://www.ajaxshake.com/en/JS/1141/flash.html" data-id="4">Flash</a>
<a rel="nofollow" href="http://www.ajaxshake.com/en/JS/12911/fonts.html" data-id="91">Fonts</a>
<a rel="nofollow" href="http://www.ajaxshake.com/en/JS/12451/forms.html" data-id="45">Forms</a>
<a rel="nofollow" href="http://www.ajaxshake.com/en/JS/12131/galleries.html" data-id="13">Galleries</a>
<a rel="nofollow" href="http://www.ajaxshake.com/en/JS/1171/grid.html" data-id="7">Grid</a>
<a rel="nofollow" href="http://www.ajaxshake.com/en/JS/131161/html-wysiwyg-editors.html" data-id="116">Html WYSIWYG editors</a>
<a rel="nofollow" href="http://www.ajaxshake.com/en/JS/131331/html5.html" data-id="133">HTML5</a>
<a rel="nofollow" href="http://www.ajaxshake.com/en/JS/131191/icons.html" data-id="119">Icons</a>
<a rel="nofollow" href="http://www.ajaxshake.com/en/JS/12581/image-slider.html" data-id="58">image slider</a>
<a rel="nofollow" href="http://www.ajaxshake.com/en/JS/12631/images-and-photos-.html" data-id="63">Images and photos </a>
<a rel="nofollow" href="http://www.ajaxshake.com/en/JS/1111/jquery.html" data-id="1">JQUERY</a>
<a rel="nofollow" href="http://www.ajaxshake.com/en/JS/12261/lightbox.html" data-id="26">LightBox</a>
<a rel="nofollow" href="http://www.ajaxshake.com/en/JS/12541/login.html" data-id="54">login</a>
<a rel="nofollow" href="http://www.ajaxshake.com/en/JS/131171/maps.html" data-id="117">Maps</a>
<a rel="nofollow" href="http://www.ajaxshake.com/en/JS/1191/menus.html" data-id="9">Menus</a>
<a rel="nofollow" href="http://www.ajaxshake.com/en/JS/131321/mobile.html" data-id="132">Mobile</a>
<a rel="nofollow" href="http://www.ajaxshake.com/en/JS/12741/modal-windows.html" data-id="74">Modal Windows</a>
<a rel="nofollow" href="http://www.ajaxshake.com/en/JS/12861/moo-fx.html" data-id="86">Moo.FX</a>
<a rel="nofollow" href="http://www.ajaxshake.com/en/JS/12111/mootools.html" data-id="11">Mootools</a>
<a rel="nofollow" href="http://www.ajaxshake.com/en/JS/12981/mouseover-.html" data-id="98">Mouseover </a>
<a rel="nofollow" href="http://www.ajaxshake.com/en/JS/12571/order-reorder.html" data-id="57">Order/Reorder</a>
<a rel="nofollow" href="http://www.ajaxshake.com/en/JS/12611/pagination.html" data-id="61">pagination</a>
<a rel="nofollow" href="http://www.ajaxshake.com/en/JS/12531/php.html" data-id="53">PHP</a>
<a rel="nofollow" href="http://www.ajaxshake.com/en/JS/12641/popup.html" data-id="64">popup</a>
<a rel="nofollow" href="http://www.ajaxshake.com/en/JS/1121/prototype.html" data-id="2">Prototype</a>
<a rel="nofollow" href="http://www.ajaxshake.com/en/JS/12421/pure-javascript.html" data-id="42">Pure JavaScript</a>
<a rel="nofollow" href="http://www.ajaxshake.com/en/JS/12821/ranking.html" data-id="82">Ranking</a>
<a rel="nofollow" href="http://www.ajaxshake.com/en/JS/12751/resize.html" data-id="75">Resize</a>
<a rel="nofollow" href="http://www.ajaxshake.com/en/JS/1131/scriptaculous.html" data-id="3">Scriptaculous</a>
<a rel="nofollow" href="http://www.ajaxshake.com/en/JS/12561/scrollable.html" data-id="56">Scrollable</a>
<a rel="nofollow" href="http://www.ajaxshake.com/en/JS/12701/select-list.html" data-id="70">Select list</a>
<a rel="nofollow" href="http://www.ajaxshake.com/en/JS/12921/sort.html" data-id="92">Sort</a>
<a rel="nofollow" href="http://www.ajaxshake.com/en/JS/131201/source-code.html" data-id="120">Source Code</a>
<a rel="nofollow" href="http://www.ajaxshake.com/en/JS/12621/styles.html" data-id="62">styles</a>
<a rel="nofollow" href="http://www.ajaxshake.com/en/JS/12681/tables.html" data-id="68">Tables</a>
<a rel="nofollow" href="http://www.ajaxshake.com/en/JS/12121/tabs.html" data-id="12">tabs</a>
<a rel="nofollow" href="http://www.ajaxshake.com/en/JS/12931/tag-cloud.html" data-id="93">Tag Cloud</a>
<a rel="nofollow" href="http://www.ajaxshake.com/en/JS/12961/text.html" data-id="96">Text</a>
<a rel="nofollow" href="http://www.ajaxshake.com/en/JS/12511/time-picker.html" data-id="51">Time Picker</a>
<a rel="nofollow" href="http://www.ajaxshake.com/en/JS/12551/tooltips.html" data-id="55">Tooltips</a>
<a rel="nofollow" href="http://www.ajaxshake.com/en/JS/12591/transition.html" data-id="59">Transition</a>
<a rel="nofollow" href="http://www.ajaxshake.com/en/JS/131211/translators.html" data-id="121">Translators</a>
<a rel="nofollow" href="http://www.ajaxshake.com/en/JS/12871/tree.html" data-id="87">Tree</a>
<a rel="nofollow" href="http://www.ajaxshake.com/en/JS/12661/tutorial.html" data-id="66">Tutorial</a>
<a rel="nofollow" href="http://www.ajaxshake.com/en/JS/131221/uize.html" data-id="122">UIZE</a>
<a rel="nofollow" href="http://www.ajaxshake.com/en/JS/12811/upload-files.html" data-id="81">Upload Files</a>
<a rel="nofollow" href="http://www.ajaxshake.com/en/JS/12851/utilities.html" data-id="85">Utilities</a>
<a rel="nofollow" href="http://www.ajaxshake.com/en/JS/12441/validation.html" data-id="44">Validation</a>
<a rel="nofollow" href="http://www.ajaxshake.com/en/JS/12801/video.html" data-id="80">Video</a>
<a rel="nofollow" href="http://www.ajaxshake.com/en/JS/131011/web-mail.html" data-id="101">Web Mail</a>
<a rel="nofollow" href="http://www.ajaxshake.com/en/JS/12881/xhtml-editor.html" data-id="88">XHTML editor</a>
<a rel="nofollow" href="http://www.ajaxshake.com/en/JS/12891/yui.html" data-id="89">YUI</a>
<a rel="nofollow" href="http://www.ajaxshake.com/en/JS/12721/zoom.html" data-id="72">Zoom</a>
</div>
</div>
</div>
</div>
<div id="sky">
<div id="cloud">
<div class="inner">
 
<div id="bsap_1272111" class="bsarocks bsap_95111c43e0348a419d1a20d834c0b28f"></div>
 
 
 
<div id="bsap_1258716" class="bsarocks bsap_95111c43e0348a419d1a20d834c0b28f"></div>
 
</div>
<div class="clear"></div>
 
<div id="categories">
<div>
<ul class="categoriesSection" style="height:800px;">
<li class="title">
<h3 class="titleLabel">Categories</h3>
<div class="titleLine"></div>
</li>
<li>
<a onclick="markinfo(9,'category-c')" href="http://www.ajaxshake.com/en/JS/1191/menus.html" class="sectionLink">Menus</a><span class="sectionLink"> (130)</span>
</li>
<li>
<a onclick="markinfo(13,'category-c')" href="http://www.ajaxshake.com/en/JS/12131/galleries.html" class="sectionLink">Galleries</a><span class="sectionLink"> (239)</span>
</li>
<li>
<a onclick="markinfo(58,'category-c')" href="http://www.ajaxshake.com/en/JS/12581/image-slider.html" class="sectionLink">image slider</a><span class="sectionLink"> (164)</span>
</li>
<li>
<a onclick="markinfo(26,'category-c')" href="http://www.ajaxshake.com/en/JS/12261/lightbox.html" class="sectionLink">LightBox</a><span class="sectionLink"> (56)</span>
</li>
<li>
<a onclick="markinfo(45,'category-c')" href="http://www.ajaxshake.com/en/JS/12451/forms.html" class="sectionLink">Forms</a><span class="sectionLink"> (57)</span>
</li>
<li>
<a onclick="markinfo(10,'category-c')" href="http://www.ajaxshake.com/en/JS/12101/accordions.html" class="sectionLink">Accordions</a><span class="sectionLink"> (32)</span>
</li>
<li>
<a onclick="markinfo(5,'category-c')" href="http://www.ajaxshake.com/en/JS/1151/calendars.html" class="sectionLink">Calendars</a><span class="sectionLink"> (35)</span>
</li>
<li>
<a onclick="markinfo(60,'category-c')" href="http://www.ajaxshake.com/en/JS/12601/animation.html" class="sectionLink">Animation</a><span class="sectionLink"> (126)</span>
</li>
<li>
<a onclick="markinfo(7,'category-c')" href="http://www.ajaxshake.com/en/JS/1171/grid.html" class="sectionLink">Grid</a><span class="sectionLink"> (22)</span>
</li>
<li>
<a onclick="markinfo(53,'category-c')" href="http://www.ajaxshake.com/en/JS/12531/php.html" class="sectionLink">PHP</a><span class="sectionLink"> (48)</span>
</li>
<li>
<a onclick="markinfo(54,'category-c')" href="http://www.ajaxshake.com/en/JS/12541/login.html" class="sectionLink">login</a><span class="sectionLink"> (16)</span>
</li>
<li>
<a onclick="markinfo(59,'category-c')" href="http://www.ajaxshake.com/en/JS/12591/transition.html" class="sectionLink">Transition</a><span class="sectionLink"> (39)</span>
</li>
<li>
<a onclick="markinfo(64,'category-c')" href="http://www.ajaxshake.com/en/JS/12641/popup.html" class="sectionLink">popup</a><span class="sectionLink"> (16)</span>
</li>
<li>
<a onclick="markinfo(74,'category-c')" href="http://www.ajaxshake.com/en/JS/12741/modal-windows.html" class="sectionLink">Modal Windows</a><span class="sectionLink"> (19)</span>
</li>
<li>
<a onclick="markinfo(97,'category-c')" href="http://www.ajaxshake.com/en/JS/12971/carousel.html" class="sectionLink">Carousel</a><span class="sectionLink"> (40)</span>
</li>
<li>
<a onclick="markinfo(12,'category-c')" href="http://www.ajaxshake.com/en/JS/12121/tabs.html" class="sectionLink">tabs</a><span class="sectionLink"> (27)</span>
</li>
<li>
<a onclick="markinfo(44,'category-c')" href="http://www.ajaxshake.com/en/JS/12441/validation.html" class="sectionLink">Validation</a><span class="sectionLink"> (19)</span>
</li>
<li>
<a onclick="markinfo(55,'category-c')" href="http://www.ajaxshake.com/en/JS/12551/tooltips.html" class="sectionLink">Tooltips</a><span class="sectionLink"> (26)</span>
</li>
<li>
<a onclick="markinfo(56,'category-c')" href="http://www.ajaxshake.com/en/JS/12561/scrollable.html" class="sectionLink">Scrollable</a><span class="sectionLink"> (16)</span>
</li>
<li>
<a onclick="markinfo(63,'category-c')" href="http://www.ajaxshake.com/en/JS/12631/images-and-photos-.html" class="sectionLink">Images and photos </a><span class="sectionLink"> (63)</span>
</li>
<li>
<div class="more">
<div class="moreLink l">
</div>
<div class="moreLink r">
<a rel="nofollow" onclick="getNextCategoryPage(1,3,'JS','categories','EN',20)" href="javascript:void(0)">More</a> </div>
</div>
</li>
</ul>
</div> </div>
<div class="faceMaxBox">
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like-box href="http://www.facebook.com/ajaxshake" width="254" show_faces="true" border_color="" stream="false" header="false"></fb:like-box>
</div>
<div id="libraries">
<div>
<ul class="categoriesSection" style="height:512px;">
<li class="title">
<h3 class="titleLabel">Libraries</h3>
<div class="titleLine"></div>
</li>
<li>
<a onclick="markinfo(1,'category-l')" href="http://www.ajaxshake.com/en/JS/1111/jquery.html" class="sectionLink">JQUERY</a><span class="sectionLink"> (679)</span>
</li>
<li>
<a onclick="markinfo(4,'category-l')" href="http://www.ajaxshake.com/en/JS/1141/flash.html" class="sectionLink">Flash</a><span class="sectionLink"> (22)</span>
</li>
<li>
<a onclick="markinfo(42,'category-l')" href="http://www.ajaxshake.com/en/JS/12421/pure-javascript.html" class="sectionLink">Pure JavaScript</a><span class="sectionLink"> (80)</span>
</li>
<li>
<a onclick="markinfo(2,'category-l')" href="http://www.ajaxshake.com/en/JS/1121/prototype.html" class="sectionLink">Prototype</a><span class="sectionLink"> (43)</span>
</li>
<li>
<a onclick="markinfo(8,'category-l')" href="http://www.ajaxshake.com/en/JS/1181/css.html" class="sectionLink">CSS</a><span class="sectionLink"> (69)</span>
</li>
<li>
<a onclick="markinfo(11,'category-l')" href="http://www.ajaxshake.com/en/JS/12111/mootools.html" class="sectionLink">Mootools</a><span class="sectionLink"> (95)</span>
</li>
<li>
<a onclick="markinfo(77,'category-l')" href="http://www.ajaxshake.com/en/JS/12771/dojo.html" class="sectionLink">Dojo</a><span class="sectionLink"> (2)</span>
</li>
<li>
<a onclick="markinfo(101,'category-l')" href="http://www.ajaxshake.com/en/JS/131011/web-mail.html" class="sectionLink">Web Mail</a><span class="sectionLink"> (4)</span>
</li>
<li>
<a onclick="markinfo(119,'category-l')" href="http://www.ajaxshake.com/en/JS/131191/icons.html" class="sectionLink">Icons</a><span class="sectionLink"> (3)</span>
</li>
<li>
<a onclick="markinfo(89,'category-l')" href="http://www.ajaxshake.com/en/JS/12891/yui.html" class="sectionLink">YUI</a><span class="sectionLink"> (5)</span>
</li>
<li>
<a onclick="markinfo(99,'category-l')" href="http://www.ajaxshake.com/en/JS/12991/ext-js.html" class="sectionLink">Ext.JS</a><span class="sectionLink"> (1)</span>
</li>
<li>
<a onclick="markinfo(122,'category-l')" href="http://www.ajaxshake.com/en/JS/131221/uize.html" class="sectionLink">UIZE</a><span class="sectionLink"> (1)</span>
</li>
<li>
<div class="more">
<div class="moreLink l">
</div>
<div class="moreLink r">
<a rel="nofollow" onclick="getNextCategoryPage(1,1,'JS','libraries','EN',12)" href="javascript:void(0)">More</a> </div>
</div>
</li>
</ul>
</div> </div>
<div class="faceMaxBox videosBanner" style="margin-left: 32px;margin-top: 60px;">
<a href="http://www.md5decrypt.org"><img width="255px" src="public/resources/images/md5-banner.jpg" alt="md5 decrypt"/></a>
</div>
</div>  
<div class="clear"></div>
<div class="commentBoxPanel">
<div class="commentTitle">
<img src="public/resources/images/bubble.gif"/>
<h3 class="titleLabel">Recent Comments</h3>
</div>
<div class="mainComment">
<h4>
ludi said:
</h4>
<div class="mainCommentInfo">
<a target="_blank" href="http://www.facebook.com/ludal1472@hotmail.com" rel="nofollow"> <img src="public/resources/images/miniFacebook.png"/></a> </div>
<div class="clear"></div>
<p>como descargo</p>
<div class="commentLinks">
<a rel="nofollow" href="http://www.ajaxshake.com/en/JS/2411091/how-to-create-an-amazing-multi-item-slider-multi-item-slider.html">How to create an amazing multi item slider</a>
</div>
</div>
<div class="mainComment">
<h4>
daniela said:
</h4>
<div class="mainCommentInfo">
</div>
<div class="clear"></div>
<p>Hola</p>
<div class="commentLinks">
<a rel="nofollow" href="http://www.ajaxshake.com/en/JS/2410741/jquery-slideshow-diapo.html">jQuery slideshow</a>
</div>
</div>
<div class="mainComment">
<h4>
hitesh said:
</h4>
<div class="mainCommentInfo">
</div>
<div class="clear"></div>
<p>good</p>
<div class="commentLinks">
<a rel="nofollow" href="http://www.ajaxshake.com/en/JS/2410991/plugin-jquery-to-flip-content-bookblock.html">Plugin jQuery to Flip Content</a>
</div>
</div>
<div class="mainComment">
<h4>
Moeed Khan said:
</h4>
<div class="mainCommentInfo">
<a target="_blank" href="http://www.twitter.com/momokhanz" rel="nofollow"> <img src="public/resources/images/miniTwitter.png"/></a> <a target="_blank" href="http://fashionclicx.com" rel="nofollow"> <img src="public/resources/images/net.png"/></a> </div>
<div class="clear"></div>
<p>@Surendra Mishra you can download it from below URL:
http://thefinishedbox.com/?download=loginfreebie ...</p>
<div class="commentLinks">
<a rel="nofollow" href="http://www.ajaxshake.com/en/JS/238291/a-simple-jquery-dropdown-login-form-loginform.html">A Simple jQuery Dropdown Login Form</a>
</div>
</div>
<div class="mainComment">
<h4>
Nick said:
</h4>
<div class="mainCommentInfo">
</div>
<div class="clear"></div>
<p>It's ok!</p>
<div class="commentLinks">
<a rel="nofollow" href="http://www.ajaxshake.com/en/JS/239961/mootoos-tree-menu-mootoolstreemenu.html">Mootoos Tree Menu</a>
</div>
</div>
<div class="mainComment">
<h4>
Sergio said:
</h4>
<div class="mainCommentInfo">
</div>
<div class="clear"></div>
<p>Gracias</p>
<div class="commentLinks">
<a rel="nofollow" href="http://www.ajaxshake.com/en/JS/233531/scrolling-to-the-top-and-bottom-with-jquery-scrolling-top.html">Scrolling to the Top and Bottom with jQuery</a>
</div>
</div>
<div class="mainComment">
<h4>
Krzysztof Bekisz said:
</h4>
<div class="mainCommentInfo">
</div>
<div class="clear"></div>
<p>I am interested for now. Any comment later.</p>
<div class="commentLinks">
<a rel="nofollow" href="http://www.ajaxshake.com/en/JS/234681/create-an-image-rotator-with-description-in-javascript-imagerotator.html">Create an Image Rotator with Description in Javascript</a>
</div>
</div>
<div class="mainComment">
<h4>
Chris C said:
</h4>
<div class="mainCommentInfo">
</div>
<div class="clear"></div>
<p>How is this different/better than twig or h2o-template?</p>
<div class="commentLinks">
<a rel="nofollow" href="http://www.ajaxshake.com/en/JS/2411071/build-semantic-templates-with-javascript-handlebars.html">Build semantic templates with javascript</a>
</div>
</div>
<div class="mainComment">
<h4>
Surendra Mishra said:
</h4>
<div class="mainCommentInfo">
</div>
<div class="clear"></div>
<p>I do not see any link to download code for login.
Request you to please help me.
Thanks
Surendra</p>
<div class="commentLinks">
<a rel="nofollow" href="http://www.ajaxshake.com/en/JS/238291/a-simple-jquery-dropdown-login-form-loginform.html">A Simple jQuery Dropdown Login Form</a>
</div>
</div>
<div class="mainComment">
<h4>
Alhassan said:
</h4>
<div class="mainCommentInfo">
<a target="_blank" href="http://www.twitter.com/alhassanbaba2" rel="nofollow"> <img src="public/resources/images/miniTwitter.png"/></a> </div>
<div class="clear"></div>
<p>Thnaks for the code its awesome</p>
<div class="commentLinks">
<a rel="nofollow" href="http://www.ajaxshake.com/en/JS/238291/a-simple-jquery-dropdown-login-form-loginform.html">A Simple jQuery Dropdown Login Form</a>
</div>
</div>
</div>
</div>  
</div>
<div class="clear"></div>
</div>
<div id="footer" class="span-24 last">
<div class="span-15 l">
</div>
</div>
<div class="clear"></div>
</div>
<div id="pageTip" class="span-15 pageTipBox"></div>
<div id="foot">
<div class="foot">
<div class="foot1">
<div class="span-5 foot3">
<h4 class="footLabel">Categories</h4>
<ul>
<li>
<a href="http://www.ajaxshake.com/en/JS/12661/tutorial.html">Tutorial</a>,
<a href="http://www.ajaxshake.com/en/JS/12701/select-list.html">Select list</a>
</li>
<li>
<a href="http://www.ajaxshake.com/en/JS/12721/zoom.html">Zoom</a>,
<a href="http://www.ajaxshake.com/en/JS/12781/buttons.html">Buttons</a>
</li>
<li>
<a href="http://www.ajaxshake.com/en/JS/12981/mouseover-.html">Mouseover </a>,
<a href="http://www.ajaxshake.com/en/JS/131181/database.html">DataBase</a>
</li>
<li>
<a href="http://www.ajaxshake.com/en/JS/12141/clocks.html">Clocks</a>,
<a href="http://www.ajaxshake.com/en/JS/12361/charts.html">Charts</a>
</li>
<li>
<a href="http://www.ajaxshake.com/en/JS/12501/dates-pickers.html">Dates Pickers</a>,
<a href="http://www.ajaxshake.com/en/JS/12521/autocomplete.html">Autocomplete</a>
</li>
</ul>
</div>
<div class="span-5 foot3">
<h4 class="footLabel">Content</h4>
<ul>
<li>
<a href="http://www.ajaxshake.com/EN/JS/search/slider.html">slider</a>,
<a href="http://www.ajaxshake.com/EN/JS/search/menu.html">menu</a>
</li>
<li>
<a href="http://www.ajaxshake.com/EN/JS/search/calendario-jquery.html">calendario-jquery</a>,
<a href="http://www.ajaxshake.com/EN/JS/search/galeria.html">galeria</a>
</li>
<li>
<a href="http://www.ajaxshake.com/EN/JS/search/simple-jquery-slideshow.html">simple-jquery-slideshow</a>,
<a href="http://www.ajaxshake.com/EN/JS/search/h.html">h</a>
</li>
<li>
<a href="http://www.ajaxshake.com/EN/JS/search/jquery.html">jquery</a>,
<a href="http://www.ajaxshake.com/EN/JS/search/a.html">a</a>
</li>
<li>
<a href="http://www.ajaxshake.com/EN/JS/search/imagenes.html">imagenes</a>,
<a href="http://www.ajaxshake.com/EN/JS/search/hover-image.html">hover-image</a>
</li>
</ul>
</div>
<div class="span-5 foot3">
<h4 class="footLabel">Friend Sites</h4>
<ul>
<li><a rel="nofollow" href="http://solvingequations.net">Solving Equations</a></li>
</ul>
</div>
<div class="span-5 foot4">
<h4 class="footLabel">Contact Us</h4>
<ul>
<li><a rel="nofollow" href="mailto:info@ajaxshake.com">Feed Back</a></li>
<li><a rel="nofollow" href="mailto:info@ajaxshake.com">E-mail</a></li>
<li><a rel="nofollow" href="mailto:info@ajaxshake.com">Advertise with us!</a></li>
</ul>
</div>
<div class="span-3 last foot3">
<h4 class="footLabel">Follow Us</h4>
<ul>
<li><a rel="nofollow" href="http://www.twitter.com/ajaxshake">Twitter</a></li>
<li><a rel="nofollow" href="http://www.facebook.com/pages/AjaxShake/126603027394570">Facebook</a></li>
<li><a rel="nofollow" href="http://feeds.feedburner.com/ajaxshake">Feed Rss</a></li>
</ul>
</div>
</div>
<div class="foot2">
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
			var language='EN';
            $(document).ready(function() {
                //-----------------------------------
                var addScript=function(strvar){
                    var script = document.createElement('script');
                    script.type = 'text/javascript';
                    script.async = true;
                    script.src = strvar;
                    (document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(script);
                }
                //-----------------------------------
                                    $(".ilikeit").html('<iframe src="http://www.facebook.com/plugins/like.php?href=http://www.facebook.com/pages/AjaxShake/126603027394570&amp;layout=button_count&amp;action=like&amp;height=21&amp;width:120" scrolling="no" frameborder="0" style="border:none; width:120px; height:21px"></iframe>');
                				addScript('https://apis.google.com/js/plusone.js');
                addScript('public/resources/js/all.3.0.min.js');
                addScript('//s3.buysellads.com/ac/bsa.js');
                //$('#specialAd').html('<a style="border: 0" href="http://www.chaludesign.com.ar" target="_blank" rel="nofollow"><img src="public/resources/images/chaludesign.jpg" alt="" /></a>');
		});// document ready
        </script>
 
<img width='212px' height='32px' src="public/resources/lib/tips/images/tipMid.png" class="dn"/>
<img width='212px' height='1px' src="public/resources/lib/tips/images/tipBtm.png" class="dn"/>
<img width='212px' height='37px' src="public/resources/lib/tips/images/tipTop.png" class="dn"/>
<script type="text/javascript">
            window.google_analytics_uacct = "UA-16213975-1";
        </script>
<script type="text/javascript">
            var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
            document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
        </script>
<script type="text/javascript">
            try {
                var pageTracker = _gat._getTracker("UA-16213975-1");
                pageTracker._setDomainName(".ajaxshake.com");
                pageTracker._trackPageview();
            } catch(err) {}
        </script>
</body>
</html>