11+ Featured Content Slider for Blogger Using jQuery ~ Blogspot Tutorial

40 11+ Featured Content Slider for Blogger Using jQuery

admin

8:39 PM

You’ve probably noticed that a lot of websites lately have a featured area with content that slides or changes in some way.content sliders are a great way to show large amount of content on a smaller area of a web page or blog. Dynamic auto sliding content sliders are a lot popular on numerous websites over the web.This is a great technique to show several pieces of content in a limited amount of space and a good way to engage the user.

UPDATE: I updated some of my posts, this post I update 17+ Featured Content Slider for Blogger Using jQuery ..........

Live Demo

Are you interested in implementing a content slider in your website? Checkout this list!Here I am going to teach you, how to add a featured content slider to your blogger / blogspot blogs.You're not sure what is it exactly? You`ll see below ;)

Featured Content Slider for Blogger Using jQuery

Instructions To Follow:
STEP #1
Log in to Blogger, go to Design -> Edit HTML and mark the tick box "Expand Widget Templates"

STEP #2
find (CTRL+F) this code in the template:

]]></b:skin>

And immediately before it, paste this code:

#featured{
width:400px;
padding-right:250px;
position:relative;
height:250px;
background:#fff;
border:5px solid #ccc;
}
#featured ul.ui-tabs-nav{
position:absolute;
top:0; left:400px;
list-style:none;
padding:0; margin:0;
width:250px;
}
#featured ul.ui-tabs-nav li{
padding:1px 0; padding-left:13px;
font-size:12px;
color:#666;
}
#featured ul.ui-tabs-nav li span{
font-size:11px; font-family:Verdana;
line-height:18px;
}

#featured .ui-tabs-panel{
width:400px; height:250px;
background:#999; position:relative;
overflow:hidden;
}
#featured .ui-tabs-hide{
display:none;
}

#featured li.ui-tabs-nav-item a{/*On Hover Style*/
display:block;
height:60px;
color:#333; background:#fff;
line-height:20px;
outline:none;
}
#featured li.ui-tabs-nav-item a:hover{
background:#f2f2f2;
}
#featured li.ui-tabs-selected{ /*Selected tab style*/
background:url('selected-item.gif') top left no-repeat;
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{
background:#ccc;
}

#featured ul.ui-tabs-nav li img{
float:left; margin:2px 5px;
background:#fff;
padding:2px;
border:1px solid #eee;
}
#featured .ui-tabs-panel .info{
position:absolute;
top:180px; left:0;
height:70px; width: 400px;
background: url('transparent-bg.png');
}
#featured .info h2{
font-size:18px; font-family:Georgia, serif;
color:#fff; padding:5px; margin:0;
overflow:hidden;
}
#featured .info p{
margin:0 5px;
font-family:Verdana; font-size:11px;
line-height:15px; color:#f0f0f0;
}
#featured .info a{
text-decoration:none;
color:#fff;
}
#featured .info a:hover{
text-decoration:underline;
}

STEP #2
Now find (CTRL+F) this code in the template:

]]></b:skin>

And immediately after it, paste this code:

Now Click Save Template

STEP #3
Go to Design -> Click on "Add a Gadget" -> HTML/JavaScript type.

And copy paste this code in to it:

<div id='featured'>
<ul class='ui-tabs-nav'>
<li class='ui-tabs-nav-item ui-tabs-selected' id='nav-fragment-1'><a href='#fragment-1'><img alt='pic1' src='http://i49.tinypic.com/e1aohv.jpg'/><span>Install Mac OS X on Intel/AMD PC using iATKOS v7</span></a></li>
<li class='ui-tabs-nav-item' id='nav-fragment-2'><a href='#fragment-2'><img alt='blogger' src='http://i438.photobucket.com/albums/qq108/fooble11/image2-small.jpg'/><span>How to remove "showing post with label" in Blogger</span></a></li>
<li class='ui-tabs-nav-item' id='nav-fragment-3'><a href='#fragment-3'><img alt='buzz' src='http://i438.photobucket.com/albums/qq108/fooble11/new1.jpg'/><span>How to add Google Buzz to Blogspot blog</span></a></li>
<li class='ui-tabs-nav-item' id='nav-fragment-4'><a href='#fragment-4'><img alt='chat' src='http://i50.tinypic.com/34xfg4m.jpg'/><span>Chat live with your blog visitors using Yahoo Pingbox</span></a></li>
</ul>

<div class='ui-tabs-panel' id='fragment-1' style=''>
<img alt='mac' src='http://i47.tinypic.com/rsbi80.jpg'/>
<div class='info'>
<h3><a href='#'>Install Mac OS X on Intel/AMD PC using iATKOS v7</a></h3>
<p>Description goes here, this is just a test description....<a href='http://www.bloggermint.com/2010/02/install-mac-os-x-on-intelamd-pc-using.html'>read more</a></p>
</div>
</div>

<div class='ui-tabs-panel ui-tabs-hide' id='fragment-2' style=''>
<img alt='' src='http://i50.tinypic.com/33kprh5.jpg'/>
<div class='info'>
<h3><a href='#'>How to remove "showing post with label" in Blogger</a></h3>
<p>Description goes here, this is just a test description....<a href='#'>read more</a></p>
</div>
</div>

<div class='ui-tabs-panel ui-tabs-hide' id='fragment-3' style=''>
<img alt='' src='http://i47.tinypic.com/2191lqt.jpg'/>
<div class='info'>
<h3><a href='#'>How to add Google Buzz to Blogspot blog</a></h3>
<p>Description goes here, this is just a test description....<a href='#'>read more</a></p>
</div>
</div>

<div class='ui-tabs-panel ui-tabs-hide' id='fragment-4' style=''>
<img alt='' src='http://i48.tinypic.com/10pwp3o.jpg'/>
<div class='info'>
<h3><a href='#'>Chat live with your blog visitors using yahoo</a></h3>
<p>Description goes here, this is just a test description....<a href='#'>read more</a></p>
</div>
</div> </div>

Now Click Save

................................................................................................
................................................................................................
................................................................................................

Simple jQuery Featured Content Slider for Blogger Blog

Instructions To Follow:
STEP #1
Log in to Blogger, go to Design -> Edit HTML and mark the tick box "Expand Widget Templates"
STEP #2
Now find (CTRL+F) this code in the template:

]]></b:skin>

And immediately before it, paste this code:

#jFlowSlide{ background:#f8f8f8; font-family: Georgia; }
#myController { font-family: Georgia; padding:2px 0; width:610px; background:#000000; }
#myController span.jFlowSelected { background:#43A0D5;margin-right:0px; }

.slide-wrapper { padding: 5px; }
.slide-thumbnail { width:300px; float:left; }
.slide-thumbnail img {max-width:300px; }
.slide-details { width:290px; float:right; margin-left:10px;}
.slide-details h2 { font-size:1.5em; font-style: italic; font-weight:normal; line-height: 1; margin:0; }
.slide-details .description { margin-top:10px; }

.jFlowControl, .jFlowPrev, .jFlowNext { color:#FFF; cursor:pointer; padding-left:5px; padding-right:5px; padding-top:2px; padding-bottom:2px; }
.jFlowControl:hover, .jFlowPrev:hover, .jFlowNext:hover { background: #43A0D5; }

STEP #3
Now find (CTRL+F) this code in the template:

</head>

And immediately before it, paste this code:

Now Click Save Template

Finally go to Page Elements --> Add a Gadget --> HTML/JAVA Script. And add following code to it.

<div class="jflow-content-slider">

<div id="slides">

<-! Slide #1 Starts-->

<div class="slide-wrapper">

<div class="slide-thumbnail">

<img alt="" src="IMAGE-LINK"/>

</div>

<div class="slide-details">

<span style="font-size: large;"><b> TITLE-OF-THE-SLIDE </b></span>

<div class="description">

TEXT-OF-THE-SLIDE

</div>

</div>

<div class="clear"></div>

</div>



<-! Slide #2 Starts-->

<div class="slide-wrapper">

<div class="slide-thumbnail">

<img alt="" src="IMAGE-LINK"/>

</div>

<div class="slide-details">

<span style="font-size: large;"><b> TITLE-OF-THE-SLIDE </b></span>

<div class="description">

TEXT-OF-THE-SLIDE

</div>

</div>

<div class="clear"></div>

</div>



<-! Slide #3 Starts-->

<div class="slide-wrapper">

<div class="slide-thumbnail">

<img alt="" src="IMAGE-LINK"/>

</div>

<div class="slide-details">

<span style="font-size: large;"><b> TITLE-OF-THE-SLIDE </b></span>

<div class="description">

TEXT-OF-THE-SLIDE

</div>

</div>

<div class="clear"></div>

</div>



.

.

.

.



</div>

<div id="myController">

<span class="jFlowPrev">Prev</span>

<span class="jFlowControl">1</span>

<span class="jFlowControl">2</span>

<span class="jFlowControl">3</span>



<span class="jFlowNext">Next</span>

</div>

<div class="clear"></div>

</div>

t's Done.

Customization

Code 1. You can change the background colors in code 1 to suit your blog.

Code 2. First of all downloadhttp://sites.google.com/site/freeblo...ow.1.2.auto.js and upload it to google sites.

You can change width, height and duration speed.

Code 3. As you look on code 3 there are 3 slide codes. First give the image link, add title and finally add description. Do same with all three codes. You can add more slide by adding the code:

<div class="slide-wrapper">

<div class="slide-thumbnail">

<img alt="" src="IMAGE-LINK"/>

</div>

<div class="slide-details">

<span style="font-size: large;"><b> TITLE-OF-THE-SLIDE </b></span>

<div class="description">

TEXT-OF-THE-SLIDE

</div>

</div>

<div class="clear"></div>

</div>

Also you have to add

after

and so on for next slides.

................................................................................................
................................................................................................
................................................................................................

How To Add Smart Jquery Featured Slider to Blogger/Websites

Instructions To Follow:
STEP #1
Log in to Blogger, go to Design -> Edit HTML and mark the tick box "Expand Widget Templates"
STEP #2
Now find (CTRL+F) this code in the template:

</head>

And immediately before it, paste this code:

Now click Save Template

STEP #3

Go to Design -> Click on "Add a Gadget" -> HTML/JavaScript type.

And copy paste this code in to it:

NOTE : Replace,

SLIDE-X-LINK-HERE with your real featured posts links.

SLIDE-X-IMAGE-ADDRESS-HERE with your real slide images addresses.

Look at the example below:

You are done.

................................................................................................
................................................................................................
................................................................................................

How To Create JQuery Featured Content Slideshow

Instructions To Follow:
STEP #1
Log in to Blogger, go to Design -> Edit HTML and mark the tick box "Expand Widget Templates"
STEP #2
Now find (CTRL+F) this code in the template:

</head>

And immediately before it, paste this code:

Now click Save Template

STEP #3

Go to Design -> Click on "Add a Gadget" -> HTML/JavaScript type.

And copy paste this code in to it:

You can add more slides as you like.

Note : Replace images URLs,"This is featured post X title","Replace This Text With Your Featured Post X Description" with your content.

You are done.

................................................................................................
................................................................................................
................................................................................................

How To Add jQuery Featured Post Slider to blogger

1.Login to your blogger dashboard----> layout- ---> Edit HTML

2.Scroll down to where you see </head> tag .

3.Copy below code and paste it just before the </head> tag .

Note: Please host above images yourself.

4.Now save your template.

5.Go to Layout-->Page Elements and click on "Add a gadget".

6.Select "html/java script" and add the code given below and click save.

<div id="content">
<script type="text/javascript">
featuredcontentglider.init({
gliderid: "glidercontent",
contentclass: "glidecontent",
togglerid: "togglebox",
remotecontent: "",
selected: 0,
persiststate: true,
speed: 500,
direction: "leftright",
autorotate: true,
autorotateconfig: [10000, 1] //if auto rotate enabled, set [milliseconds_btw_rotations, cycles_before_stopping]
})
</script>


<div id="glidercontent" class="glidecontentwrapper">
<div id="togglebox" class="glidecontenttoggler">
<a class="prev" href="#"></a>
<a class="next" href="#"></a>
</div>
<div id="glidecontent1" class="glidecontent1 section"><div id="HTML98" class="widget HTML">
<div class="widget-content">

<div class="glidecontent">

<h2><a href="http://bdlab.blogspot.com" title="Adsense Tips And Secrets">Adsense Tips And Secrets</a></h2>

<p>AdSense Tip 1: Find Best keywords for your content
Before serving ads on a web page, check its keyword density. You can find many free keyword analyzer tools in internet searching the word "free keyword analyzer".
AdSense Tip 2: Improve your keywords
Get keyword suggestions from Google AdWords Sandbox. Get new keywords that can help you improve your ad relevance.
AdSense Tip 3: Make content rich websites
This means that content-rich websites of a popular topic should attract a large amount of ads.
AdSense Tip 4: Write a new page/blog post every day
 <a href="http://bdlab.blogspot.com">Read More →</a></p></div>

<div class="glidecontent">

<h2><a href="http://bdlab.blogspot.com" title="Use Adsense Section Targeting">Use Adsense Section Targeting</a></h2>

<p>What is Google Adsense Section targeting? Here is the official information on Adsense Help Center:
Section targeting allows you to suggest sections of your text and HTML content that you'd like us to emphasize or downplay when matching ads to your site's content. By providing us with your suggestions, you can assist us in improving your ad targeting. We recommend that only those familiar with HTML attempt to implement section targeting.
To implement section targeting, you'll need to add a set of special HTML comment tags to your code. These tags will mark the beginning and end of whichever section(s) you'd like to emphasize or de-emphasize for ad targeting.
The HTML tags to emphasize a page section take the following format:
 <a href="http://bdlab.blogspot.com">Read More →</a></p></div>

<div class="glidecontent">

<h2><a href="http://bdlab.blogspot.com" title="Remove Low paying Adsense Ads">Remove Low paying Adsense Ads</a></h2>

<p>To increase your Adsense Earnings by removing the lowpaying adsense ads from your account,follow the steps below.
1.First go to www.adsblacklist.com .
2.Now Signup for a account.it's free and very simple.
3.Now login to your account.
4.Now Click on My Account.
5.Now click on 'Add New Domain'
6.Submit your URL,TITLE and Keywords.Look at the example below.
6.Now go to Generate Filter List.
7.Drag and drop your domain name into 'Keywords from selected domains:' box.Then you can see keywords,you give in step 4.
 <a href="http://bdlab.blogspot.com">Read More →</a></p></div>

<div class="glidecontent">

<h2><a href="http://bdlab.blogspot.com" title="Comment Box is made DO FOLLOW">Comment Box is made DO FOLLOW</a></h2>

<p>Above Title Means comments on this blog are made do follow and will be spidered.Comments field in blogger are made NOFOLLOW by default.This is done as a measure to reduce spam.To Become comments on your blog are made "do follow",follow the easy steps below.
1.Log in to your dashboard----> layout- ---> Edit HTML
2.Click on "Expand Widget Templates"
3.Scroll down to where you see this:-
<a expr:href='data:comment.authorUrl' rel='nofollow'>
4.Replace it with below code.
<a expr:href='data:comment.authorUrl'>
5.Click on Save Templates and you are done.
Now you must to make other bloggers know that you are comments are made do follow.For this add below code to your blog... <a href="http://bdlab.blogspot.com">(more...)</a></p></div>

</div>
</div></div>
</div>

<div class="glidebot"></div>
<div class="clear"></div></div>

Now click Save

................................................................................................
................................................................................................
................................................................................................

How To Add jQuery Images Slider to Blogger

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Scroll down to where you see </head> tag .

3.Copy below code and paste it just before the </head> tag.

Note : You can change width value as your choice.

4.Now save your template.

5.Go to Layout-->Page Elements and click on "Add a gadget".

6.Select "html/java script" and add the code given below and click save.

<div id="myslides">

<script type="text/javascript">
stepcarousel.setup({
galleryid: 'mygallery', //id of carousel DIV
beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
panelclass: 'panel', //class of panel DIVs each holding content
panelbehavior: {speed:500, wraparound:true, persist:true},
defaultbuttons: {enable: true, moveby: 2, leftnav: ['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEO14pHkoh42NbLH2PV4kxTLw64Ild5D_RWaG3knfA3sbJKCLERJG-CrbDvnZq0Ws9TrI-iWBxOehyphenhyphen8lrFM6W4YwfmXFHsXIdtCDdw_TWYYEaV8E4UjbTTjxWHMGsFDZcJzrZAflRmhMEP/', -14, 60], rightnav: ['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5xATce7RIFDQmPGOxFYxbIqfdIcMkjulydl_QjNzzKBpHYLVnaJgn1Rlbi4DLszXlrxRYGqh9ErUBNOL2R34WySdgxvGBCgb1pwnO_-D0Qi1FoZvzsAEyG1v_1ZhdbycbD02_hiFHTu1E/', 0, 60]},
statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: ['external'] //content setting ['inline'] or ['external', 'path_to_external_file']
})
</script>

<div id="mygallery" class="stepcarousel">
<div class="belt">

<div class="panel">
<a href="#" title="NFS Most Wanted">
<img alt="NFS Most Wanted" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxYeDvxuRMAo0f-xtaaUBfhOi6rIWmoyyn_0nmZd_ly7ZTownE9I1ZsjgNyj3PUhySDlYUwc_cvWOCQgvXPkQTAvGIkmv5Xm9jrV0XlGhPYMh4SzTeU78zvIcttolor7U8Jd4w-yi8qO2L/+Most+Wanted.jpg" height="120"/>
</a>
</div>

<div class="panel">
<a href="#" title="Call Of Duty">
<img alt="Call Of Duty" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqJHeHyfK77Sm3E3ZT9638LhOZEJv68nZc-pvYKjZstW_Azs-1iipEdKLgQWVHCkBPYqBMgTIjCwhwmT4aMQO5TVF7_pHaVaphhLVp2W8qKaM278Gic1O1CBFM9d3weQM70K7_dX070n0C/+Of+Duty.jpg" height="120"/>
</a>
</div>

<div class="panel">
<a href="#" title="MaxPayne3 Game">
<img alt="MaxPayne3 Game" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP8QYi__HPzEZRmnZRpUeojWHCk9nM8GbTNsiXs4Fiabxkc6PIC4zlThQAvlU0EcNZcGdXgKtH9k9_01SEZ0K2jz2in01oBUtNsU6PUxIiLagd06GH1rZEetmmKnPMcHgUVeJgT9WN1LDj/+game.gif" height="120"/>
</a>
</div>

<div class="panel">
<a href="#" title="Tomb Raider">
<img alt="Tomb Raider" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSG6H2aHQYIbnIbJEWKf58d37cQ-YJcZiHbx2QxESsW63sO1UGVaeRY6apHPeCDZLiW9soUhOd7Nei30VdPxBdbCZnIFNOS_ctVZj71VOj29sWluzlYmERBj96nOwH7u62yyV20xeKEgGD/+Rider.jpg" height="120"/>
</a>
</div>

<div class="panel">
<a href="#" title="Harry Potter">
<img alt="Harry Potter" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEVwFl9qyzd-G7ONGWbzuk5hi1zDYJraEVuJWZevTmH1bcqsngWXDQTp651ywV7LUqpKPSy0Okq2Myen_eIOq2wHIJh2jr_Bf7LucnKsfUfWXINKUv-MQb5ng6fQC65bQja7R2j6SM1OSo/+potter.jpg" height="120"/>
</a>
</div>

<div class="panel">
<a href="#" title="NFS ProStreet">
<img alt="NFS ProStreet" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpTu5t7ObCPyE84XjvMGzOLIGxlRq34XUbhLhaTAFe-p8BvmZHpc2zEMpnWzpGVEhAuN_SfDmBFhmP43xm2TKbHAwkjhQI3QpqXhvg_O4u4pBFnvHUBu-8SYFTcO8QH49mB56QIoZOsDPY/+ProStreet.jpg" height="120"/>
</a>
</div>

<div class="panel">
<a href="#" title="MaxPayne Movie">
<img alt="MaxPayne Movie" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEwYPtcHvmrUWhAp858ZuS4BTHWtpsMHmpSYPPYbOra78k6NfqDF_etdK_kMUbUCp2wIJzsGgdR5pLps4LH-Ss2k6tnSId83LVuVm-qZwJ-JYnF5WpVkRvMd9hJ_Loagh2h5NDapxLmY6q/+movie.jpg" height="120"/>
</a>
</div>

<div class="panel">
<a href="#" title="NFS Undercover">
<img alt="NFS Undercover" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0itu4EC-TS9K27u9hXyi2RtTKd_Ugd8-64xTVFcWsHVOkuH6jJFTGgHuQMYXWSuNAOaovxSZC-71_Z0kf-_4jA6JVaPJ-NEpJirZZYykNKFs3tP2cm9CS7yLAqP-hUyOz8gQpdGr4_wLq/+Undercover.jpg" height="120"/>
</a>
</div>

</div>
</div>
</div>

Note: Host above 2 images yourself.

Now click Save

................................................................................................
................................................................................................
................................................................................................

How To Add MooTools Featured Content Slider to blogger

1.Login to your blogger dashboard----> layout- ---> Edit HTML

2.Scroll down to where you see ]]></b:skin> tag .

3.Copy below code and paste it just after the ]]></b:skin> tag.

Important !!! : Download mootools.svn.js as a zip file and hostmootools.svn.js yourself.

You can change height,width,color,... if you like.

4.Now save your template.

5.Go to Layout-->Page Elements and click on "Add a gadget".

6.Select "html/java script" and add the code given below and click save.

<div id="slider-stage">

<ul id="slider-list">

<li id="l1"><a href="#" title="#"><img alt="#" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKPgfYpRSXP4aAvsmIRFj8cc9_1Aah_12cVUQVzYYyf2iJ3Cu29qc35la5yLclLCOb_pABA84Mz_8okmxFfJl5ZzGkuVorCzdYiRS62CxPm1qNx20H91yP_qW-KSk5cl9W_lCR2amTAeLd/" height="200"/></a></li>

<li id="l2"><a href="#" title="#"><img alt="#" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheBbsutvwW3CJAaLmCL1Qn1gYfQ15HWgHLBLXKVTp9NC-tTns6-Lm-pJWp7B5sp-xdMKp2yIJ7cRhxnBVqf8fXUBKN2vKDLP_Gh2mjiALXm0cj3WdkVJtzHxOoDugSvKEkT5DGgi3ccKxk/" height="200"/></a></li>

<li id="l3"><a href="#" title="#"><img alt="#" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1h5PTPuaW7NFkWArUaZF1klx9S5vvwdxX6Xy1NAhpyWo5NgRMwsCBd7jJ7ZdIhBswJ7FVLd4jX-52ORXs_TYTz4uxUaHQHCzU6hXD2xNjgDH0YgZVEqxfjiMMfX468s2srSyo2fvpqonV/" height="200"/></a></li>

<li id="l4"><a href="#" title="#"><img alt="#" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio6XUeJG27Xh46-24jn1Kdntn9HOMLtfYMcJ_Fqgo2Ri93QjYiAzZyhUpK2nnKEPoStt5VBCfIm2mgHR6MaYMnBkQhFXtigS0t-5po1GtCoP3a8dVA1xIwemIJ-sgRHFAT0DOJAeYYM8Ft/" height="200"/></a></li>

<li id="l5"><a href="#" title="#"><img alt="#" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDXyOW7Jy3fljPf18YUg1WFiDOrav9yJ1haRmmpPOL_7OGLSjjHk6LQ7Wb8MPaRb6yc6u09KdBQS_77scP5F9ZsgmvoVPMleSCjfxsYuqqXkBXdq3Tq2jiXMeaz3OS8KZB3MbjQQ7NSxzc/" height="200"/></a></li>

<li id="l6"><a href="#" title="#"><img alt="#" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjepco9jIOZud4CD_hOXCS0P2Ezdttj5tTODtIBIx6D-inRVNFimaMdXE3oKVcn4RSVbnu8_45SofFAFR-ABmYNU84Ui6UH8UXzQGDEQmyJBsyqpaMPUxIIRMtV0P9fO6LArLxgQmGPKX6/" height="200"/></a></li>

<li id="l7"><a href="#" title="#"><img alt="#" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHG3M7UDKtL8aJOSfxQ-dwKEE8YmY8i7ysrbiTeGRhZVmYiSMuI0iwLHEpnIog-PyD2uyir2St76w9fGyL8f_si-X_IT6mbs_7crf07qV2CVDT7jbgMzfRbCay0n99yUOz9khfTRs0sMXI/" height="200"/></a></li>

<li id="l8"><a href="#" title="#"><img alt="#" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrt_DOwNE6Cg64Jjg3i07z5OubKT5byN79crutsMwt1jfM45kXqc1wdkq2ljW-YksO1tKJL-tIJ2lgTQYcWeRd4e6MPPUzA12nw2pHvlkpdxnrusuq3eZnihD25-PkAcJFbUfL_X3UTRyJ/" height="200"/></a></li>

<li id="l9"><a href="#" title="#"><img alt="#" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9y2NCCqc02xXYp7yMm3l0g3uc6tw0zF3CxFUFqF4l2V5-75umo1WCjT_HD11OgR6THu9N4kWxYpQzclZjzJnvBiDwty9SrEl37sLeJwTwz6l6NJ4Nq84hnCDf6_ftEAAuLQAG8EFL7Qdq/" height="200"/></a></li>

<li id="l10"><a href="#" title="#"><img alt="#" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimOCSAJWthAXwKQcdyTYq3ncFqIQSssG1xjhbWYzDU2D-Wx8Ga4d_RHCsrbtAjJXzs5Ku5h3Up90YNa_0AlQC8x8z77DhuAautwsen3h1x9Zp0LtXIifMSmBHwLCWRxbnEAzrG-aTEzYIW/" height="200"/></a></li>

</ul>

</div>

<div id="slider-buttons">
<a id="previous" href="#">Previous</a> | <a id="next" href="#">Next</a>
</div>

1.Login to your blogger dashboard----> layout- ---> Edit HTML

2.Scroll down to where you see </head> tag .

3.Copy below code and paste it just before the </head> tag.

4.Now again Scroll down to where you see </body> tag .

5.Copy below code and paste it just before the </body> tag.

Important !!! : Download compressed.js and 5 images as a zip file, andhost compressed.js and images yourself.

6.Now save your template.

7.Go to Layout-->Page Elements and click on "Add a gadget".

8.Select "html/java script" and add the code given below and click save.

<ul id="slideshow">

<li>
<h3>Enter Title 1 Here</h3>

<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxkkBsqzcWi5zUPiHRrWl8-ue_kbgrm0ADnS5fKNWe0YB9I9OP3wgY3OA_yzEXwJ0a2iCczsvPOCX2IMEisK_CH4zCVf3WLyw9f51_Ptt7MumlOWZNkPb4K5Wk8D0ve335n80RWJVO_ECM/+1+big.jpg</span>

<p>Enter Description 1 Here.</p>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhocfZoydfyOgphFlHXij3dJQ-XghCGJBzyKIYXX9Uw0Hq3zN6hWH4t7Q1B6ini6qSVZijrhIfyreo-NAkmhOPIpjgenLfOl5IrufVXpxf-w0H7R5xx44mtnhOHqcrkYKMMItMlFZg-xLYB/+1+small.jpg" alt="Bionic" /></a>
</li>

<li>
<h3>Enter Title 2 Here</h3>

<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVTBjwMDAA4lIlAtte59Zg0w1HdDYqDhVLkSD_xBPA6BWguy6qxGQARj71uThLKZjT31_-FAVl-UG1IyHqF1HT_5zXKa2qosoeAAvnRh_t1X3y9BHBpJUv018vX7M_a_iL4eT4RD8xPc13/+2+big.jpg</span>

<p>Enter Description 2 Here.</p>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgae1j1fS8GkC95p5UcoLuFTolsrpe_uxEZJXtyKmsTspgJtSWsdvxhGVOmUxiuZlOlX1dQN6B57R1JF1I6BbXqr6T3G3H0Hh9mKYVTOulrvfK_3oVhjtuzIkuIwoEsxwI2JsygiY3iI0q3/+2+small.jpg" alt="MOH" />
</li>

<li>
<h3>Enter Title 3 Here</h3>

<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyvsw4KL5FE2UGBObM0EPCCzjdWd1Kmv_85DWMAXXUlD4efLM9IfpHDBX4UNcrbkBZaiLLi6ZIkwaZLwupcHSKp_oGHgDH2kGBrPM2W7FUCMB-7yfldsJB_npievY8Y18dsytN5mUzIeNZ/+3+big.jpg</span>

<p>Enter Description 3 Here.</p>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3nVdV93BPmcCZwxEtFdflwpRJkqP27KNO4NDWSdZeuhvvBLQDgYlgngIQkajLXzVz-8urB9SJgT_yUOV6k92VfvvJL9tJqPc_zMq_iu6QeE8WCHC6yD-g61O043kdvHt-Hgl62Aaokhw-/+3+small.jpg" alt="Fear" /></a>
</li>

<li>
<h3>Enter Title 4 Here</h3>

<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGOwF83aEH9WO_ZBwb3k6si-m0Aozo8F30lYcrS7rw3O7sSaKjAuUqBNOiv8nu11SNEjxM7KsYXIGGYiP8kYFm-FATmAVRzKyQcOIN965zczBpJTqN7PRf98r-GuS7OasQrKLf9E0Zd9Ih/+4+big.jpg</span>

<p>Enter Description 4 Here.</p>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2VbZJLNyz5g5d2wjXhmlYyedNeTscq94CpLOk7ItULLP6kqC2P5vczxFXWvmjDzpB2K__bja5JvmSqvSC-qAI9ZpwCX2zCkGqfjvfnmPqSTLqwIJNcPYexucuagg7hXSYmKrkGHiOhVs0/+4+small.jpg" alt="Farcry" /></a>
</li>

<li>
<h3>Enter Title 5 Here</h3>

<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1gthuB0vFnIfWGzk-BDX9qlj0nK5jjDCPOtRbRHSTBGkvtojs3-zjMqH-3MthqaEIPihcayrMbzCDB-LA19yRQWs3doex2-SYr_bTl-nFpgOY2JqUtfYo8w3hVRZ3TCarhDRpVZLciUGO/+5+big.jpg</span>

<p>Enter Description 5 Here.</p>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCP2CEIkS7rDTK2qNUGptLRB10WqIS2y3IXtb1sPBH-vhvdnT6M5ovIKD2YEYIAFPN_JprWqMcVlMRAYo0h8qvjCSXxOhbJsEhS9huY2x8Rw7_IKchRVHbsGyk9QFnIK1Qdve6GTqyY6-C/+5+small.jpg" alt="Farcry 2" />
</li>

<li>
<h3>Enter Title 6 Here</h3>

<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTTGJsNoxsV24xufmbrw6ecE_Bud8wClZcgt6727hvQ2D9J-GOuJV-aOpPanjdKmC9PBRgjYMq7y7gU-GniFQ__Rc_IQFhv_WuQehpLRF0ak7JEegaDSZvnlxT4cdWW-kLW2i9xuikgvPE/+6+big.jpg</span>

<p>Enter Description 6 Here.</p>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_rUdWCoSdMhl-FpuDq2Or_7eZj6-tjJSsyJPCSxvroxWdOCju5EhimWGEypmcimKPIdX4enEjB_6Df3krGeuWfc2QC8LWfl0Ais57YC690thi5nRLjAYc6EAbHwLtuBopbUU5Gh5_z6rE/+6+small.jpg" alt="Crysis" /></a>
</li>

<li>
<h3>Enter Title 7 Here</h3>

<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheBy7Px1lwu7cZuj0yCiKCg6z1344fOhAul3r1reI57q-tisHU5bTnaA3TAG1WaAzMl3jKbxD_W91VULH0VK2uuUM-rb-xlKkMOumdYLKwcOoTRwKWYpZzeCW3kNSHh6wGe2RlvgOuy8wT/+7+big.jpeg</span>

<p>Enter Description 7 Here.</p>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil_o7BZSqSeE6mMSRB-5KY5WznQQxSKWZ1g3GBbDVbLz5o6cocQzbRsNHRrdvCXWmmdfqLoMpusWhxWUIkiVg3RjjUwYE06aikKixzKZUs_Oom-AK6yAVOoedqDTmxKwrLv78uu9U_H2MY/+7+small.jpg" alt="Tomb Raider" /></a>
</li>

<li>
<h3>Enter Title 8 Here</h3>

<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIIRN_As_SP20l7-al8is9s9LnjQZckrlZUDHr4cqjD2ITozZLzw8TtaV3Xi-tFOSpymACBv9zB3YDFmbMPvdJPU1KtHsqJLbrEdpWVMrCLdF_i9nLU2xI0JI2muQUu_oE3mAii_1TpM91/+8+big.jpg</span>

<p>Enter Description 8 Here.</p>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioxDKXzOn7LumZO92szYPgBJue32EUzaxQiXr0l-hmTgMEJ-ooCBusth2_aqx5OaWz7OYxAqfnqgWd3w4a3ad7u0LoSTOQrisBqQg9ZeerxayNan4hkAYIDL9-2lUllja2_9VO6g8rt6lj/+8+small.jpg" alt="Game" /></a>
</li>

<li>
<h3>Enter Title 9 Here</h3>

<span>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifJUWh5mmm6LZ7jq0rvN7MSOuYU8H_1yutY42kpfezd3H5yX4IRmADzuvK_0h59vI9oqMvoL-evxOujswthMXYebHKTvOzdBglvRMPocXsqpj6WhyphenhyphenZEgdzpmKIzltiep0jRaCHofdsBoLk/+9+big.jpg</span>

<p>Enter Description 9 Here.</p>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzyehwL25kwyHssjZbIKIdYWJq3Xr90RQ3D-Jul48jYmbwFkycNCFdap_kQDewnVE0AadyBrBCouAqszJt-CA7865G7tct90bY5cEW2clwotvSU0_dEb8kO-UWISky98DBKOioandtjM-f/+9+small.jpg" alt="Medal of honor" /></a>
</li>

</ul>

<div id="wrapper">

<div id="fullsize">

<div id="imgprev" class="imgnav" title="Previous Image"></div>

<div id="imglink"></div>

<div id="imgnext" class="imgnav" title="Next Image"></div>

<div id="image"></div>

<div id="information">
<h3></h3>
<p></p>
</div>
</div>

<div id="thumbnails">

<div id="slideleft" title="Slide Left"></div>

<div id="slidearea">

<div id="slider"></div>

</div>

<div id="slideright" title="Slide Right"></div>

</div>

</div>

</div>

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Scroll down to where you see </head> tag .

3.Copy below code and paste it just before the </head> tag.

Note : You can change width,height,... as you like.

6.Now save your template.

7.Go to Layout-->Page Elements and click on "Add a gadget".

8.Select "html/java script" and add the code given below and click save.

<div style="float:left;">

<div id="slider4" class="sliderwrapper">

<div style="background: url('IMAGE-1-LINK') center left no-repeat" class="contentdiv">
</div>

<div style="background: url('IMAGE-2-LINK') center left no-repeat" class="contentdiv">
</div>

<div style="background: url('IMAGE-3-LINK') center left no-repeat" class="contentdiv">
</div>

<div style="background: url('IMAGE-4-LINK') center left no-repeat" class="contentdiv">
</div>

<div style="background: url('IMAGE-5-LINK') center left no-repeat" class="contentdiv">
</div>

</div>

<div id="paginate-slider4">

<a href="#" class="toc"><img alt="IMAGE-1" src="IMAGE-1-THUMBNAIL-LINK"/></a>

<a href="#" class="toc"><img alt="IMAGE-2" src="IMAGE-2-THUMBNAIL-LINK"/></a>

<a href="#" class="toc"><img alt="IMAGE-3" src="IMAGE-3-THUMBNAIL-LINK"/></a>

<a href="#" class="toc"><img alt="IMAGE-4" src="IMAGE-4-THUMBNAIL-LINK"/></a>

<a href="#" class="toc"><img alt="IMAGE-5" src="IMAGE-5-THUMBNAIL-LINK"/></a>

</div>

<script type="text/javascript">
featuredcontentslider.init({
id: "slider4", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "markup", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["", "Next"], //labels for "prev" and "next" links. Set to "" to hide.
revealtype: "mouseover", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
enablefade: [true, 0.1], //[true/false, fadedegree]
autorotate: [true, 5000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})
</script>

</div>

Note : Replace IMAGE-X-LINKs and IMAGE-X-THUMBNAIL-LINKs with your image links.

................................................................................................
................................................................................................
................................................................................................

Smooth Jquery Featured Post Slideshow For Blogger

1.Login to your blogger dashboard----> layout- ---> Edit HTML

2.Scroll down to where you see </head> tag .

3.Copy below code and paste it just before the </head> tag.

NOTE : To change the speed of slideshow, change the value 4000.

6.Now save your template.

7.Go to Layout-->Page Elements and click on "Add a gadget".

8.Select "html/java script" and add the code given below and click save.

<div id="s3slider">
<ul id="s3sliderContent">

<li class="s3sliderImage">
<a href="YOUR-LINK-HERE"><img style="width:550px;height:200px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSLb-n8yLwblYMdkN7VhgE6350K-rxfHiUKCPF68NgBhQqToy89e_eYKnnTznZ8o39jqdUAsFLcY2ZOFwaRCSTHP0tAnmbwGgnAJNITiHu_VRrqGyUeTx3Y6-kzD75bexZRdZyu79tUnoC/s1600/Crysis-11.jpg" />
<span>Crysis : Download Full Version</span></a>
</li>

<li class="s3sliderImage">
<a href="YOUR-LINK-HERE"><img style="width:550px;height:200px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJgdzRmRYw7VOzhNGSoT4DS32aY0qUn_KSp3pjozmnA4pXylqb8QcI3C-bV7zqyzZDAufKxjl3q1e2ER7gL-krWalAbfyQMndPywZoXqJlSTb0M0zAccrPnEFBDuGzVnXADDUs1CT7rULu/" />
<span>Halo 3 : Play Game Online</span></a>
</li>

<li class="s3sliderImage">
<a href="YOUR-LINK-HERE"><img style="width:550px;height:200px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_2YHwHF4ijU6WBPAQBQpo1m1wG0Jrmbgo0Cx5RbqIQmpZHNpwetHW7WJi6xwjnIwzvVydK8hEgjwkNPFWVIb_ufcbFJ-iTNBfH7HJvf5W72JLeZMoBNfklu11qCXNATFYm3JvFdeN10Kp/" />
<span>Avatar : Watch Movie Now !!!</span></a>
</li>

<li class="s3sliderImage">
<a href="YOUR-LINK-HERE"><img style="width:550px;height:200px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggdBAvPL2PbNG4A-cyUml_Hl7PsmcIdMKlbf2Up8QU9PhmQfK0xqprXjPfUUUDtXT9ooZ9SdVfgmqG-4U8sKiIvNHy5Lc2nHPCtuIbHktSF88Co14x_PxtzYg2Bn6jh4SrPiqNBqmn8VBV/s1600/call+of+duty-11.jpg" />
<span>Call Of Duty 4 : Get Here</span></a>
</li>

</ul>
</div>

<div class='clear'></div>

NOTE : Replace YOUR-LINK-HERE and images with your content.

................................................................................................
................................................................................................
................................................................................................

How To Add Featured Post Content Slider to Blogger

1.Login to your blogger dashboard----> layout- ---> Edit HTML

2.Scroll down to where you see </head> tag .

3.Copy below code and paste it just before the </head> tag.

Note : Host prev.png and nxt.png images yourself.

6.Now save your template.

7.Go to Layout-->Page Elements and click on "Add a gadget".

8.Select "html/java script" and add the code given below and click save.

Note : Replace URL-of-Post-X , Title-of-Post-X , Slide X Description [...] , Slide-X-Image-Address with your content.

Use width=270px and height=170px images for your slides.

And also you can add many more slide to this widget.

................................................................................................
................................................................................................
................................................................................................

How To Add Mootools Recent Post Slider to blogger

STEP #1
Log in to Blogger -> Layout -> Edit HTMLand select the tick-box Expand Widget Templates
Then, find (CTRL+F) this code in the template:

]]></b:skin>

And immediately after it, paste this code:

<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><script type='text/javascript'>
//<![CDATA[

//MooTools, My Object Oriented Javascript Tools. Copyright (c) 2006 Valerio Proietti, <http://mad4milk.net>, MIT Style License.

eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('m 9F={af:\'1.11\'};h $5k(L){k(L!=7D)};h $t(L){o(!$5k(L))k V;o(L.3T)k\'B\';m t=57 L;o(t==\'2w\'&&L.a7){2k(L.6m){17 1:k\'B\';17 3:k(/\\S/).2U(L.8q)?\'ak\':\'ad\'}}o(t==\'2w\'||t==\'h\'){2k(L.7A){17 2b:k\'1p\';17 6N:k\'6d\';17 19:k\'4k\'}o(57 L.M==\'4w\'){o(L.2M)k\'9U\';o(L.7p)k\'12\'}}k t};h $1X(){m 4Q={};G(m i=0;i<12.M;i++){G(m C 15 12[i]){m ap=12[i][C];m 4X=4Q[C];o(4X&&$t(ap)==\'2w\'&&$t(4X)==\'2w\')4Q[C]=$1X(4X,ap);14 4Q[C]=ap}}k 4Q};m $N=h(){m 1b=12;o(!1b[1])1b=[c,1b[0]];G(m C 15 1b[1])1b[0][C]=1b[1][C];k 1b[0]};m $4a=h(){G(m i=0,l=12.M;i<l;i++){12[i].N=h(1F){G(m 1H 15 1F){o(!c.1z[1H])c.1z[1H]=1F[1H];o(!c[1H])c[1H]=$4a.5F(1H)}}}};$4a.5F=h(1H){k h(Q){k c.1z[1H].3m(Q,2b.1z.7M.1Q(12,1))}};$4a(62,2b,6p,7I);h $2i(L){k!!(L||L===0)};h $7m(L,7C){k $5k(L)?L:7C};h $6J(3O,22){k 1c.9W(1c.6J()*(22-3O+1)+3O)};h $3e(){k J 98().99()};h $4c(1w){9T(1w);9Q(1w);k 1r};m 33=h(L){L=L||{};L.N=$N;k L};m 9R=J 33(P);m aX=J 33(K);K.5K=K.3i(\'5K\')[0];P.3p=!!(K.79);o(P.aV)P.2t=P[P.aQ?\'b0\':\'7B\']=1a;14 o(K.8o&&!K.bb&&!bc.b6)P.3A=P[P.3p?\'aO\':\'5j\']=1a;14 o(K.aN!=1r)P.6k=1a;P.aw=P.3A;ax.N=$N;o(57 4N==\'7D\'){m 4N=h(){};o(P.3A)K.8j("av");4N.1z=(P.3A)?P["[[aq.1z]]"]:{}}4N.1z.3T=h(){};o(P.7B)6o{K.ar("at",V,1a)}6f(e){};m 19=h(1v){m 4H=h(){k(12[0]!==1r&&c.1n&&$t(c.1n)==\'h\')?c.1n.3m(c,12):c};$N(4H,c);4H.1z=1v;4H.7A=19;k 4H};19.1u=h(){};19.1z={N:h(1v){m 5N=J c(1r);G(m C 15 1v){m 7E=5N[C];5N[C]=19.7F(7E,1v[C])}k J 19(5N)},3o:h(){G(m i=0,l=12.M;i<l;i++)$N(c.1z,12[i])}};19.7F=h(3u,21){o(3u&&3u!=21){m t=$t(21);o(t!=$t(3u))k 21;2k(t){17\'h\':m 7s=h(){c.1q=12.7p.1q;k 21.3m(c,12)};7s.1q=3u;k 7s;17\'2w\':k $1X(3u,21)}}k 21};m 8E=J 19({aI:h(O){c.3F=c.3F||[];c.3F.1f(O);k c},8Q:h(){o(c.3F&&c.3F.M)c.3F.89().1V(10,c)},aH:h(){c.3F=[]}});m 2e=J 19({1L:h(t,O){o(O!=19.1u){c.$X=c.$X||{};c.$X[t]=c.$X[t]||[];c.$X[t].6F(O)}k c},1o:h(t,1b,1V){o(c.$X&&c.$X[t]){c.$X[t].1D(h(O){O.2v({\'Q\':c,\'1V\':1V,\'12\':1b})()},c)}k c},49:h(t,O){o(c.$X&&c.$X[t])c.$X[t].2y(O);k c}});m 44=J 19({3v:h(){c.r=$1X.3m(1r,[c.r].N(12));o(c.1L){G(m 4z 15 c.r){o($t(c.r[4z]==\'h\')&&(/^4W[A-Z]/).2U(4z))c.1L(4z,c.r[4z])}}k c}});2b.N({4Z:h(O,Q){G(m i=0,j=c.M;i<j;i++)O.1Q(Q,c[i],i,c)},2D:h(O,Q){m 4d=[];G(m i=0,j=c.M;i<j;i++){o(O.1Q(Q,c[i],i,c))4d.1f(c[i])}k 4d},2E:h(O,Q){m 4d=[];G(m i=0,j=c.M;i<j;i++)4d[i]=O.1Q(Q,c[i],i,c);k 4d},5O:h(O,Q){G(m i=0,j=c.M;i<j;i++){o(!O.1Q(Q,c[i],i,c))k V}k 1a},aC:h(O,Q){G(m i=0,j=c.M;i<j;i++){o(O.1Q(Q,c[i],i,c))k 1a}k V},48:h(2M,R){m 4g=c.M;G(m i=(R<0)?1c.22(0,4g+R):R||0;i<4g;i++){o(c[i]===2M)k i}k-1},7x:h(1d,M){1d=1d||0;o(1d<0)1d=c.M+1d;M=M||(c.M-1d);m 7g=[];G(m i=0;i<M;i++)7g[i]=c[1d++];k 7g},2y:h(2M){m i=0;m 4g=c.M;6g(i<4g){o(c[i]===2M){c.5t(i,1);4g--}14{i++}}k c},1e:h(2M,R){k c.48(2M,R)!=-1},aE:h(1C){m L={},M=1c.3O(c.M,1C.M);G(m i=0;i<M;i++)L[1C[i]]=c[i];k L},N:h(1p){G(m i=0,j=1p.M;i<j;i++)c.1f(1p[i]);k c},1X:h(1p){G(m i=0,l=1p.M;i<l;i++)c.6F(1p[i]);k c},6F:h(2M){o(!c.1e(2M))c.1f(2M);k c},aG:h(){k c[$6J(0,c.M-1)]||1r},6z:h(){k c[c.M-1]||1r}});2b.1z.1D=2b.1z.4Z;2b.1D=2b.4Z;h $A(1p){k 2b.7x(1p)};h $1D(3q,O,Q){o(3q&&57 3q.M==\'4w\'&&$t(3q)!=\'2w\'){2b.4Z(3q,O,Q)}14{G(m 1E 15 3q)O.1Q(Q||3q,3q[1E],1E)}};2b.1z.2U=2b.1z.1e;6p.N({2U:h(5p,2p){k(($t(5p)==\'2L\')?J 6N(5p,2p):5p).2U(c)},2G:h(){k 4t(c,10)},8i:h(){k 4G(c)},6V:h(){k c.2Z(/-\\D/g,h(2B){k 2B.6W(1).7G()})},8t:h(){k c.2Z(/\\w[A-Z]/g,h(2B){k(2B.6W(0)+\'-\'+2B.6W(1).4M())})},70:h(){k c.2Z(/\\b[a-z]/g,h(2B){k 2B.7G()})},4m:h(){k c.2Z(/^\\s+|\\s+$/g,\'\')},6S:h(){k c.2Z(/\\s{2,}/g,\' \').4m()},5T:h(1p){m 2n=c.2B(/\\d{1,3}/g);k(2n)?2n.5T(1p):V},5z:h(1p){m 3G=c.2B(/^#?(\\w{1,2})(\\w{1,2})(\\w{1,2})$/);k(3G)?3G.7M(1).5z(1p):V},1e:h(2L,s){k(s)?(s+c+s).48(s+2L+s)>-1:c.48(2L)>-1},9f:h(){k c.2Z(/([.*+?^${}()|[\\]\\/\\\\])/g,\'\\\\$1\')}});2b.N({5T:h(1p){o(c.M<3)k V;o(c.M==4&&c[3]==0&&!1p)k\'aM\';m 3G=[];G(m i=0;i<3;i++){m 3U=(c[i]-0).8J(16);3G.1f((3U.M==1)?\'0\'+3U:3U)}k 1p?3G:\'#\'+3G.2u(\'\')},5z:h(1p){o(c.M!=3)k V;m 2n=[];G(m i=0;i<3;i++){2n.1f(4t((c[i].M==1)?c[i]+c[i]:c[i],16))}k 1p?2n:\'2n(\'+2n.2u(\',\')+\')\'}});62.N({2v:h(r){m O=c;r=$1X({\'Q\':O,\'u\':V,\'12\':1r,\'1V\':V,\'3s\':V,\'5V\':V},r);o($2i(r.12)&&$t(r.12)!=\'1p\')r.12=[r.12];k h(u){m 1b;o(r.u){u=u||P.u;1b=[(r.u===1a)?u:J r.u(u)];o(r.12)1b.N(r.12)}14 1b=r.12||12;m 35=h(){k O.3m($7m(r.Q,O),1b)};o(r.1V)k aL(35,r.1V);o(r.3s)k aK(35,r.3s);o(r.5V)6o{k 35()}6f(aJ){k V};k 35()}},aB:h(1b,Q){k c.2v({\'12\':1b,\'Q\':Q})},5V:h(1b,Q){k c.2v({\'12\':1b,\'Q\':Q,\'5V\':1a})()},Q:h(Q,1b){k c.2v({\'Q\':Q,\'12\':1b})},aA:h(Q,1b){k c.2v({\'Q\':Q,\'u\':1a,\'12\':1b})},1V:h(1V,Q,1b){k c.2v({\'1V\':1V,\'Q\':Q,\'12\':1b})()},3s:h(7v,Q,1b){k c.2v({\'3s\':7v,\'Q\':Q,\'12\':1b})()}});7I.N({2G:h(){k 4t(c)},8i:h(){k 4G(c)},1t:h(3O,22){k 1c.3O(22,1c.22(3O,c))},3w:h(4n){4n=1c.3d(10,4n||0);k 1c.3w(c*4n)/4n},as:h(O){G(m i=0;i<c;i++)O(i)}});m I=J 19({1n:h(q,1F){o($t(q)==\'2L\'){o(P.2t&&1F&&(1F.1E||1F.t)){m 1E=(1F.1E)?\' 1E="\'+1F.1E+\'"\':\'\';m t=(1F.t)?\' t="\'+1F.t+\'"\':\'\';4b 1F.1E;4b 1F.t;q=\'<\'+q+1E+t+\'>\'}q=K.8j(q)}q=$(q);k(!1F||!q)?q:q.1U(1F)}});m 1M=J 19({1n:h(U){k(U)?$N(U,c):c}});1M.N=h(1F){G(m 1H 15 1F){c.1z[1H]=1F[1H];c[1H]=$4a.5F(1H)}};h $(q){o(!q)k 1r;o(q.3T)k 2a.4e(q);o([P,K].1e(q))k q;m t=$t(q);o(t==\'2L\'){q=K.5o(q);t=(q)?\'B\':V}o(t!=\'B\')k 1r;o(q.3T)k 2a.4e(q);o([\'2w\',\'ao\'].1e(q.59.4M()))k q;$N(q,I.1z);q.3T=h(){};k 2a.4e(q)};K.5s=K.3i;h $$(){m U=[];G(m i=0,j=12.M;i<j;i++){m 1B=12[i];2k($t(1B)){17\'B\':U.1f(1B);17\'au\':1J;17 V:1J;17\'2L\':1B=K.5s(1B,1a);6P:U.N(1B)}}k $$.4C(U)};$$.4C=h(1p){m U=[];G(m i=0,l=1p.M;i<l;i++){o(1p[i].$5u)54;m B=$(1p[i]);o(B&&!B.$5u){B.$5u=1a;U.1f(B)}}G(m n=0,d=U.M;n<d;n++)U[n].$5u=1r;k J 1M(U)};1M.5y=h(C){k h(){m 1b=12;m 1k=[];m U=1a;G(m i=0,j=c.M,35;i<j;i++){35=c[i][C].3m(c[i],1b);o($t(35)!=\'B\')U=V;1k.1f(35)};k(U)?$$.4C(1k):1k}};I.N=h(1v){G(m C 15 1v){4N.1z[C]=1v[C];I.1z[C]=1v[C];I[C]=$4a.5F(C);m 8k=(2b.1z[C])?C+\'1M\':C;1M.1z[8k]=1M.5y(C)}};I.N({1U:h(1F){G(m 1H 15 1F){m 4P=1F[1H];2k(1H){17\'6I\':c.5H(4P);1J;17\'X\':o(c.5r)c.5r(4P);1J;17\'1v\':c.5J(4P);1J;6P:c.58(1H,4P)}}k c},28:h(q,8l){q=$(q);2k(8l){17\'8g\':q.2K.6D(c,q);1J;17\'7N\':m 4v=q.8s();o(!4v)q.2K.6M(c);14 q.2K.6D(c,4v);1J;17\'1j\':m 6X=q.6H;o(6X){q.6D(c,6X);1J}6P:q.6M(c)}k c},b8:h(q){k c.28(q,\'8g\')},9e:h(q){k c.28(q,\'7N\')},b1:h(q){k c.28(q,\'4E\')},aT:h(q){k c.28(q,\'1j\')},9i:h(){m U=[];$1D(12,h(8d){U=U.6i(8d)});$$(U).28(c);k c},2y:h(){k c.2K.8r(c)},aR:h(8e){m q=$(c.aP(8e!==V));o(!q.$X)k q;q.$X={};G(m t 15 c.$X)q.$X[t]={\'1C\':$A(c.$X[t].1C),\'1I\':$A(c.$X[t].1I)};k q.5C()},aU:h(q){q=$(q);c.2K.an(q,c);k q},8b:h(2s){c.6M(K.aY(2s));k c},6Y:h(1l){k c.1l.1e(1l,\' \')},8m:h(1l){o(!c.6Y(1l))c.1l=(c.1l+\' \'+1l).6S();k c},8f:h(1l){c.1l=c.1l.2Z(J 6N(\'(^|\\\\s)\'+1l+\'(?:\\\\s|$)\'),\'$1\').6S();k c},aW:h(1l){k c.6Y(1l)?c.8f(1l):c.8m(1l)},26:h(C,F){2k(C){17\'29\':k c.8n(4G(F));17\'9P\':C=(P.2t)?\'9O\':\'9S\'}C=C.6V();2k($t(F)){17\'4w\':o(![\'9V\',\'8u\'].1e(C))F+=\'3Y\';1J;17\'1p\':F=\'2n(\'+F.2u(\',\')+\')\'}c.1A[C]=F;k c},5H:h(1W){2k($t(1W)){17\'2w\':I.5v(c,\'26\',1W);1J;17\'2L\':c.1A.71=1W}k c},8n:h(29){o(29==0){o(c.1A.3C!="4K")c.1A.3C="4K"}14{o(c.1A.3C!="6y")c.1A.3C="6y"}o(!c.5R||!c.5R.9N)c.1A.8u=1;o(P.2t)c.1A.2D=(29==1)?\'\':"9X(29="+29*56+")";c.1A.29=c.$1G.29=29;k c},1R:h(C){C=C.6V();m 1y=c.1A[C];o(!$2i(1y)){o(C==\'29\')k c.$1G.29;1y=[];G(m 1A 15 I.3y){o(C==1A){I.3y[1A].1D(h(s){m 1A=c.1R(s);1y.1f(4t(1A)?1A:\'7T\')},c);o(C==\'3t\'){m 5O=1y.5O(h(3U){k(3U==1y[0])});k(5O)?1y[0]:V}k 1y.2u(\' \')}}o(C.1e(\'3t\')){o(I.3y.3t.1e(C)){k[\'7X\',\'63\',\'6u\'].2E(h(p){k c.1R(C+p)},c).2u(\' \')}14 o(I.87.1e(C)){k[\'7S\',\'7O\',\'7P\',\'7Y\'].2E(h(p){k c.1R(\'3t\'+p+C.2Z(\'3t\',\'\'))},c).2u(\' \')}}o(K.8v)1y=K.8v.9D(c,1r).9L(C.8t());14 o(c.5R)1y=c.5R[C]}o(P.2t)1y=I.7W(C,1y,c);o(1y&&C.2U(/5P/i)&&1y.1e(\'2n\')){k 1y.4r(\'2n\').5t(1,4).2E(h(5P){k 5P.5T()}).2u(\' \')}k 1y},9b:h(){k I.74(c,\'1R\',12)},4x:h(5U,1d){5U+=\'9I\';m q=(1d)?c[1d]:c[5U];6g(q&&$t(q)!=\'B\')q=q[5U];k $(q)},9G:h(){k c.4x(\'3u\')},8s:h(){k c.4x(\'4v\')},am:h(){k c.4x(\'4v\',\'6H\')},6z:h(){k c.4x(\'3u\',\'ac\')},ag:h(){k $(c.2K)},ah:h(){k $$(c.8o)},6e:h(q){k!!$A(c.3i(\'*\')).1e(q)},5d:h(C){m 3c=I.5h[C];o(3c)k c[3c];m 6w=I.82[C]||0;o(!P.2t||6w)k c.aj(C,6w);m 6C=c.ab[C];k(6C)?6C.8q:1r},a2:h(C){m 3c=I.5h[C];o(3c)c[3c]=\'\';14 c.9y(C);k c},a1:h(){k I.74(c,\'5d\',12)},58:h(C,F){m 3c=I.5h[C];o(3c)c[3c]=F;14 c.a4(C,F);k c},5J:h(1W){k I.5v(c,\'58\',1W)},5L:h(){c.7U=$A(12).2u(\'\');k c},a5:h(2s){m 2J=c.4l();o([\'1A\',\'3f\'].1e(2J)){o(P.2t){o(2J==\'1A\')c.8a.71=2s;14 o(2J==\'3f\')c.58(\'2s\',2s);k c}14{c.8r(c.6H);k c.8b(2s)}}c[$5k(c.7l)?\'7l\':\'7V\']=2s;k c},a6:h(){m 2J=c.4l();o([\'1A\',\'3f\'].1e(2J)){o(P.2t){o(2J==\'1A\')k c.8a.71;14 o(2J==\'3f\')k c.5d(\'2s\')}14{k c.7U}}k($7m(c.7l,c.7V))},4l:h(){k c.59.4M()},1u:h(){2a.4q(c.3i(\'*\'));k c.5L(\'\')}});I.7W=h(C,1y,B){o($2i(4t(1y)))k 1y;o([\'34\',\'2A\'].1e(C)){m 1I=(C==\'2A\')?[\'1m\',\'4F\']:[\'1j\',\'4E\'];m 2P=0;1I.1D(h(F){2P+=B.1R(\'3t-\'+F+\'-2A\').2G()+B.1R(\'7t-\'+F).2G()});k B[\'1x\'+C.70()]-2P+\'3Y\'}14 o(C.2U(/3t(.+)7X|2I|7t/)){k\'7T\'}k 1y};I.3y={\'3t\':[],\'7t\':[],\'2I\':[]};[\'7S\',\'7O\',\'7P\',\'7Y\'].1D(h(86){G(m 1A 15 I.3y)I.3y[1A].1f(1A+86)});I.87=[\'cC\',\'cA\',\'cB\'];I.74=h(q,2N,1C){m 1y={};$1D(1C,h(1g){1y[1g]=q[2N](1g)});k 1y};I.5v=h(q,2N,72){G(m 1g 15 72)q[2N](1g,72[1g]);k q};I.5h=J 33({\'4k\':\'1l\',\'G\':\'cg\',\'cf\':\'cd\',\'ce\':\'cj\',\'ck\':\'cp\',\'co\':\'cn\',\'cG\':\'cm\',\'cF\':\'cL\',\'d0\':\'cZ\',\'F\':\'F\',\'85\':\'85\',\'84\':\'84\',\'80\':\'80\',\'81\':\'81\'});I.82={\'4Y\':2,\'3N\':2};I.2c={51:{2C:h(t,O){o(c.6s)c.6s(t,O,V);14 c.d4(\'4W\'+t,O);k c},3L:h(t,O){o(c.8c)c.8c(t,O,V);14 c.d3(\'4W\'+t,O);k c}}};P.N(I.2c.51);K.N(I.2c.51);I.N(I.2c.51);m 2a={U:[],4e:h(q){o(!q.$1G){2a.U.1f(q);q.$1G={\'29\':1}}k q},4q:h(U){G(m i=0,j=U.M,q;i<j;i++){o(!(q=U[i])||!q.$1G)54;o(q.$X)q.1o(\'4q\').5C();G(m p 15 q.$1G)q.$1G[p]=1r;G(m d 15 I.1z)q[d]=1r;2a.U[2a.U.48(q)]=1r;q.3T=q.$1G=q=1r}2a.U.2y(1r)},1u:h(){2a.4e(P);2a.4e(K);2a.4q(2a.U)}};P.2C(\'7H\',h(){P.2C(\'66\',2a.1u);o(P.2t)P.2C(\'66\',cJ)});m 2l=J 19({1n:h(u){o(u&&u.$83)k u;c.$83=1a;u=u||P.u;c.u=u;c.t=u.t;c.2X=u.2X||u.cI;o(c.2X.6m==3)c.2X=c.2X.2K;c.89=u.cN;c.cO=u.cT;c.cS=u.cP;c.cQ=u.cl;o([\'6n\',\'47\'].1e(c.t)){c.cb=(u.88)?u.88/cc:-(u.bz||0)/3}14 o(c.t.1e(\'1g\')){c.5a=u.7Q||u.bx;G(m 1E 15 2l.1C){o(2l.1C[1E]==c.5a){c.1g=1E;1J}}o(c.t==\'7w\'){m 5b=c.5a-bw;o(5b>0&&5b<13)c.1g=\'f\'+5b}c.1g=c.1g||6p.bA(c.5a).4M()}14 o(c.t.2U(/(8x|2O|bG)/)){c.1Y={\'x\':u.6q||u.7Z+K.2r.4I,\'y\':u.6r||u.7R+K.2r.4J};c.8C={\'x\':u.6q?u.6q-P.8P:u.7Z,\'y\':u.6r?u.6r-P.8O:u.7R};c.bC=(u.7Q==3)||(u.bt==2);2k(c.t){17\'6c\':c.1Z=u.1Z||u.bs;1J;17\'69\':c.1Z=u.1Z||u.9c}c.8p()}k c},1K:h(){k c.5g().5e()},5g:h(){o(c.u.5g)c.u.5g();14 c.u.bk=1a;k c},5e:h(){o(c.u.5e)c.u.5e();14 c.u.bi=V;k c}});2l.5x={1Z:h(){o(c.1Z&&c.1Z.6m==3)c.1Z=c.1Z.2K},8w:h(){6o{2l.5x.1Z.1Q(c)}6f(e){c.1Z=c.2X}}};2l.1z.8p=(P.6k)?2l.5x.8w:2l.5x.1Z;2l.1C=J 33({\'bq\':13,\'bn\':38,\'bI\':40,\'1m\':37,\'4F\':39,\'bY\':27,\'c4\':32,\'c9\':8,\'c6\':9,\'4b\':46});I.2c.2e={1L:h(t,O){c.$X=c.$X||{};c.$X[t]=c.$X[t]||{\'1C\':[],\'1I\':[]};o(c.$X[t].1C.1e(O))k c;c.$X[t].1C.1f(O);m 5w=t;m 23=I.2e[t];o(23){o(23.6j)23.6j.1Q(c,O);o(23.2E)O=23.2E;o(23.t)5w=23.t}o(!c.6s)O=O.2v({\'Q\':c,\'u\':1a});c.$X[t].1I.1f(O);k(I.6h.1e(5w))?c.2C(5w,O):c},49:h(t,O){o(!c.$X||!c.$X[t])k c;m 1h=c.$X[t].1C.48(O);o(1h==-1)k c;m 1g=c.$X[t].1C.5t(1h,1)[0];m F=c.$X[t].1I.5t(1h,1)[0];m 23=I.2e[t];o(23){o(23.2y)23.2y.1Q(c,O);o(23.t)t=23.t}k(I.6h.1e(t))?c.3L(t,F):c},5r:h(1W){k I.5v(c,\'1L\',1W)},5C:h(t){o(!c.$X)k c;o(!t){G(m 5D 15 c.$X)c.5C(5D);c.$X=1r}14 o(c.$X[t]){c.$X[t].1C.1D(h(O){c.49(t,O)},c);c.$X[t]=1r}k c},1o:h(t,1b,1V){o(c.$X&&c.$X[t]){c.$X[t].1C.1D(h(O){O.2v({\'Q\':c,\'1V\':1V,\'12\':1b})()},c)}k c},8h:h(R,t){o(!R.$X)k c;o(!t){G(m 5D 15 R.$X)c.8h(R,5D)}14 o(R.$X[t]){R.$X[t].1C.1D(h(O){c.1L(t,O)},c)}k c}};P.N(I.2c.2e);K.N(I.2c.2e);I.N(I.2c.2e);I.2e=J 33({\'7o\':{t:\'6c\',2E:h(u){u=J 2l(u);o(u.1Z!=c&&!c.6e(u.1Z))c.1o(\'7o\',u)}},\'7r\':{t:\'69\',2E:h(u){u=J 2l(u);o(u.1Z!=c&&!c.6e(u.1Z))c.1o(\'7r\',u)}},\'47\':{t:(P.6k)?\'6n\':\'47\'}});I.6h=[\'8x\',\'bJ\',\'6x\',\'5X\',\'47\',\'6n\',\'6c\',\'69\',\'2Y\',\'7w\',\'bT\',\'by\',\'3n\',\'66\',\'7H\',\'bK\',\'bM\',\'bN\',\'bX\',\'2S\',\'c7\',\'c8\',\'3Z\',\'8W\',\'8X\',\'ca\',\'2f\'];62.N({3I:h(Q,1b){k c.2v({\'Q\':Q,\'12\':1b,\'u\':2l})}});1M.N({c3:h(2J){k J 1M(c.2D(h(q){k(I.4l(q)==2J)}))},7L:h(1l,2d){m U=c.2D(h(q){k(q.1l&&q.1l.1e(1l,\' \'))});k(2d)?U:J 1M(U)},7J:h(3B,2d){m U=c.2D(h(q){k(q.3B==3B)});k(2d)?U:J 1M(U)},7K:h(1E,65,F,2d){m U=c.2D(h(q){m 21=I.5d(q,1E);o(!21)k V;o(!65)k 1a;2k(65){17\'=\':k(21==F);17\'*=\':k(21.1e(F));17\'^=\':k(21.7i(0,F.M)==F);17\'$=\':k(21.7i(21.M-F.M)==F);17\'!=\':k(21!=F);17\'~=\':k 21.1e(F,\' \')}k V});k(2d)?U:J 1M(U)}});h $E(1B,2D){k($(2D)||K).9r(1B)};h $br(1B,2D){k($(2D)||K).5s(1B)};$$.2W={\'6d\':/^(\\w*|\\*)(?:#([\\w-]+)|\\.([\\w-]+))?(?:\\[(\\w+)(?:([!*^$]?=)["\']?([^"\'\\]]*)["\']?)?])?$/,\'3p\':{64:h(1k,2H,Y,i){m 2h=[2H.bl?\'6R:\':\'\',Y[1]];o(Y[2])2h.1f(\'[@3B="\',Y[2],\'"]\');o(Y[3])2h.1f(\'[1e(6i(" ", @4k, " "), " \',Y[3],\' ")]\');o(Y[4]){o(Y[5]&&Y[6]){2k(Y[5]){17\'*=\':2h.1f(\'[1e(@\',Y[4],\', "\',Y[6],\'")]\');1J;17\'^=\':2h.1f(\'[bf-bu(@\',Y[4],\', "\',Y[6],\'")]\');1J;17\'$=\':2h.1f(\'[cR(@\',Y[4],\', 2L-M(@\',Y[4],\') - \',Y[6].M,\' + 1) = "\',Y[6],\'"]\');1J;17\'=\':2h.1f(\'[@\',Y[4],\'="\',Y[6],\'"]\');1J;17\'!=\':2h.1f(\'[@\',Y[4],\'!="\',Y[6],\'"]\')}}14{2h.1f(\'[@\',Y[4],\']\')}}1k.1f(2h.2u(\'\'));k 1k},67:h(1k,2H,2d){m U=[];m 3p=K.79(\'.//\'+1k.2u(\'//\'),2H,$$.2W.7z,cM.cV,1r);G(m i=0,j=3p.cU;i<j;i++)U.1f(3p.cr(i));k(2d)?U:J 1M(U.2E($))}},\'9p\':{64:h(1k,2H,Y,i){o(i==0){o(Y[2]){m q=2H.5o(Y[2]);o(!q||((Y[1]!=\'*\')&&(I.4l(q)!=Y[1])))k V;1k=[q]}14{1k=$A(2H.3i(Y[1]))}}14{1k=$$.2W.3i(1k,Y[1]);o(Y[2])1k=1M.7J(1k,Y[2],1a)}o(Y[3])1k=1M.7L(1k,Y[3],1a);o(Y[4])1k=1M.7K(1k,Y[4],Y[5],Y[6],1a);k 1k},67:h(1k,2H,2d){k(2d)?1k:$$.4C(1k)}},7z:h(7y){k(7y==\'6R\')?\'9C://cv.cx.cw/ay/6R\':V},3i:h(2H,59){m 6b=[];G(m i=0,j=2H.M;i<j;i++)6b.N(2H[i].3i(59));k 6b}};$$.2W.2N=(P.3p)?\'3p\':\'9p\';I.2c.6a={5M:h(1B,2d){m 1k=[];1B=1B.4m().4r(\' \');G(m i=0,j=1B.M;i<j;i++){m 9q=1B[i];m Y=9q.2B($$.2W.6d);o(!Y)1J;Y[1]=Y[1]||\'*\';m 2h=$$.2W[$$.2W.2N].64(1k,c,Y,i);o(!2h)1J;1k=2h}k $$.2W[$$.2W.2N].67(1k,c,2d)},9r:h(1B){k $(c.5M(1B,1a)[0]||V)},5s:h(1B,2d){m U=[];1B=1B.4r(\',\');G(m i=0,j=1B.M;i<j;i++)U=U.6i(c.5M(1B[i],1a));k(2d)?U:$$.4C(U)}};I.N({5o:h(3B){m q=K.5o(3B);o(!q)k V;G(m 1q=q.2K;1q!=c;1q=1q.2K){o(!1q)k V}k q},ct:h(1l){k c.5M(\'.\'+1l)}});K.N(I.2c.6a);I.N(I.2c.6a);I.N({31:h(x,y){c.4I=x;c.4J=y},5S:h(){k{\'2f\':{\'x\':c.4I,\'y\':c.4J},\'2P\':{\'x\':c.3M,\'y\':c.3D},\'5Z\':{\'x\':c.5B,\'y\':c.5Q}}},3g:h(1S){1S=1S||[];m q=c,1m=0,1j=0;bp{1m+=q.bo||0;1j+=q.bH||0;q=q.c2}6g(q);1S.1D(h(B){1m-=B.4I||0;1j-=B.4J||0});k{\'x\':1m,\'y\':1j}},8Y:h(1S){k c.3g(1S).y},8Z:h(1S){k c.3g(1S).x},61:h(1S){m 1s=c.3g(1S);m L={\'2A\':c.3M,\'34\':c.3D,\'1m\':1s.x,\'1j\':1s.y};L.4F=L.1m+L.2A;L.4E=L.1j+L.34;k L}});I.2e.6t={6j:h(O){o(P.5l){O.1Q(c);k}m 4p=h(){o(P.5l)k;P.5l=1a;P.1w=$4c(P.1w);c.1o(\'6t\')}.Q(c);o(K.4T&&P.3A){P.1w=h(){o([\'5l\',\'6v\'].1e(K.4T))4p()}.3s(50)}14 o(K.4T&&P.2t){o(!$(\'68\')){m 3N=(P.c1.c0==\'bZ:\')?\'://0\':\'9a:c5(0)\';K.bR(\'<3f 3B="68" bS 3N="\'+3N+\'"><\\/3f>\');$(\'68\').bU=h(){o(c.4T==\'6v\')4p()}}}14{P.2C("3n",4p);K.2C("bV",4p)}}};P.bQ=h(O){k c.1L(\'6t\',O)};P.N({7h:h(){o(c.5j)k c.bP;o(c.9s)k K.4i.9A;k K.2r.9A},76:h(){o(c.5j)k c.bL;o(c.9s)k K.4i.9k;k K.2r.9k},8N:h(){o(c.2t)k 1c.22(K.2r.3M,K.2r.5B);o(c.3A)k K.4i.5B;k K.2r.5B},8M:h(){o(c.2t)k 1c.22(K.2r.3D,K.2r.5Q);o(c.3A)k K.4i.5Q;k K.2r.5Q},77:h(){k c.8P||K.2r.4I},75:h(){k c.8O||K.2r.4J},5S:h(){k{\'2P\':{\'x\':c.7h(),\'y\':c.76()},\'5Z\':{\'x\':c.8N(),\'y\':c.8M()},\'2f\':{\'x\':c.77(),\'y\':c.75()}}},3g:h(){k{\'x\':0,\'y\':0}}});m 18={};18.2m=J 19({r:{4f:19.1u,2o:19.1u,8U:19.1u,1N:h(p){k-(1c.94(1c.7k*p)-1)/2},3h:bO,25:\'3Y\',45:1a,8V:50},1n:h(r){c.B=c.B||1r;c.3v(r);o(c.r.1n)c.r.1n.1Q(c)},1T:h(){m 3e=$3e();o(3e<c.3e+c.r.3h){c.8R=c.r.1N((3e-c.3e)/c.r.3h);c.3J();c.3K()}14{c.1K(1a);c.1U(c.T);c.1o(\'2o\',c.B,10);c.8Q()}},1U:h(T){c.W=T;c.3K();k c},3J:h(){c.W=c.3H(c.R,c.T)},3H:h(R,T){k(T-R)*c.8R+R},1d:h(R,T){o(!c.r.45)c.1K();14 o(c.1w)k c;c.R=R;c.T=T;c.2S=c.T-c.R;c.3e=$3e();c.1w=c.1T.3s(1c.3w(9j/c.r.8V),c);c.1o(\'4f\',c.B);k c},1K:h(2j){o(!c.1w)k c;c.1w=$4c(c.1w);o(!2j)c.1o(\'8U\',c.B);k c},23:h(R,T){k c.1d(R,T)},bW:h(2j){k c.1K(2j)}});18.2m.3o(J 8E,J 2e,J 44);18.2R={3Z:h(C,T){o(C.2U(/5P/i))k c.6u;m t=$t(T);o((t==\'1p\')||(t==\'2L\'&&T.1e(\' \')))k c.5y;k c.8y},2q:h(q,C,43){o(!43.1f)43=[43];m R=43[0],T=43[1];o(!$2i(T)){T=R;R=q.1R(C)}m 1i=c.3Z(C,T);k{\'R\':1i.2q(R),\'T\':1i.2q(T),\'1i\':1i}}};18.2R.8y={2q:h(F){k 4G(F)},3X:h(R,T,41){k 41.3H(R,T)},3W:h(F,25,C){o(25==\'3Y\'&&C!=\'29\')F=1c.3w(F);k F+25}};18.2R.5y={2q:h(F){k F.1f?F:F.4r(\' \').2E(h(v){k 4G(v)})},3X:h(R,T,41){m W=[];G(m i=0;i<R.M;i++)W[i]=41.3H(R[i],T[i]);k W},3W:h(F,25,C){o(25==\'3Y\'&&C!=\'29\')F=F.2E(1c.3w);k F.2u(25+\' \')+25}};18.2R.6u={2q:h(F){k F.1f?F:F.5z(1a)},3X:h(R,T,41){m W=[];G(m i=0;i<R.M;i++)W[i]=1c.3w(41.3H(R[i],T[i]));k W},3W:h(F){k\'2n(\'+F.2u(\',\')+\')\'}};18.63=18.2m.N({1n:h(q,C,r){c.B=$(q);c.C=C;c.1q(r)},4U:h(){k c.1U(0)},3J:h(){c.W=c.1i.3X(c.R,c.T,c)},1U:h(T){c.1i=18.2R.3Z(c.C,T);k c.1q(c.1i.2q(T))},1d:h(R,T){o(c.1w&&c.r.45)k c;m 1O=18.2R.2q(c.B,c.C,[R,T]);c.1i=1O.1i;k c.1q(1O.R,1O.T)},3K:h(){c.B.26(c.C,c.1i.3W(c.W,c.r.25,c.C))}});I.N({bm:h(C,r){k J 18.63(c,C,r)}});18.3y=18.2m.N({1n:h(q,r){c.B=$(q);c.1q(r)},3J:h(){G(m p 15 c.R)c.W[p]=c.1i[p].3X(c.R[p],c.T[p],c)},1U:h(T){m 1O={};c.1i={};G(m p 15 T){c.1i[p]=18.2R.3Z(p,T[p]);1O[p]=c.1i[p].2q(T[p])}k c.1q(1O)},1d:h(L){o(c.1w&&c.r.45)k c;c.W={};c.1i={};m R={},T={};G(m p 15 L){m 1O=18.2R.2q(c.B,p,L[p]);R[p]=1O.R;T[p]=1O.T;c.1i[p]=1O.1i}k c.1q(R,T)},3K:h(){G(m p 15 c.W)c.B.26(p,c.1i[p].3W(c.W[p],c.r.25,p))}});I.N({bg:h(r){k J 18.3y(c,r)}});18.1M=18.2m.N({1n:h(U,r){c.U=$$(U);c.1q(r)},3J:h(){G(m i 15 c.R){m 4o=c.R[i],3j=c.T[i],3b=c.1i[i],4s=c.W[i]={};G(m p 15 4o)4s[p]=3b[p].3X(4o[p],3j[p],c)}},1U:h(T){m 1O={};c.1i={};G(m i 15 T){m 3j=T[i],3b=c.1i[i]={},9l=1O[i]={};G(m p 15 3j){3b[p]=18.2R.3Z(p,3j[p]);9l[p]=3b[p].2q(3j[p])}}k c.1q(1O)},1d:h(L){o(c.1w&&c.r.45)k c;c.W={};c.1i={};m R={},T={};G(m i 15 L){m 6l=L[i],4o=R[i]={},3j=T[i]={},3b=c.1i[i]={};G(m p 15 6l){m 1O=18.2R.2q(c.U[i],p,6l[p]);4o[p]=1O.R;3j[p]=1O.T;3b[p]=1O.1i}}k c.1q(R,T)},3K:h(){G(m i 15 c.W){m 4s=c.W[i],3b=c.1i[i];G(m p 15 4s)c.U[i].26(p,3b[p].3W(4s[p],c.r.25,p))}}});18.bh=18.2m.N({r:{1S:[],1x:{\'x\':0,\'y\':0},8G:1a},1n:h(B,r){c.W=[];c.B=$(B);c.2g={\'1K\':c.1K.Q(c,V)};c.1q(r);o(c.r.8G){c.1L(\'4f\',h(){K.1L(\'47\',c.2g.1K)}.Q(c));c.1L(\'2o\',h(){K.49(\'47\',c.2g.1K)}.Q(c))}},3J:h(){G(m i=0;i<2;i++)c.W[i]=c.3H(c.R[i],c.T[i])},31:h(x,y){o(c.1w&&c.r.45)k c;m q=c.B.5S();m 1I={\'x\':x,\'y\':y};G(m z 15 q.2P){m 22=q.5Z[z]-q.2P[z];o($2i(1I[z]))1I[z]=($t(1I[z])==\'4w\')?1I[z].1t(0,22):22;14 1I[z]=q.2f[z];1I[z]+=c.r.1x[z]}k c.1d([q.2f.x,q.2f.y],[1I.x,1I.y])},bj:h(){k c.31(V,0)},bD:h(){k c.31(V,\'9d\')},bE:h(){k c.31(0,V)},bF:h(){k c.31(\'9d\',V)},9c:h(q){m 1q=c.B.3g(c.r.1S);m 2X=$(q).3g(c.r.1S);k c.31(2X.x-1q.x,2X.y-1q.y)},3K:h(){c.B.31(c.W[0],c.W[1])}});18.bB=18.2m.N({r:{1P:\'7u\'},1n:h(q,r){c.B=$(q);c.2z=J I(\'4L\',{\'6I\':$N(c.B.9b(\'2I\'),{\'bv\':\'4K\'})}).9e(c.B).9i(c.B);c.B.26(\'2I\',0);c.3v(r);c.W=[];c.1q(c.r);c.4O=1a;c.1L(\'2o\',h(){c.4O=(c.W[0]===0)});o(P.5j)c.1L(\'2o\',h(){o(c.4O)c.B.2y().28(c.2z)})},3J:h(){G(m i=0;i<2;i++)c.W[i]=c.3H(c.R[i],c.T[i])},7u:h(){c.2I=\'2I-1j\';c.4S=\'34\';c.1x=c.B.3D},7e:h(){c.2I=\'2I-1m\';c.4S=\'2A\';c.1x=c.B.3M},9h:h(1P){c[1P||c.r.1P]();k c.1d([c.B.1R(c.2I).2G(),c.2z.1R(c.4S).2G()],[0,c.1x])},9g:h(1P){c[1P||c.r.1P]();k c.1d([c.B.1R(c.2I).2G(),c.2z.1R(c.4S).2G()],[-c.1x,0])},4U:h(1P){c[1P||c.r.1P]();c.4O=V;k c.1U([-c.1x,0])},7a:h(1P){c[1P||c.r.1P]();c.4O=1a;k c.1U([0,c.1x])},cH:h(1P){o(c.2z.3D==0||c.2z.3M==0)k c.9h(1P);k c.9g(1P)},3K:h(){c.B.26(c.2I,c.W[0]+c.r.25);c.2z.26(c.4S,c.W[1]+c.r.25)}});18.6E=h(1N,2p){2p=2p||[];o($t(2p)!=\'1p\')2p=[2p];k $N(1N,{cK:h(1h){k 1N(1h,2p)},d1:h(1h){k 1-1N(1-1h,2p)},d5:h(1h){k(1h<=0.5)?1N(2*1h,2p)/2:(2-1N(2*(1-1h),2p))/2}})};18.2Q=J 33({d2:h(p){k p}});18.2Q.N=h(7c){G(m 1N 15 7c){18.2Q[1N]=J 18.6E(7c[1N]);18.2Q.6G(1N)}};18.2Q.6G=h(1N){[\'cX\',\'cW\',\'cY\'].1D(h(73){18.2Q[1N.4M()+73]=18.2Q[1N][\'ci\'+73]})};18.2Q.N({ch:h(p,x){k 1c.3d(p,x[0]||6)},cq:h(p){k 1c.3d(2,8*(p-1))},cD:h(p){k 1-1c.96(1c.cE(p))},cz:h(p){k 1-1c.96((1-p)*1c.7k/2)},cy:h(p,x){x=x[0]||1.cs;k 1c.3d(p,2)*((x+1)*p-x)},cu:h(p){m F;G(m a=0,b=1;1;a+=b,b/=2){o(p>=(7-4*a)/11){F=-1c.3d((11-6*a-11*p)/4,2)+b*b;1J}}k F},be:h(p,x){k 1c.3d(2,10*--p)*1c.94(20*p*1c.7k*(x[0]||1)/3)}});[\'aa\',\'a3\',\'a0\',\'a9\'].1D(h(1N,i){18.2Q[1N]=J 18.6E(h(p){k 1c.3d(p,[i+2])});18.2Q.6G(1N)});m 3z={};3z.2m=J 19({r:{4B:V,25:\'3Y\',4f:19.1u,97:19.1u,2o:19.1u,92:19.1u,6Z:19.1u,1t:V,3a:{x:\'1m\',y:\'1j\'},3E:V,6O:6},1n:h(q,r){c.3v(r);c.B=$(q);c.4B=$(c.r.4B)||c.B;c.2O={\'W\':{},\'1h\':{}};c.F={\'1d\':{},\'W\':{}};c.2g={\'1d\':c.1d.3I(c),\'3V\':c.3V.3I(c),\'36\':c.36.3I(c),\'1K\':c.1K.Q(c)};c.95();o(c.r.1n)c.r.1n.1Q(c)},95:h(){c.4B.1L(\'5X\',c.2g.1d);k c},a8:h(){c.4B.49(\'5X\',c.2g.1d);k c},1d:h(u){c.1o(\'97\',c.B);c.2O.1d=u.1Y;m 1t=c.r.1t;c.1t={\'x\':[],\'y\':[]};G(m z 15 c.r.3a){o(!c.r.3a[z])54;c.F.W[z]=c.B.1R(c.r.3a[z]).2G();c.2O.1h[z]=u.1Y[z]-c.F.W[z];o(1t&&1t[z]){G(m i=0;i<2;i++){o($2i(1t[z][i]))c.1t[z][i]=($t(1t[z][i])==\'h\')?1t[z][i]():1t[z][i]}}}o($t(c.r.3E)==\'4w\')c.r.3E={\'x\':c.r.3E,\'y\':c.r.3E};K.2C(\'2Y\',c.2g.3V);K.2C(\'6x\',c.2g.1K);c.1o(\'4f\',c.B);u.1K()},3V:h(u){m 93=1c.3w(1c.9Z(1c.3d(u.1Y.x-c.2O.1d.x,2)+1c.3d(u.1Y.y-c.2O.1d.y,2)));o(93>c.r.6O){K.3L(\'2Y\',c.2g.3V);K.2C(\'2Y\',c.2g.36);c.36(u);c.1o(\'92\',c.B)}u.1K()},36:h(u){c.4u=V;c.2O.W=u.1Y;G(m z 15 c.r.3a){o(!c.r.3a[z])54;c.F.W[z]=c.2O.W[z]-c.2O.1h[z];o(c.1t[z]){o($2i(c.1t[z][1])&&(c.F.W[z]>c.1t[z][1])){c.F.W[z]=c.1t[z][1];c.4u=1a}14 o($2i(c.1t[z][0])&&(c.F.W[z]<c.1t[z][0])){c.F.W[z]=c.1t[z][0];c.4u=1a}}o(c.r.3E[z])c.F.W[z]-=(c.F.W[z]%c.r.3E[z]);c.B.26(c.r.3a[z],c.F.W[z]+c.r.25)}c.1o(\'6Z\',c.B);u.1K()},1K:h(){K.3L(\'2Y\',c.2g.3V);K.3L(\'2Y\',c.2g.36);K.3L(\'6x\',c.2g.1K);c.1o(\'2o\',c.B)}});3z.2m.3o(J 2e,J 44);I.N({ai:h(r){k J 3z.2m(c,$1X({3a:{x:\'2A\',y:\'34\'}},r))}});3z.91=3z.2m.N({r:{5q:[],2F:V,1S:[]},1n:h(q,r){c.3v(r);c.B=$(q);c.5q=$$(c.r.5q);c.2F=$(c.r.2F);c.1s={\'B\':c.B.1R(\'1s\'),\'2F\':V};o(c.2F)c.1s.2F=c.2F.1R(\'1s\');o(![\'52\',\'3P\',\'4j\'].1e(c.1s.B))c.1s.B=\'3P\';m 1j=c.B.1R(\'1j\').2G();m 1m=c.B.1R(\'1m\').2G();o(c.1s.B==\'3P\'&&![\'52\',\'3P\',\'4j\'].1e(c.1s.2F)){1j=$2i(1j)?1j:c.B.8Y(c.r.1S);1m=$2i(1m)?1m:c.B.8Z(c.r.1S)}14{1j=$2i(1j)?1j:0;1m=$2i(1m)?1m:0}c.B.5H({\'1j\':1j,\'1m\':1m,\'1s\':c.1s.B});c.1q(c.B)},1d:h(u){c.2x=1r;o(c.2F){m 3R=c.2F.61();m q=c.B.61();o(c.1s.B==\'3P\'&&![\'52\',\'3P\',\'4j\'].1e(c.1s.2F)){c.r.1t={\'x\':[3R.1m,3R.4F-q.2A],\'y\':[3R.1j,3R.4E-q.34]}}14{c.r.1t={\'y\':[0,3R.34-q.34],\'x\':[0,3R.2A-q.2A]}}}c.1q(u)},36:h(u){c.1q(u);m 2x=c.4u?V:c.5q.2D(c.90,c).6z();o(c.2x!=2x){o(c.2x)c.2x.1o(\'ae\',[c.B,c]);c.2x=2x?2x.1o(\'9Y\',[c.B,c]):1r}k c},90:h(q){q=q.61(c.r.1S);m W=c.2O.W;k(W.x>q.1m&&W.x<q.4F&&W.y<q.4E&&W.y>q.1j)},1K:h(){o(c.2x&&!c.4u)c.2x.1o(\'9H\',[c.B,c]);14 c.B.1o(\'9J\',c);c.1q();k c}});I.N({9M:h(r){k J 3z.91(c,r)}});m 2V=J 33({r:{5W:V,5Y:V,3h:V,6T:V},1U:h(1g,F,r){r=$1X(c.r,r);F=9E(F);o(r.5W)F+=\'; 5W=\'+r.5W;o(r.5Y)F+=\'; 5Y=\'+r.5Y;o(r.3h){m 5A=J 98();5A.9K(5A.99()+r.3h*24*60*60*9j);F+=\'; al=\'+5A.bd()}o(r.6T)F+=\'; 6T\';K.3Q=1g+\'=\'+F;k $N(r,{\'1g\':1g,\'F\':F})},53:h(1g){m F=K.3Q.2B(\'(?:^|;)\\\\s*\'+1g.9f()+\'=([^;]*)\');k F?aZ(F[1]):V},2y:h(3Q,r){o($t(3Q)==\'2w\')c.1U(3Q.1g,\'\',$1X(3Q,{3h:-1}));14 c.1U(3Q,\'\',$1X(r,{3h:-1}))}});m 8H=J 33({9a:h(1W,1v){1v=$1X({\'4R\':19.1u},1v);m 3f=J I(\'3f\',{\'3N\':1W}).5r({\'3n\':1v.4R,\'aS\':h(){o(c.4T==\'6v\')c.1o(\'3n\')}});4b 1v.4R;k 3f.5J(1v).28(K.5K)},1i:h(1W,1v){k J I(\'b9\',$1X({\'9z\':\'ba\',\'b7\':\'b3\',\'t\':\'2s/1i\',\'4Y\':1W},1v)).28(K.5K)},3S:h(1W,1v){1v=$1X({\'4R\':19.1u,\'b2\':19.1u,\'b4\':19.1u},1v);m 3S=J b5();3S.3N=1W;m B=J I(\'7q\',{\'3N\':1W});[\'3n\',\'8X\',\'8W\'].1D(h(t){m u=1v[\'4W\'+t];4b 1v[\'4W\'+t];B.1L(t,h(){c.49(t,12.7p);u.1Q(c)})});o(3S.2A&&3S.34)B.1o(\'3n\',B,1);k B.5J(1v)},5E:h(42,r){r=$1X({2o:19.1u,8I:19.1u},r);o(!42.1f)42=[42];m 5E=[];m 5G=0;42.1D(h(1W){m 7q=J 8H.3S(1W,{\'4R\':h(){r.8I.1Q(c,5G);5G++;o(5G==42.M)r.2o()}});5E.1f(7q)});k J 1M(5E)}});m 2T=J 19({M:0,1n:h(2w){c.L=2w||{};c.4D()},53:h(1g){k(c.5I(1g))?c.L[1g]:1r},5I:h(1g){k(1g 15 c.L)},1U:h(1g,F){o(!c.5I(1g))c.M++;c.L[1g]=F;k c},4D:h(){c.M=0;G(m p 15 c.L)c.M++;k c},2y:h(1g){o(c.5I(1g)){4b c.L[1g];c.M--}k c},1D:h(O,Q){$1D(c.L,O,Q)},N:h(L){$N(c.L,L);k c.4D()},1X:h(){c.L=$1X.3m(1r,[c.L].N(12));k c.4D()},1u:h(){c.L={};c.M=0;k c},1C:h(){m 1C=[];G(m C 15 c.L)1C.1f(C);k 1C},1I:h(){m 1I=[];G(m C 15 c.L)1I.1f(c.L[C]);k 1I}});h $H(L){k J 2T(L)};2T.2V=2T.N({1n:h(1E,r){c.1E=1E;c.r=$N({\'8A\':1a},r||{});c.3n()},8z:h(){o(c.M==0){2V.2y(c.1E,c.r);k 1a}m 78=8F.8J(c.L);o(78.M>az)k V;2V.1U(c.1E,78,c.r);k 1a},3n:h(){c.L=8F.79(2V.53(c.1E),1a)||{};c.4D()}});2T.2V.2c={};[\'N\',\'1U\',\'1X\',\'1u\',\'2y\'].1D(h(2N){2T.2V.2c[2N]=h(){2T.1z[2N].3m(c,12);o(c.r.8A)c.8z();k c}});2T.2V.3o(2T.2V.2c);m 8D=J 19({r:{4y:20,7b:1,5i:h(x,y){c.B.31(x,y)}},1n:h(B,r){c.3v(r);c.B=$(B);c.7f=([P,K].1e(B))?$(K.4i):c.B},1d:h(){c.7d=c.8B.3I(c);c.7f.2C(\'2Y\',c.7d)},1K:h(){c.7f.3L(\'2Y\',c.7d);c.1w=$4c(c.1w)},8B:h(u){c.1Y=(c.B==P)?u.8C:u.1Y;o(!c.1w)c.1w=c.2f.3s(50,c)},2f:h(){m q=c.B.5S();m 1h=c.B.3g();m 2S={\'x\':0,\'y\':0};G(m z 15 c.1Y){o(c.1Y[z]<(c.r.4y+1h[z])&&q.2f[z]!=0)2S[z]=(c.1Y[z]-c.r.4y-1h[z])*c.r.7b;14 o(c.1Y[z]+c.r.4y>(q.2P[z]+1h[z])&&q.2f[z]+q.2P[z]!=q.5Z[z])2S[z]=(c.1Y[z]-q.2P[z]+c.r.4y-1h[z])*c.r.7b}o(2S.y||2S.x)c.1o(\'5i\',[q.2f.x+2S.x,q.2f.y+2S.y])}});8D.3o(J 2e,J 44);m 6B=J 19({r:{5i:19.1u,2o:19.1u,6U:h(1h){c.3x.26(c.p,1h)},1P:\'7e\',5f:56,1x:0},1n:h(q,3x,r){c.B=$(q);c.3x=$(3x);c.3v(r);c.6L=-1;c.6K=-1;c.1T=-1;c.B.1L(\'5X\',c.8K.3I(c));m 55,1x;2k(c.r.1P){17\'7e\':c.z=\'x\';c.p=\'1m\';55={\'x\':\'1m\',\'y\':V};1x=\'3M\';1J;17\'7u\':c.z=\'y\';c.p=\'1j\';55={\'x\':V,\'y\':\'1j\'};1x=\'3D\'}c.22=c.B[1x]-c.3x[1x]+(c.r.1x*2);c.8S=c.3x[1x]/2;c.8L=c.B[\'53\'+c.p.70()].Q(c.B);c.3x.26(\'1s\',\'52\').26(c.p,-c.r.1x);m 6Q={};6Q[c.z]=[-c.r.1x,c.22-c.r.1x];c.36=J 3z.2m(c.3x,{1t:6Q,3a:55,6O:0,4f:h(){c.5m()}.Q(c),6Z:h(){c.5m()}.Q(c),2o:h(){c.5m();c.2j()}.Q(c)});o(c.r.1n)c.r.1n.1Q(c)},1U:h(1T){c.1T=1T.1t(0,c.r.5f);c.5n();c.2j();c.1o(\'6U\',c.8T(c.1T));k c},8K:h(u){m 1s=u.1Y[c.z]-c.8L()-c.8S;1s=1s.1t(-c.r.1x,c.22-c.r.1x);c.1T=c.6A(1s);c.5n();c.2j();c.1o(\'6U\',1s)},5m:h(){c.1T=c.6A(c.36.F.W[c.z]);c.5n()},5n:h(){o(c.6L!=c.1T){c.6L=c.1T;c.1o(\'5i\',c.1T)}},2j:h(){o(c.6K!==c.1T){c.6K=c.1T;c.1o(\'2o\',c.1T+\'\')}},6A:h(1s){k 1c.3w((1s+c.r.1x)/c.22*c.r.5f)},8T:h(1T){k c.22*1T/c.r.5f}});6B.3o(J 2e);6B.3o(J 44);m 9v=J 19({r:{9t:h(3r){3r.26(\'3C\',\'6y\')},9u:h(3r){3r.26(\'3C\',\'4K\')},7j:30,9o:56,9n:56,1l:\'aF\',4A:{\'x\':16,\'y\':16},4j:V},1n:h(U,r){c.3v(r);c.3l=J I(\'4L\',{\'4k\':c.r.1l+\'-3r\',\'6I\':{\'1s\':\'3P\',\'1j\':\'0\',\'1m\':\'0\',\'3C\':\'4K\'}}).28(K.4i);c.2z=J I(\'4L\').28(c.3l);$$(U).1D(c.9B,c);o(c.r.1n)c.r.1n.1Q(c)},9B:h(q){q.$1G.3k=(q.4Y&&q.4l()==\'a\')?q.4Y.2Z(\'9C://\',\'\'):(q.9z||V);o(q.4h){m 5c=q.4h.4r(\'::\');o(5c.M>1){q.$1G.3k=5c[0].4m();q.$1G.4V=5c[1].4m()}14{q.$1G.4V=q.4h}q.9y(\'4h\')}14{q.$1G.4V=V}o(q.$1G.3k&&q.$1G.3k.M>c.r.7j)q.$1G.3k=q.$1G.3k.7i(0,c.r.7j-1)+"&aD;";q.1L(\'7o\',h(u){c.1d(q);o(!c.r.4j)c.7n(u);14 c.1s(q)}.Q(c));o(!c.r.4j)q.1L(\'2Y\',c.7n.3I(c));m 2j=c.2j.Q(c);q.1L(\'7r\',2j);q.1L(\'4q\',2j)},1d:h(q){c.2z.1u();o(q.$1G.3k){c.4h=J I(\'9w\').28(J I(\'4L\',{\'4k\':c.r.1l+\'-4h\'}).28(c.2z)).5L(q.$1G.3k)}o(q.$1G.4V){c.2s=J I(\'9w\').28(J I(\'4L\',{\'4k\':c.r.1l+\'-2s\'}).28(c.2z)).5L(q.$1G.4V)}$4c(c.1w);c.1w=c.7a.1V(c.r.9o,c)},2j:h(u){$4c(c.1w);c.1w=c.4U.1V(c.r.9n,c)},1s:h(B){m 1h=B.3g();c.3l.5H({\'1m\':1h.x+c.r.4A.x,\'1j\':1h.y+c.r.4A.y})},7n:h(u){m 9m={\'x\':P.7h(),\'y\':P.76()};m 2f={\'x\':P.77(),\'y\':P.75()};m 3r={\'x\':c.3l.3M,\'y\':c.3l.3D};m 1H={\'x\':\'1m\',\'y\':\'1j\'};G(m z 15 1H){m 1h=u.1Y[z]+c.r.4A[z];o((1h+3r[z]-2f[z])>9m[z])1h=u.1Y[z]-c.r.4A[z]-3r[z];c.3l.26(1H[z],1h)}},7a:h(){o(c.r.9x)c.1w=c.4U.1V(c.r.9x,c);c.1o(\'9t\',[c.3l])},4U:h(){c.1o(\'9u\',[c.3l])}});9v.3o(J 2e,J 44);',62,812,'||||||||||||this|||||function|||return||var||if||el|options||type|event|||||||element|property|||value|for||Element|new|document|obj|length|extend|fn|window|bind|from||to|elements|false|now|events|param||||arguments||else|in||case|Fx|Class|true|args|Math|start|contains|push|key|pos|css|top|items|className|left|initialize|fireEvent|array|parent|null|position|limit|empty|properties|timer|offset|result|prototype|style|selector|keys|each|name|props|tmp|prop|values|break|stop|addEvent|Elements|transition|parsed|mode|call|getStyle|overflown|step|set|delay|source|merge|page|relatedTarget||current|max|custom||unit|setStyle||inject|opacity|Garbage|Array|Methods|nocash|Events|scroll|bound|temp|chk|end|switch|Event|Base|rgb|onComplete|params|parse|documentElement|text|ie|join|create|object|overed|remove|wrapper|width|match|addListener|filter|map|container|toInt|context|margin|tag|parentNode|string|item|method|mouse|size|Transitions|CSS|change|Hash|test|Cookie|shared|target|mousemove|replace||scrollTo||Abstract|height|returns|drag||||modifiers|iCss|index|pow|time|script|getPosition|duration|getElementsByTagName|iTo|myTitle|toolTip|apply|load|implement|xpath|iterable|tip|periodical|border|previous|setOptions|round|knob|Styles|Drag|webkit|id|visibility|offsetHeight|grid|chains|hex|compute|bindWithEvent|setNow|increase|removeListener|offsetWidth|src|min|absolute|cookie|cont|image|htmlElement|bit|check|getValue|getNow|px|select||fx|sources|fromTo|Options|wait||mousewheel|indexOf|removeEvent|native|delete|clear|results|collect|onStart|len|title|body|fixed|class|getTag|trim|precision|iFrom|domReady|trash|split|iNow|parseInt|out|next|number|walk|area|option|offsets|handle|unique|setLength|bottom|right|parseFloat|klass|scrollLeft|scrollTop|hidden|div|toLowerCase|HTMLElement|open|val|mix|onload|layout|readyState|hide|myText|on|mp|href|forEach||Listeners|relative|get|continue|mod|100|typeof|setProperty|tagName|code|fKey|dual|getProperty|preventDefault|steps|stopPropagation|Properties|onChange|webkit419|defined|loaded|draggedKnob|checkStep|getElementById|regex|droppables|addEvents|getElementsBySelector|splice|included|setMany|realType|fix|Multi|hexToRgb|date|scrollWidth|removeEvents|evType|images|generic|counter|setStyles|hasKey|setProperties|head|setHTML|getElements|proto|every|color|scrollHeight|currentStyle|getSize|rgbToHex|brother|attempt|domain|mousedown|path|scrollSize||getCoordinates|Function|Style|getParam|operator|unload|getItems|ie_ready|mouseout|Dom|found|mouseover|regexp|hasChild|catch|while|NativeEvents|concat|add|gecko|iProps|nodeType|DOMMouseScroll|try|String|pageX|pageY|addEventListener|domready|Color|complete|flag|mouseup|visible|getLast|toStep|Slider|node|insertBefore|Transition|include|compat|firstChild|styles|random|previousEnd|previousChange|appendChild|RegExp|snap|default|lim|xhtml|clean|secure|onTick|camelCase|charAt|first|hasClass|onDrag|capitalize|cssText|pairs|easeType|getMany|getScrollTop|getHeight|getScrollLeft|str|evaluate|show|velocity|transitions|coord|horizontal|mousemover|newArray|getWidth|substr|maxTitleChars|PI|innerText|pick|locate|mouseenter|callee|img|mouseleave|merged|padding|vertical|interval|keydown|copy|prefix|resolver|constructor|ie6|picked|undefined|pp|Merge|toUpperCase|beforeunload|Number|filterById|filterByAttribute|filterByClass|slice|after|Right|Bottom|which|clientY|Top|0px|innerHTML|textContent|fixStyle|Width|Left|clientX|multiple|selected|PropertiesIFlag|extended|checked|disabled|direction|borderShort|wheelDelta|shift|styleSheet|appendText|removeEventListener|argument|contents|removeClass|before|cloneEvents|toFloat|createElement|elementsProperty|where|addClass|setOpacity|childNodes|fixRelatedTarget|nodeValue|removeChild|getNext|hyphenate|zoom|defaultView|relatedTargetGecko|click|Single|save|autoSave|getCoords|client|Scroller|Chain|Json|wheelStops|Asset|onProgress|toString|clickedElement|getPos|getScrollHeight|getScrollWidth|pageYOffset|pageXOffset|callChain|delta|half|toPosition|onCancel|fps|error|abort|getTop|getLeft|checkAgainst|Move|onSnap|distance|cos|attach|sin|onBeforeStart|Date|getTime|javascript|getStyles|toElement|full|injectAfter|escapeRegExp|slideOut|slideIn|adopt|1000|clientHeight|iParsed|win|hideDelay|showDelay|normal|sel|getElement|opera|onShow|onHide|Tips|span|timeout|removeAttribute|rel|clientWidth|build|http|getComputedStyle|encodeURIComponent|MooTools|getPrevious|drop|Sibling|emptydrop|setTime|getPropertyValue|makeDraggable|hasLayout|styleFloat|float|clearInterval|Window|cssFloat|clearTimeout|collection|zIndex|floor|alpha|over|sqrt|Quart|getProperties|removeProperty|Cubic|setAttribute|setText|getText|nodeName|detach|Quint|Quad|attributes|lastChild|whitespace|leave|version|getParent|getChildren|makeResizable|getAttribute|textnode|expires|getFirst|replaceChild|embed||DOMElement|execCommand|times|BackgroundImageCache|boolean|iframe|khtml|Object|1999|4096|bindAsEventListener|pass|some|hellip|associate|tool|getRandom|clearChain|chain|err|setInterval|setTimeout|transparent|getBoxObjectFor|webkit420|cloneNode|XMLHttpRequest|clone|readystatechange|injectTop|replaceWith|ActiveXObject|toggleClass|Document|createTextNode|decodeURIComponent|ie7|injectInside|onabort|screen|onerror|Image|taintEnabled|media|injectBefore|link|stylesheet|all|navigator|toGMTString|Elastic|starts|effects|Scroll|returnValue|toTop|cancelBubble|namespaceURI|effect|up|offsetLeft|do|enter|ES|fromElement|button|with|overflow|111|keyCode|keyup|detail|fromCharCode|Slide|rightClick|toBottom|toLeft|toRight|menu|offsetTop|down|dblclick|resize|innerHeight|move|focus|500|innerWidth|onDomReady|write|defer|keypress|onreadystatechange|DOMContentLoaded|clearTimer|blur|esc|https|protocol|location|offsetParent|filterByTag|space|void|tab|submit|reset|backspace|contextmenu|wheel|120|colSpan|rowspan|colspan|htmlFor|Pow|ease|rowSpan|accesskey|metaKey|maxLength|tabIndex|tabindex|accessKey|Expo|snapshotItem|618|getElementsByClassName|Bounce|www|org|w3|Back|Sine|borderStyle|borderColor|borderWidth|Circ|acos|readonly|maxlength|toggle|srcElement|CollectGarbage|easeIn|readOnly|XPathResult|shiftKey|control|altKey|meta|substring|alt|ctrlKey|snapshotLength|UNORDERED_NODE_SNAPSHOT_TYPE|Out|In|InOut|frameBorder|frameborder|easeOut|linear|detachEvent|attachEvent|easeInOut'.split('|'),0,{}))

//]]>
</script>

<script type='text/javascript'>
//<![CDATA[

/*
This file is part of JonDesign's SmoothGallery v2.0.

JonDesign's SmoothGallery is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 3 of the License, or
(at your option) any later version.

JonDesign's SmoothGallery is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with JonDesign's SmoothGallery; if not, write to the Free Software
Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA

Main Developer: Jonathan Schemoul (JonDesign: http://www.jondesign.net/)
Contributed code by:
- Christian Ehret (bugfix)
- Nitrix (bugfix)
- Valerio from Mad4Milk for his great help with the carousel scrolling and many other things.
- Archie Cowan for helping me find a bugfix on carousel inner width problem.
- Tomocchino from #mootools for the preloader class
Many thanks to:
- The mootools team for the great mootools lib, and it's help and support throughout the project.
*/

// declaring the class
var gallery = {
initialize: function(element, options) {
this.setOptions({
showArrows: true,
showCarousel: true,
showInfopane: true,
embedLinks: true,
fadeDuration: 500,
timed: false,
delay: 9000,
preloader: true,
preloaderImage: true,
preloaderErrorImage: true,
/* Data retrieval */
manualData: [],
populateFrom: false,
populateData: true,
destroyAfterPopulate: true,
elementSelector: "div.imageElement",
titleSelector: "h2",
subtitleSelector: "p",
linkSelector: "a.open",
imageSelector: "img.full",
thumbnailSelector: "img.thumbnail",
defaultTransition: "fade",
/* InfoPane options */
slideInfoZoneOpacity: 0.7,
slideInfoZoneSlide: true,
/* Carousel options */
carouselMinimizedOpacity: 0.4,
carouselMinimizedHeight: 20,
carouselMaximizedOpacity: 0.9,
thumbHeight: 75,
thumbWidth: 100,
thumbSpacing: 10,
thumbIdleOpacity: 0.2,
textShowCarousel: 'Featured Content',
showCarouselLabel: true,
thumbCloseCarousel: true,
useThumbGenerator: false,
thumbGenerator: 'resizer.php',
useExternalCarousel: false,
carouselElement: false,
carouselHorizontal: true,
activateCarouselScroller: true,
carouselPreloader: true,
textPreloadingCarousel: 'Loading...',
/* CSS Classes */
baseClass: 'jdGallery',
withArrowsClass: 'withArrows',
/* Plugins: HistoryManager */
useHistoryManager: false,
customHistoryKey: false
}, options);
this.fireEvent('onInit');
this.currentIter = 0;
this.lastIter = 0;
this.maxIter = 0;
this.galleryElement = element;
this.galleryData = this.options.manualData;
this.galleryInit = 1;
this.galleryElements = Array();
this.thumbnailElements = Array();
this.galleryElement.addClass(this.options.baseClass);

this.populateFrom = element;
if (this.options.populateFrom)
this.populateFrom = this.options.populateFrom;
if (this.options.populateData)
this.populateData();
element.style.display="block";

if (this.options.useHistoryManager)
this.initHistory();

if (this.options.embedLinks)
{
this.currentLink = new Element('a').addClass('open').setProperties({
href: '#',
title: ''
}).injectInside(element);
if ((!this.options.showArrows) && (!this.options.showCarousel))
this.galleryElement = element = this.currentLink;
else
this.currentLink.setStyle('display', 'none');
}

this.constructElements();
if ((this.galleryData.length>1)&&(this.options.showArrows))
{
var leftArrow = new Element('a').addClass('left').addEvent(
'click',
this.prevItem.bind(this)
).injectInside(element);
var rightArrow = new Element('a').addClass('right').addEvent(
'click',
this.nextItem.bind(this)
).injectInside(element);
this.galleryElement.addClass(this.options.withArrowsClass);
}
this.loadingElement = new Element('div').addClass('loadingElement').injectInside(element);
if (this.options.showInfopane) this.initInfoSlideshow();
if (this.options.showCarousel) this.initCarousel();
this.doSlideShow(1);
},
populateData: function() {
currentArrayPlace = this.galleryData.length;
options = this.options;
var data = $A(this.galleryData);
data.extend(this.populateGallery(this.populateFrom, currentArrayPlace));
this.galleryData = data;
this.fireEvent('onPopulated');
},
populateGallery: function(element, startNumber) {
var data = [];
options = this.options;
currentArrayPlace = startNumber;
element.getElements(options.elementSelector).each(function(el) {
elementDict = {
image: el.getElement(options.imageSelector).getProperty('src'),
number: currentArrayPlace,
transition: this.options.defaultTransition
};
elementDict.extend = $extend;
if ((options.showInfopane) | (options.showCarousel))
elementDict.extend({
title: el.getElement(options.titleSelector).innerHTML,
description: el.getElement(options.subtitleSelector).innerHTML
});
if (options.embedLinks)
elementDict.extend({
link: el.getElement(options.linkSelector).href||false,
linkTitle: el.getElement(options.linkSelector).title||false,
linkTarget: el.getElement(options.linkSelector).getProperty('target')||false
});
if ((!options.useThumbGenerator) && (options.showCarousel))
elementDict.extend({
thumbnail: el.getElement(options.thumbnailSelector).getProperty('src')
});
else if (options.useThumbGenerator)
elementDict.extend({
thumbnail: options.thumbGenerator + '?imgfile=' + elementDict.image + '&max_width=' + options.thumbWidth + '&max_height=' + options.thumbHeight
});

data.extend([elementDict]);
currentArrayPlace++;
if (this.options.destroyAfterPopulate)
el.remove();
});
return data;
},
constructElements: function() {
el = this.galleryElement;
this.maxIter = this.galleryData.length;
var currentImg;
for(i=0;i<this.galleryData.length;i++)
{
var currentImg = new Fx.Styles(
new Element('div').addClass('slideElement').setStyles({
'position':'absolute',
'left':'0px',
'right':'0px',
'margin':'0px',
'padding':'0px',
'backgroundPosition':"center center",
'opacity':'0'
}).injectInside(el),
'opacity',
{duration: this.options.fadeDuration}
);
if (this.options.preloader)
{
currentImg.source = this.galleryData[i].image;
currentImg.loaded = false;
currentImg.load = function(imageStyle) {
if (!imageStyle.loaded) {
new Asset.image(imageStyle.source, {
'onload' : function(img){
img.element.setStyle(
'backgroundImage',
"url('" + img.source + "')")
img.loaded = true;
}.bind(this, imageStyle)
});
}
}.pass(currentImg, this);
} else {
currentImg.element.setStyle('backgroundImage',
"url('" + this.galleryData[i].image + "')");
}
this.galleryElements[parseInt(i)] = currentImg;
}
},
destroySlideShow: function(element) {
var myClassName = element.className;
var newElement = new Element('div').addClass('myClassName');
element.parentNode.replaceChild(newElement, element);
},
startSlideShow: function() {
this.fireEvent('onStart');
this.loadingElement.style.display = "none";
this.lastIter = this.maxIter - 1;
this.currentIter = 0;
this.galleryInit = 0;
this.galleryElements[parseInt(this.currentIter)].set({opacity: 1});
if (this.options.showInfopane)
this.showInfoSlideShow.delay(1000, this);
var textShowCarousel = formatString(this.options.textShowCarousel, this.currentIter+1, this.maxIter);
if (this.options.showCarousel&&(!this.options.carouselPreloader))
this.carouselBtn.setHTML(textShowCarousel).setProperty('title', textShowCarousel);
this.prepareTimer();
if (this.options.embedLinks)
this.makeLink(this.currentIter);
},
nextItem: function() {
this.fireEvent('onNextCalled');
this.nextIter = this.currentIter+1;
if (this.nextIter >= this.maxIter)
this.nextIter = 0;
this.galleryInit = 0;
this.goTo(this.nextIter);
},
prevItem: function() {
this.fireEvent('onPreviousCalled');
this.nextIter = this.currentIter-1;
if (this.nextIter <= -1)
this.nextIter = this.maxIter - 1;
this.galleryInit = 0;
this.goTo(this.nextIter);
},
goTo: function(num) {
this.clearTimer();
if(this.options.preloader)
{
this.galleryElements[num].load();
if (num==0)
this.galleryElements[this.maxIter - 1].load();
else
this.galleryElements[num - 1].load();
if (num==(this.maxIter - 1))
this.galleryElements[0].load();
else
this.galleryElements[num + 1].load();

}
if (this.options.embedLinks)
this.clearLink();
if (this.options.showInfopane)
{
this.slideInfoZone.clearChain();
this.hideInfoSlideShow().chain(this.changeItem.pass(num, this));
} else
this.currentChangeDelay = this.changeItem.delay(500, this, num);
if (this.options.embedLinks)
this.makeLink(num);
this.prepareTimer();
/*if (this.options.showCarousel)
this.clearThumbnailsHighlights();*/
},
changeItem: function(num) {
this.fireEvent('onStartChanging');
this.galleryInit = 0;
if (this.currentIter != num)
{
for(i=0;i<this.maxIter;i++)
{
if ((i != this.currentIter)) this.galleryElements[i].set({opacity: 0});
}
gallery.Transitions[this.galleryData[num].transition].pass([
this.galleryElements[this.currentIter],
this.galleryElements[num],
this.currentIter,
num], this)();
this.currentIter = num;
}
var textShowCarousel = formatString(this.options.textShowCarousel, num+1, this.maxIter);
if (this.options.showCarousel)
this.carouselBtn.setHTML(textShowCarousel).setProperty('title', textShowCarousel);
this.doSlideShow.bind(this)();
this.fireEvent('onChanged');
},
clearTimer: function() {
if (this.options.timed)
$clear(this.timer);
},
prepareTimer: function() {
if (this.options.timed)
this.timer = this.nextItem.delay(this.options.delay, this);
},
doSlideShow: function(position) {
if (this.galleryInit == 1)
{
imgPreloader = new Image();
imgPreloader.onload=function(){
this.startSlideShow.delay(10, this);
}.bind(this);
imgPreloader.src = this.galleryData[0].image;
if(this.options.preloader)
this.galleryElements[0].load();
} else {
if (this.options.showInfopane)
{
if (this.options.showInfopane)
{
this.showInfoSlideShow.delay((500 + this.options.fadeDuration), this);
} else
if ((this.options.showCarousel)&&(this.options.activateCarouselScroller))
this.centerCarouselOn(position);
}
}
},
createCarousel: function() {
var carouselElement;
if (!this.options.useExternalCarousel)
{
var carouselContainerElement = new Element('div').addClass('carouselContainer').injectInside(this.galleryElement);
this.carouselContainer = new Fx.Styles(carouselContainerElement, {transition: Fx.Transitions.expoOut});
this.carouselContainer.normalHeight = carouselContainerElement.offsetHeight;
this.carouselContainer.set({'opacity': this.options.carouselMinimizedOpacity, 'top': (this.options.carouselMinimizedHeight - this.carouselContainer.normalHeight)});
this.carouselBtn = new Element('a').addClass('carouselBtn').setProperties({
title: this.options.textShowCarousel
}).injectInside(carouselContainerElement);
if(this.options.carouselPreloader)
this.carouselBtn.setHTML(this.options.textPreloadingCarousel);
else
this.carouselBtn.setHTML(this.options.textShowCarousel);
this.carouselBtn.addEvent(
'click',
function () {
this.carouselContainer.clearTimer();
this.toggleCarousel();
}.bind(this)
);
this.carouselActive = false;

carouselElement = new Element('div').addClass('carousel').injectInside(carouselContainerElement);
this.carousel = new Fx.Styles(carouselElement);
} else {
carouselElement = $(this.options.carouselElement).addClass('jdExtCarousel');
}
this.carouselElement = new Fx.Styles(carouselElement, {transition: Fx.Transitions.expoOut});
this.carouselElement.normalHeight = carouselElement.offsetHeight;
if (this.options.showCarouselLabel)
this.carouselLabel = new Element('p').addClass('label').injectInside(carouselElement);
carouselWrapper = new Element('div').addClass('carouselWrapper').injectInside(carouselElement);
this.carouselWrapper = new Fx.Styles(carouselWrapper, {transition: Fx.Transitions.expoOut});
this.carouselWrapper.normalHeight = carouselWrapper.offsetHeight;
this.carouselInner = new Element('div').addClass('carouselInner').injectInside(carouselWrapper);
if (this.options.activateCarouselScroller)
{
this.carouselWrapper.scroller = new Scroller(carouselWrapper, {
area: 100,
velocity: 0.2
})

this.carouselWrapper.elementScroller = new Fx.Scroll(carouselWrapper, {
duration: 400,
onStart: this.carouselWrapper.scroller.stop.bind(this.carouselWrapper.scroller),
onComplete: this.carouselWrapper.scroller.start.bind(this.carouselWrapper.scroller)
});
}
},
fillCarousel: function() {
this.constructThumbnails();
this.carouselInner.normalWidth = ((this.maxIter * (this.options.thumbWidth + this.options.thumbSpacing + 2))+this.options.thumbSpacing) + "px";
this.carouselInner.style.width = this.carouselInner.normalWidth;
},
initCarousel: function () {
this.createCarousel();
this.fillCarousel();
if (this.options.carouselPreloader)
this.preloadThumbnails();
},
flushCarousel: function() {
this.thumbnailElements.each(function(myFx) {
myFx.element.remove();
myFx = myFx.element = null;
});
this.thumbnailElements = [];
},
toggleCarousel: function() {
if (this.carouselActive)
this.hideCarousel();
else
this.showCarousel();
},
showCarousel: function () {
this.fireEvent('onShowCarousel');
this.carouselContainer.start({
'opacity': this.options.carouselMaximizedOpacity,
'top': 0
}).chain(function() {
this.carouselActive = true;
this.carouselWrapper.scroller.start();
this.fireEvent('onCarouselShown');
this.carouselContainer.options.onComplete = null;
}.bind(this));
},
hideCarousel: function () {
this.fireEvent('onHideCarousel');
var targetTop = this.options.carouselMinimizedHeight - this.carouselContainer.normalHeight;
this.carouselContainer.start({
'opacity': this.options.carouselMinimizedOpacity,
'top': targetTop
}).chain(function() {
this.carouselActive = false;
this.carouselWrapper.scroller.stop();
this.fireEvent('onCarouselHidden');
this.carouselContainer.options.onComplete = null;
}.bind(this));
},
constructThumbnails: function () {
element = this.carouselInner;
for(i=0;i<this.galleryData.length;i++)
{
var currentImg = new Fx.Style(new Element ('div').addClass("thumbnail").setStyles({
backgroundImage: "url('" + this.galleryData[i].thumbnail + "')",
backgroundPosition: "center center",
backgroundRepeat: 'no-repeat',
marginLeft: this.options.thumbSpacing + "px",
width: this.options.thumbWidth + "px",
height: this.options.thumbHeight + "px"
}).injectInside(element), "opacity", {duration: 200}).set(this.options.thumbIdleOpacity);
currentImg.element.addEvents({
'mouseover': function (myself) {
myself.clearTimer();
myself.start(0.99);
if (this.options.showCarouselLabel)
$(this.carouselLabel).setHTML('<span class="number">' + (myself.relatedImage.number + 1) + "/" + this.maxIter + ":</span> " + myself.relatedImage.title);
}.pass(currentImg, this),
'mouseout': function (myself) {
myself.clearTimer();
myself.start(this.options.thumbIdleOpacity);
}.pass(currentImg, this),
'click': function (myself) {
this.goTo(myself.relatedImage.number);
if (this.options.thumbCloseCarousel)
this.hideCarousel();
}.pass(currentImg, this)
});

currentImg.relatedImage = this.galleryData[i];
this.thumbnailElements[parseInt(i)] = currentImg;
}
},
log: function(value) {
if(console.log)
console.log(value);
},
preloadThumbnails: function() {
var thumbnails = [];
for(i=0;i<this.galleryData.length;i++)
{
thumbnails[parseInt(i)] = this.galleryData[i].thumbnail;
}
this.thumbnailPreloader = new Preloader();
this.thumbnailPreloader.addEvent('onComplete', function() {
var textShowCarousel = formatString(this.options.textShowCarousel, this.currentIter+1, this.maxIter);
this.carouselBtn.setHTML(textShowCarousel).setProperty('title', textShowCarousel);
}.bind(this));
this.thumbnailPreloader.load(thumbnails);
},
clearThumbnailsHighlights: function()
{
for(i=0;i<this.galleryData.length;i++)
{
this.thumbnailElements[i].clearTimer();
this.thumbnailElements[i].start(0.2);
}
},
changeThumbnailsSize: function(width, height)
{
for(i=0;i<this.galleryData.length;i++)
{
this.thumbnailElements[i].clearTimer();
this.thumbnailElements[i].element.setStyles({
'width': width + "px",
'height': height + "px"
});
}
},
centerCarouselOn: function(num) {
if (!this.carouselWallMode)
{
var carouselElement = this.thumbnailElements[num];
var position = carouselElement.element.offsetLeft + (carouselElement.element.offsetWidth / 2);
var carouselWidth = this.carouselWrapper.element.offsetWidth;
var carouselInnerWidth = this.carouselInner.offsetWidth;
var diffWidth = carouselWidth / 2;
var scrollPos = position-diffWidth;
this.carouselWrapper.elementScroller.scrollTo = (scrollPos,0);
}
},
initInfoSlideshow: function() {
/*if (this.slideInfoZone.element)
this.slideInfoZone.element.remove();*/
this.slideInfoZone = new Fx.Styles(new Element('div').addClass('slideInfoZone').injectInside($(this.galleryElement))).set({'opacity':0});
var slideInfoZoneTitle = new Element('h2').injectInside(this.slideInfoZone.element);
var slideInfoZoneDescription = new Element('p').injectInside(this.slideInfoZone.element);
this.slideInfoZone.normalHeight = this.slideInfoZone.element.offsetHeight;
this.slideInfoZone.element.setStyle('opacity',0);
},
changeInfoSlideShow: function()
{
this.hideInfoSlideShow.delay(10, this);
this.showInfoSlideShow.delay(500, this);
},
showInfoSlideShow: function() {
this.fireEvent('onShowInfopane');
this.slideInfoZone.clearTimer();
element = this.slideInfoZone.element;
element.getElement('h2').setHTML(this.galleryData[this.currentIter].title);
element.getElement('p').setHTML(this.galleryData[this.currentIter].description);
if(this.options.slideInfoZoneSlide)
this.slideInfoZone.start({'opacity': [0, this.options.slideInfoZoneOpacity], 'height': [0, this.slideInfoZone.normalHeight]});
else
this.slideInfoZone.start({'opacity': [0, this.options.slideInfoZoneOpacity]});
if (this.options.showCarousel)
this.slideInfoZone.chain(this.centerCarouselOn.pass(this.currentIter, this));
return this.slideInfoZone;
},
hideInfoSlideShow: function() {
this.fireEvent('onHideInfopane');
this.slideInfoZone.clearTimer();
if(this.options.slideInfoZoneSlide)
this.slideInfoZone.start({'opacity': 0, 'height': 0});
else
this.slideInfoZone.start({'opacity': 0});
return this.slideInfoZone;
},
makeLink: function(num) {
this.currentLink.setProperties({
href: this.galleryData[num].link,
title: this.galleryData[num].linkTitle
})
if (!((this.options.embedLinks) && (!this.options.showArrows) && (!this.options.showCarousel)))
this.currentLink.setStyle('display', 'block');
},
clearLink: function() {
this.currentLink.setProperties({href: '', title: ''});
if (!((this.options.embedLinks) && (!this.options.showArrows) && (!this.options.showCarousel)))
this.currentLink.setStyle('display', 'none');
},
/* To change the gallery data, those two functions : */
flushGallery: function() {
this.galleryElements.each(function(myFx) {
myFx.element.remove();
myFx = myFx.element = null;
});
this.galleryElements = [];
},
changeData: function(data) {
this.galleryData = data;
this.clearTimer();
this.flushGallery();
if (this.options.showCarousel) this.flushCarousel();
this.constructElements();
if (this.options.showCarousel) this.fillCarousel();
if (this.options.showInfopane) this.hideInfoSlideShow();
this.galleryInit=1;
this.lastIter=0;
this.currentIter=0;
this.doSlideShow(1);
},
/* Plugins: HistoryManager */
initHistory: function() {
this.fireEvent('onHistoryInit');
this.historyKey = this.galleryElement.id + '-picture';
if (this.options.customHistoryKey)
this.historyKey = this.options.customHistoryKey();
this.history = HistoryManager.register(
this.historyKey,
[1],
function(values) {
if (parseInt(values[0])-1 < this.maxIter)
this.goTo(parseInt(values[0])-1);
}.bind(this),
function(values) {
return [this.historyKey, '(', values[0], ')'].join('');
}.bind(this),
this.historyKey + '\$(\\d+)\$');
this.addEvent('onChanged', function(){
this.history.setValue(0, this.currentIter+1);
}.bind(this));
this.fireEvent('onHistoryInited');
}
};
gallery = new Class(gallery);
gallery.implement(new Events);
gallery.implement(new Options);

gallery.Transitions = new Abstract ({
fade: function(oldFx, newFx, oldPos, newPos){
oldFx.options.transition = newFx.options.transition = Fx.Transitions.linear;
oldFx.options.duration = newFx.options.duration = this.options.fadeDuration;
if (newPos > oldPos) newFx.start({opacity: 1});
else
{
newFx.set({opacity: 1});
oldFx.start({opacity: 0});
}
},
crossfade: function(oldFx, newFx, oldPos, newPos){
oldFx.options.transition = newFx.options.transition = Fx.Transitions.linear;
oldFx.options.duration = newFx.options.duration = this.options.fadeDuration;
newFx.start({opacity: 1});
oldFx.start({opacity: 0});
},
fadebg: function(oldFx, newFx, oldPos, newPos){
oldFx.options.transition = newFx.options.transition = Fx.Transitions.linear;
oldFx.options.duration = newFx.options.duration = this.options.fadeDuration / 2;
oldFx.start({opacity: 0}).chain(newFx.start.pass([{opacity: 1}], newFx));
}
});

/* All code copyright 2007 Jonathan Schemoul */

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Follows: Preloader (class)
* Simple class for preloading images with support for progress reporting
* Copyright 2007 Tomocchino.
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

var Preloader = new Class({

Implements: [Events, Options],

options: {
root : '',
period : 100
},

initialize: function(options){
this.setOptions(options);
},

load: function(sources) {
this.index = 0;
this.images = [];
this.sources = this.temps = sources;
this.total = this. sources.length;

this.fireEvent('onStart', [this.index, this.total]);
this.timer = this.progress.periodical(this.options.period, this);

this.sources.each(function(source, index){
this.images[index] = new Asset.image(this.options.root + source, {
'onload' : function(){ this.index++; if(this.images[index]) this.fireEvent('onLoad', [this.images[index], index, source]); }.bind(this),
'onerror' : function(){ this.index++; this.fireEvent('onError', [this.images.splice(index, 1), index, source]); }.bind(this),
'onabort' : function(){ this.index++; this.fireEvent('onError', [this.images.splice(index, 1), index, source]); }.bind(this)
});
}, this);
},

progress: function() {
this.fireEvent('onProgress', [Math.min(this.index, this.total), this.total]);
if(this.index >= this.total) this.complete();
},

complete: function(){
$clear(this.timer);
this.fireEvent('onComplete', [this.images]);
},

cancel: function(){
$clear(this.timer);
}

});

Preloader.implement(new Events, new Options);

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Follows: formatString (function)
* Original name: Yahoo.Tools.printf
* Copyright Yahoo.
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

function formatString() {
var num = arguments.length;
var oStr = arguments[0];
for (var i = 1; i < num; i++) {
var pattern = "\\{" + (i-1) + "\\}";
var re = new RegExp(pattern, "g");
oStr = oStr.replace(re, arguments[i]);
}
return oStr;
}

//]]>
</script>

<b:if cond='data:blog.pageType == "item"'>
<style>#featabout, .extra {display:none; margin:0;padding:0;border:0;}</style>
</b:if>
<script type='text/javascript'> var thumbnail_mode = "no-float" ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 180; </script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

<style type='text/css'>
div#featabout { width: 635px; border-bottom: 1px solid; }
div#featabout-wrapper { margin: 0 auto; padding: 22px 0; width: 635px; height: 235px; }

div#featabout div.featured { float: left; width: 640px; }
div#featabout div.featured div.top { height: 15px; }
div#featabout div.featured div.mid { padding: 0 15px; }
div#featabout div.featured div.mid div#featured { border: 1px solid; }
div#featabout div.featured div.bot { height: 15px; }

div#featabout div.about { float: right; width: 328px; }
div#featabout div.about div.top { height: 15px; }
div#featabout div.about div.mid { padding: 0 15px; height: 224px; }
div#featabout div.about div.bot { height: 15px; }

div#featabout div.ab-box h2 { display: block; margin: 0; padding: 0 0 8px 0; font-size: 12px;
font-family: Georgia, 'Times New Roman', serif;
text-transform: uppercase;
}
div#featabout div.ab-box div.interior { padding: 8px 0; }
div#featabout div.ab-box div.interior p { display: block; margin: 0; padding: 0; }
div#featabout div.ab-box-author div.interior { padding: 8px 0 16px 0; min-height: 60px; }
div#featabout div.ab-box-author div.interior img { padding: 3px; border: 1px solid; float: left; margin: 0 5px 0 0; }
div#featabout div.ab-box-burner div.interior { padding: 8px 0 8px 65px; }
div#featabout div.ab-box-burner div.interior p { display: block; margin: 0; padding: 0; line-height: 28px; }
div#featabout div.ab-box-burner div.interior span { display: block; height: 21px; margin: 0 0 0 0; padding: 6px 0 0 0; }
div#featabout div.ab-box-burner div.interior span input { width: 191px; padding: 0 5px; border: 0; }
div#featabout {
background: #ffffff url('') repeat-x scroll left top;
border-bottom: none;
}
div#featabout div.featured { background: transparent url('') repeat-y scroll left top; }
div#featabout div.featured div.top { background: transparent url('') no-repeat scroll left top; }
div#featabout div.featured div.mid div#featured { border-color: #000; }
div#featabout div.featured div.bot { background: transparent url('') no-repeat scroll left bottom; }
div#featured h2 {
font-family: Georgia, 'Times New Roman', sans-serif; font-size: 24px;
line-height: 30px; font-weight: normal;
}
div#featured p {
font-family: Arial, Helvetica, sans-serif; font-size: 13px;
}

div#featabout div.about { color: #999; background: transparent url('') repeat-y scroll left top; }
div#featabout div.about div.top { background: transparent url('') no-repeat scroll left top; }
div#featabout div.about div.bot { background: transparent url('') no-repeat scroll left bottom; }

div#featabout div.ab-box h2 { color: #e1e1c7; background: transparent url('') repeat-x scroll left bottom; }
div#featabout div.ab-box-burner div.interior { color: #999; background: transparent url('') no-repeat scroll 0px 8px; }
div#featabout div.ab-box-burner div.interior span { background: transparent url('') left top no-repeat; }
div#featabout div.ab-box-burner div.interior span input { background: transparent none; color: #666; }

#flickrGallery
{
width: 500px;
height: 334px;
}
#myGallery img.thumbnail, #myGallerySet img.thumbnail
{
display: none;
}
.jdGallery
{
overflow: hidden;
position: relative;
}
.jdGallery img
{
border: 0;
margin: 0;
}
.jdGallery .slideElement
{
width: 100%;
height: 100%;
background-color: #000;
background-repeat: no-repeat;
background-position: center center;
background-image: url('');
}
.jdGallery .loadingElement
{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background-color: #000;
background-repeat: no-repeat;
background-position: center center;
background-image: url('');
}
* html .jdGallery .slideInfoZone
{
bottom: -1px;
}
.jdGallery .slideInfoZone h2
{
padding: 0;
font-size: 14px;
margin: 0;
margin: 2px 5px;
font-weight: bold;
color: #FFFFFF;
bacground: transparent;
}
.jdGallery .slideInfoZone ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
color: #FFFFFF;
}
.jdGallery .slideInfoZone li {
list-style:none;
margin:0 0 0;
padding:0 0 0;
color: #FFFFFF;
}
.jdGallery .slideInfoZone p
{
padding: 0;
font-size: 11px;
margin: 2px 5px;
color: #FFFFFF;
}
.jdGallery div.carouselContainer
{
position: absolute;
height: 135px;
width: 100%;
z-index: 10;
margin: 0px;
left: 0;
top: 0;
}
.jdGallery a.carouselBtn
{
position: absolute;
bottom: 0;
right: 30px;
height: 20px;
/*width: 100px; background: url('') no-repeat;*/
text-align: center;
padding: 0 10px;
font-size: 13px;
background: #000;
color: #fff;
cursor: pointer;
}
.jdGallery .carousel
{
position: absolute;
width: 100%;
margin: 0px;
left: 0;
top: 0;
height: 115px;
background: #000;
color: #fff;
text-indent: 0;
overflow: hidden;
}
.jdExtCarousel
{
overflow: hidden;
position: relative;
}
.jdGallery .carousel .carouselWrapper, .jdExtCarousel .carouselWrapper
{
position: absolute;
width: 100%;
height: 78px;
top: 10px;
left: 0;
overflow: hidden;
}
.jdGallery .carousel .carouselInner, .jdExtCarousel .carouselInner
{
position: relative;
}
.jdGallery .carousel .carouselInner .thumbnail, .jdExtCarousel .carouselInner .thumbnail
{
cursor: pointer;
background: #000;
background-position: center center;
float: left;
border: solid 1px #fff;
}
.jdGallery .wall .thumbnail, .jdExtCarousel .wall .thumbnail
{
margin-bottom: 10px;
}
.jdGallery .carousel .label, .jdExtCarousel .label
{
font-size: 13px;
position: absolute;
bottom: 5px;
left: 10px;
padding: 0;
margin: 0;
}
.jdGallery .carousel .wallButton, .jdExtCarousel .wallButton
{
font-size: 10px;
position: absolute;
bottom: 5px;
right: 10px;
padding: 1px 2px;
margin: 0;
background: #222;
border: 1px solid #888;
cursor: pointer;
}
.jdGallery .carousel .label .number, .jdExtCarousel .label .number
{
color: #b5b5b5;
}
.jdGallery a, .jdGallery a:hover
{
font-size: 100%;
text-decoration: none;
color: #fff;
}
.jdGallery a.right, .jdGallery a.left
{
position: absolute;
height: 99%;
width: 25%;
cursor: pointer;
z-index:10;
filter:alpha(opacity=20);
-moz-opacity:0.2;
-khtml-opacity: 0.2;
opacity: 0.2;
}
* html .jdGallery a.right, * html .jdGallery a.left
{
filter:alpha(opacity=50);
}
.jdGallery a.right:hover, .jdGallery a.left:hover
{
filter:alpha(opacity=80);
-moz-opacity:0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
}
.jdGallery a.left
{
left: 0;
top: 0;
background: url('img/fleche1.png') no-repeat center left;
}
* html .jdGallery a.left { background: url('img/fleche1.gif') no-repeat center left; }
.jdGallery a.right
{
right: 0;
top: 0;
background: url('') no-repeat center right;
}
* html .jdGallery a.right { background: url('') no-repeat center right; }
.jdGallery a.open
{
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.withArrows a.open
{
position: absolute;
top: 0;
left: 25%;
height: 99%;
width: 50%;
cursor: pointer;
z-index: 10;
background: none;
-moz-opacity:0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
}
.withArrows a.open:hover { background: url('') no-repeat center center; }
* html .withArrows a.open:hover { background: url('') no-repeat center center;
filter:alpha(opacity=80); }
/* Gallery Sets */
.jdGallery a.gallerySelectorBtn
{
z-index: 15;
position: absolute;
top: 0;
left: 30px;
height: 20px;
/*width: 100px; background: url('') no-repeat;*/
text-align: center;
padding: 0 10px;
font-size: 13px;
background: #000;
color: #fff;
cursor: pointer;
opacity: .4;
-moz-opacity: .4;
-khtml-opacity: 0.4;
filter:alpha(opacity=40);
}
.jdGallery .gallerySelector
{
z-index: 20;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: #000;
}
.jdGallery .gallerySelector h2
{
margin: 0;
padding: 10px 20px 10px 20px;
font-size: 20px;
line-height: 30px;
color: #fff;
}
.jdGallery .gallerySelector .gallerySelectorWrapper
{
overflow: hidden;
}
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton
{
margin-left: 10px;
margin-top: 10px;
border: 1px solid #888;
padding: 5px;
height: 40px;
color: #fff;
cursor: pointer;
float: left;
}
.jdGallery .gallerySelector .gallerySelectorInner div.hover
{
background: #000;
}
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton div.preview
{
background: #000;
background-position: center center;
float: left;
border: none;
width: 40px;
height: 40px;
margin-right: 5px;
}
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton h3
{
margin: 0;
padding: 0;
font-size: 12px;
font-weight: normal;
}
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton p.info
{
margin: 0;
padding: 0;
font-size: 12px;
font-weight: normal;
color: #aaa;
}
.extra div.box { width: 310px; padding: 0px; margin:0;}
.extra div.box-popular { float: left; }
.extra div.box-recent { float: right; }

</style>

Now again scroll down to where you see below code:

And immediately before it, paste this code:

<div id='featabout'>
<div id='featabout-wrapper'>
<div class='featured'>
<div class='top'/>
<div class='mid'>
<div id='featured'>

<style>
#myGallery, #myGallerySet, #flickrGallery {
width: 606px;
height: 220px;
z-index:5;
border: 1px solid #000;
overflow:hidden;
}

.jdGallery .slideInfoZone
{
position: absolute;
z-index: 10;
width: 100%;
margin: 0px;
left: 0;
bottom: 0;
height: 80px;
background: #000;
color: #fff;
text-indent: 0;
overflow: hidden;
}
</style>

<script type='text/javascript'>
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: true
});
}
window.addEvent('domready',startGallery);
</script>

<div id='myGallery'>

<script type='text/javascript'>
//<![CDATA[
function rp(json) {

for (var i = startposts; i < numposts; i++) {

var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;

if (i == json.feed.entry.length) break;

for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}

posttitle = posttitle.link(posturl);
var readmorelink = "(Read More)";
readmorelink = readmorelink.link(posturl);
var postdate = entry.published.$t;
var cdyear = postdate.substring(0,4);
var cdmonth = postdate.substring(5,7);
var cdday = postdate.substring(8,10);
var monthnames = new Array();
monthnames[1] = "Jan";
monthnames[2] = "Feb";
monthnames[3] = "Mar";
monthnames[4] = "Apr";
monthnames[5] = "May";
monthnames[6] = "Jun";
monthnames[7] = "Jul";
monthnames[8] = "Aug";
monthnames[9] = "Sep";
monthnames[10] = "Oct";
monthnames[11] = "Nov";
monthnames[12] = "Dec";

if ("content" in entry) {
var postcontent = entry.content.$t;
} else if ("summary" in entry) {
var postcontent = entry.summary.$t;
} else
var postcontent = "";
var re = /<\S[^>]*>/g;
postcontent = postcontent.replace(re, "");
if (showposttitle == true) document.write(posttitle);

if (showpostdate == true) document.write(' - ' + monthnames[parseInt(cdmonth,10)] + ' ' + cdday);

if (showpostsummary == true) {
if (postcontent.length < numchars) {
document.write(postcontent);
} else {
postcontent = postcontent.substring(0, numchars);
var quoteEnd = postcontent.lastIndexOf(" ");
postcontent = postcontent.substring(0,quoteEnd);

document.write(postcontent);

document.write('...' + readmorelink);
}
}

}

}
//]]>
</script>

<div class='imageElement'>
<h2><script>var startposts = 0; numposts = 1; var showposttitle = true; showpostdate = false; var showpostsummary = false; var numchars = 0; </script><script src="http://bdlab.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp">
</script></h2>
<p><script>var startposts = 0; numposts = 1; var showposttitle = false; showpostdate = false; var showpostsummary = true; var numchars = 150; </script><script src="http://bdlab.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp">
</script></p>

<a class='open' href='#' title='Read More'/>
<img class='full' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie9mofPpK7CmotPX6Stzv9bUmfAyhuoHYrkcgG_KxtaIdpdluYBoiQH4O6IAyoNKR8-O4Ogndjd7_VP7c7FyXWnRhPU1n8OgnVurxDQ4MBIDgB6tsmXCF5X4tiCGb_C6Yys84yVdi6V_Pz/+slider1.jpg'/>
<img class='thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie9mofPpK7CmotPX6Stzv9bUmfAyhuoHYrkcgG_KxtaIdpdluYBoiQH4O6IAyoNKR8-O4Ogndjd7_VP7c7FyXWnRhPU1n8OgnVurxDQ4MBIDgB6tsmXCF5X4tiCGb_C6Yys84yVdi6V_Pz/+slider1.jpg'/>
</div>

<div class='imageElement'>
<h2><script>var startposts = 1; numposts = 2; var showposttitle = true; showpostdate = false; var showpostsummary = false; var numchars = 0; </script><script src="http://bdlab.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp">
</script></h2>
<p><script>var startposts = 1; numposts = 2; var showposttitle = false; showpostdate = false; var showpostsummary = true; var numchars = 150; </script><script src="http://bdlab.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp">
</script></p>

<a class='open' href='#' title='Read More'/>
<img class='full' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikIG9Tvr9y22JEhA0MQhb1v8JbJkJ60q_Lw-dsbsF-yat7aGMBQNKj8hKsDXjUFBJgTr9fytC0V1JwwFbPq_Vb661quHGh5489LBvSDlkHyJ0PSir_oXqPGtAh9S634jvsJHdYCYBVNdrZ/+slider2.jpg'/>
<img class='thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikIG9Tvr9y22JEhA0MQhb1v8JbJkJ60q_Lw-dsbsF-yat7aGMBQNKj8hKsDXjUFBJgTr9fytC0V1JwwFbPq_Vb661quHGh5489LBvSDlkHyJ0PSir_oXqPGtAh9S634jvsJHdYCYBVNdrZ/+slider2.jpg'/>
</div>

<div class='imageElement'>
<h2><script>var startposts = 2; numposts = 3; var showposttitle = true; showpostdate = false; var showpostsummary = false; var numchars = 0; </script><script src="http://bdlab.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp">
</script></h2>
<p><script>var startposts = 2; numposts = 3; var showposttitle = false; showpostdate = false; var showpostsummary = true; var numchars = 150; </script><script src="http://bdlab.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp">
</script></p>

<a class='open' href='#' title='Read More'/>
<img class='full' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEjCP_sflxqp596Dsonj2m07rpQuhKVAOjaNfwxRfNi1aNxDlzmt3EJ208kZGLxYMSdoJee8jdx0sfuAs53xuv7ZyarGTBXkjZ_dXl3kLUG0X4d3zWuwL_KlUe0Ks7r89r1XAMlKOgcYju/+slider3.jpg'/>
<img class='thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEjCP_sflxqp596Dsonj2m07rpQuhKVAOjaNfwxRfNi1aNxDlzmt3EJ208kZGLxYMSdoJee8jdx0sfuAs53xuv7ZyarGTBXkjZ_dXl3kLUG0X4d3zWuwL_KlUe0Ks7r89r1XAMlKOgcYju/+slider3.jpg'/>
</div>

<div class='imageElement'>
<h2><script>var startposts = 3; numposts = 4; var showposttitle = true; showpostdate = false; var showpostsummary = false; var numchars = 0; </script><script src="http://bdlab.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp">
</script></h2>
<p><script>var startposts = 3; numposts = 4; var showposttitle = false; showpostdate = false; var showpostsummary = true; var numchars = 150; </script><script src="http://bdlab.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp">
</script></p>

<a class='open' href='#' title='Read More'/>
<img class='full' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguSWU6fXx0tDscqFqOW0ES-MADS9LiJWP-q4zSSMtkIpSANLZ61Z4OjlcO_kVkFROiWU9r96x82IPwdRvpUOjUgRr3VWuRTs9a8owdmpyR-_8g2_OdlHoFbtkh3bTg-065TmYc6d1IxLR1/+slider4.jpg'/>
<img class='thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguSWU6fXx0tDscqFqOW0ES-MADS9LiJWP-q4zSSMtkIpSANLZ61Z4OjlcO_kVkFROiWU9r96x82IPwdRvpUOjUgRr3VWuRTs9a8owdmpyR-_8g2_OdlHoFbtkh3bTg-065TmYc6d1IxLR1/+slider4.jpg'/>
</div>

<div class='imageElement'>
<h2><script>var startposts = 4; numposts = 5; var showposttitle = true; showpostdate = false; var showpostsummary = false; var numchars = 0; </script><script src="http://bdlab.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp">
</script></h2>
<p><script>var startposts = 4; numposts = 5; var showposttitle = false; showpostdate = false; var showpostsummary = true; var numchars = 150; </script><script src="http://bdlab.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp">
</script></p>

<a class='open' href='#' title='Read More'/>
<img class='full' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv-7g3olLV9I_b9F9z8Bz_u8V1057iB9xCeDX708lFdj2WYUaLtYM4nwUOdsxdMGH7Y8GskcW_vSb_UyANInDbTs88pvLVD2zl4od7byJeTr1fklg0EnagQAyhBbgRUFaeYNs4P-pb9ihI/+slider5.jpg'/>
<img class='thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv-7g3olLV9I_b9F9z8Bz_u8V1057iB9xCeDX708lFdj2WYUaLtYM4nwUOdsxdMGH7Y8GskcW_vSb_UyANInDbTs88pvLVD2zl4od7byJeTr1fklg0EnagQAyhBbgRUFaeYNs4P-pb9ihI/+slider5.jpg'/>
</div>

</div>
</div>
</div>
<div class='bot'/>
</div></div></div>

Replace "http://bdlab.blogspot.com" with your blog address.
Replace images addresses with your images addresses.

Note: You can place above code as your choice.For explanation I place it just before

Now Click Save Template

................................................................................................
................................................................................................
................................................................................................

How To Add jQuery Featured Content Slideshow to Blogger

1.Login to your blogger dashboard----> layout- ---> Edit HTML

2.Scroll down to where you see </head> tag .

3.Copy below code and paste it just before the </head> tag.

4.Now go to Layout-->Page Element and click on "Add a gadget".

5.Select "html/java script" and add the code given below and click save.

1.Login to your blogger dashboard----> layout- ---> Edit HTML

2.Scroll down to where you see </head> tag .

3.Copy below code and paste it just before the </head> tag.

Note: Please host above images yourself.

Now click Save Template

4.Now go to Layout-->Page Element and click on "Add a gadget".

5.Select "html/java script" and add the code given below and click save.

<div id="glidercontent" class="glidecontentwrapper">
<div id="togglebox" class="glidecontenttoggler">
<a class="prev" href="#"></a>
<a class="next" href="#"></a>
</div>

<div class="glidecontent">
<div class="glidemeta">
<h2><a href="POST-LINK-HERE" title="LINK-TITLE-HERE">POST-TITLE-HERE</a></h2>
POST-DESCRIPTION-HERE</div>
<a href="POST-LINK-HERE" title="LINK-TITLE-HERE">
<img alt="IMAGE-TITLE-HERE" width="650" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyBt4HppOe6co6WpBhtmmAujmlkG03sTaB5J7xuRqOCUeNw7z3xF370WH5OYl_F_w0FY8NRBpjmV8A2bzPo_OidC58IEs1pG6GrHAnrcTCIJ_iSvICwpPD-2AP5Niv7E45bDIK14vMqnOo/+fighter.jpg" height="250"/></a>
</div>

<div class="glidecontent">
<div class="glidemeta">
<h2><a href="POST-LINK-HERE" title="LINK-TITLE-HERE">POST-TITLE-HERE</a></h2>
POST-DESCRIPTION-HERE</div>
<a href="POST-LINK-HERE" title="LINK-TITLE-HERE">
<img alt="IMAGE-TITLE-HERE" width="650" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2dXCoYXI1PBBi44CZD1vzc_UI2zSoOvoz0xjLud9b7lHYMZd9_x6jWRjSeydLvT4Akgw-3sekn7fJJJkBO1OjQL-z-MY4_ymgwrIkotGGfiTJZzfrLc9zU2l62gS4T0TRz2Q1yXT_4kd4/" height="250"/></a>
</div>

<div class="glidecontent">
<div class="glidemeta">
<h2><a href="POST-LINK-HERE" title="LINK-TITLE-HERE">POST-TITLE-HERE</a></h2>
POST-DESCRIPTION-HERE</div>
<a href="POST-LINK-HERE" title="LINK-TITLE-HERE">
<img alt="IMAGE-TITLE-HERE" width="650" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieT-KpbJ9pfAIR_pZlkogRo2UEPl2le97evR6kw6PUYqqK_IStsI_kYCaazAtuLAvjfKG6TVU3JBhy_jMLKSlGfMYWbih93UdHfadJdRQ0p6T8D85pqzhA6CZ7dkpR7oCVGhD2A8m-KXVk/+day.jpg" height="250"/></a>
</div>

<div class="glidecontent">
<div class="glidemeta">
<h2><a href="POST-LINK-HERE" title="LINK-TITLE-HERE">POST-TITLE-HERE</a></h2>
POST-DESCRIPTION-HERE</div>
<a href="POST-LINK-HERE" title="LINK-TITLE-HERE">
<img alt="IMAGE-TITLE-HERE" width="650" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDvwqrGxa6SWDaCYFpVwvm1knqpCWqQk5HCo_c_v1nHyjL0rYnsk4hx0YRPvwMGJDX5lw8FF01C2vH8wMLzqsqu2AAGtbvZ0nWV9Wfk-yHP4-FRs_oXtVw1fVTCGfYtNhvhXjRMqczv_4m/" height="250"/></a>
</div>

<div class="glidecontent">
<div class="glidemeta">
<h2><a href="POST-LINK-HERE" title="LINK-TITLE-HERE">POST-TITLE-HERE</a></h2>
POST-DESCRIPTION-HERE</div>
<a href="POST-LINK-HERE" title="LINK-TITLE-HERE"><img alt="IMAGE-TITLE-HERE" width="650" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOk8E2_X-cqdyhLp9F7IFQFMFGMFtT9z3IuGomGLyyeqW_vilSk7ICRuzLmrdmUk3E7HbjAyJAfddf86j875uvxsn99EZze9LiX0jeT6LK866QDfy3ScIRuVRtrIGOHZpyGY67THSyVe16/+2.jpeg" height="250"/></a>
</div>

<div class="glidecontent">
<div class="glidemeta">
<h2><a href="POST-LINK-HERE" title="LINK-TITLE-HERE">POST-TITLE-HERE</a></h2>
POST-DESCRIPTION-HERE</div>
<a href="POST-LINK-HERE" title="LINK-TITLE-HERE"><img alt="IMAGE-TITLE-HERE" width="650" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiK4GQ931A0uTNhPeTYg0c0-cLnVfdGqmxSRFtX4cq4vCC_wYoD6pQI3lfD2_X1bttUf0KzhMDtQIBuS4DXYNeWxCWj0Wq_aTVN36ZhvfSnXV1dCCKQidp6MKrfmTtc4k599CkCN-7hvxP/" height="250"/></a>
</div>

</div>

Now click Save

Note : Replace POST-LINK-HERE,LINK-TITLE-HERE,POST-TITLE-HERE,POST-DESCRIPTION-HERE,IMAGE-TITLE-HERE and Image Addresses with your details.

Many thanks to Lasantha Bandara for making this code and I just tested and modified to work on blogger

Free Backlinks for Blog and Website

Do you want to know Where to get free backlinks? This is a free, fast, and simple immediate automatic backlinks for optimizing your blog or web page on search engines result.Everyone knows how important backlinks are to getting a good rank.Here, we offer a backlink for free and very fast for your sites. Copy the html code first (no change needed), and then paste to your website or blog.To view your backlink you can click the image link from your website or blog. And well... your website url done and will be displaying in first references.If any visitors click this banner from your website or blog, your url backlink will be creating automatically in this website.You can build backlink as many as you want, no limitation and restriction, but no spam ! Wish your website's ranking quickly on Top Google, Yahoo and Alexa!

Free Automatic Backlink for Blog and Website

If our Tutorials have helped you a little, then kindly spread our voice using the badge below:- Copy this html code to your website >>

Optionally use this Widget installer to add this link to your blogger blog.

* Please note:- After you paste the code into the website, please click on the button to create backlinks to your website. - If you remove the code from your website where your backlink will be deleted automatically. - if you know any free backlink info, please submit here, Let's share the free backlink list to everyone.

submit here

40 Responses So Far:

Metrolisa said...: It's really nice tutorial to make our blog looking pro; November 16, 2011 at 11:52 AM
Rabia Sultan said...: Hello! This is a great work!
Can we amend any of the above codes in such a way that when I add tag "featured" to any of my post, slider pick its data including image, post title and one line description automatically and displays it???; December 4, 2011 at 6:47 AM
louboutin uk said...: Same is the case with trendy looking louboutin shoes. When these are christian louboutin uk, the excitement just gets doubled.; December 9, 2011 at 1:09 AM
Amit Ganguly said...: awesome man !! Loved all the codes that you have put here !! simply awesome !!; December 12, 2011 at 8:01 AM
Amit Ganguly said...: Hey, I wanted to know how to have multiple instances of a slider in a single page.I want to use it for my blog site.
Please help me out.; December 13, 2011 at 2:23 AM
Unknown said...: i have applied second code to my blog, everything works fine but images dont show up in the slide . here is my blog : http://funmusicmovies.blogspot.com/; December 16, 2011 at 8:10 AM
Anonymous said...: Awesome man love it
http://www.drupalnetworks.com/; December 16, 2011 at 9:26 PM
Orang Ganteng said...: Ok thanks for the info ..
I immediately tried it on my blog; December 18, 2011 at 9:29 PM
surya said...: hey !!Free cursors.. FOR your BLOG|WEBsite|Windows

check the below website for details
www.Wincursor.blogspot.com; December 23, 2011 at 12:35 AM
naleen said...: nice

Online watch videos
Sinhala Songs,Hindi Songs,Video Songs,Rock,Hip-Hop, Pop, Rap,RNB,Classic, Remix,
New songs,Sinhala movie songs, Hindi movie songs, Funny Videos ,Live Shows ,; December 25, 2011 at 1:37 AM
simjen said...: It was a very informative writing. Please update us with the further tips.; January 19, 2012 at 2:05 AM
Ricardo Tomás Dias said...: Hi,

Thanks for this very useful information. I have 1 question though. How come that in the "Smooth Jquery Featured Post Slideshow For Blogger" slider the fourth picture (Call of Duty) does not appear?

I hope to hear from you soon!; January 22, 2012 at 9:41 AM
beneesbeautybar said...: Great work....awesome sliders..; February 8, 2012 at 11:56 AM
Anonymous said...: can we only put images included in our posts in the featured slider? i tried putting an image and its just showing up as a blank square box...truly appreciate an answer on this; March 20, 2012 at 11:12 PM
Anonymous said...: Great! That's what I'm looking for the content slider in my blog! Thanks!; March 24, 2012 at 4:39 PM
html5 player said...: Thanks for sharing your info. I really appreciate your efforts and I will be waiting for your further write ups thanks once again.
html5 video player; April 2, 2012 at 10:17 PM
Unknown said...: very nice post. but how will it animate this? its not moving.. heres the your topic i'm trying to relate

"Featured Content Slider for Blogger Using jQuery "

at the very top post.kindly check because i'm very interested with this.. Thanks.

cheers my site:
xxxmehide.blogspot.com; May 7, 2012 at 4:39 PM
Ghita Cherradi said...: LIIIKKEE ITTT; May 31, 2012 at 1:18 PM
Iveyline said...: Can someone help..I used one of these sliders for my blogspot blog. www.iveyline.com and it works I just want to position the slider to the left side from where it appears now. Please help.; July 6, 2012 at 7:42 AM
Anonymous said...: Good post. I learn something totally new and challenging on websites I stumbleupon everyday.
It's always interesting to read through articles from other authors and use a little something from their web sites.
Visit my blog ... Best Brand name Laptop; July 18, 2012 at 11:21 AM
AR said...: Full screen background slideshow on blogger how make in this side http://britishopenlivestream.blogspot.com/ please tell this solution; July 29, 2012 at 2:25 PM
mmolive4us said...: We all know that we need some entertainments to help us relax ourselves,if you are interested in playing World Of Warcraft,and want to know more things about http://www.mmolive.com/ and http://www.mmohome.com/gold/Maple-Story-US.html,you can come to our home to enjoy more happy.; August 23, 2012 at 10:01 PM
Unknown said...: Coffee making machine
Glad to be here and see this. Wish we can share more with you in the future.; September 3, 2012 at 2:57 AM
amisy said...: Hydraulic Oil Press
http://www.oil-press-machine.com/product/oil_press/hydraulic_oil_press.html
:) Thanks for share.; September 20, 2012 at 6:46 PM
Web Design said...: Amazing Blog on Featured Content Slider.....

Thanks for Sharing !!; October 16, 2012 at 11:03 PM
WP Expert said...: Thanks for Sharing !!; November 1, 2012 at 11:59 PM
Devil said...: Here I Applied Check This Out
http://pakistangoogle.blogspot.com; November 6, 2012 at 2:16 PM
River Tees said...: Fantastic post, this will help with our regionalRedcar Blog; January 3, 2013 at 8:38 AM
Hanny Games said...: very simple code i like it thanks for sharing good post.
Download Games; January 23, 2013 at 4:37 PM
Craxy Mahendra said...: cool share out there.......really really liked it...awesome; April 14, 2013 at 5:03 AM
Unknown said...: Really good.I will concern about it.

___________________________________________________
Diablo 3 Gold;Aion Kinah;Diablo 3 Gold Kaufen;GW2 Gold; April 15, 2013 at 12:46 AM
Adhitya said...: this is making my blog looks pro. Nice share, Mate. Thanks.; July 7, 2013 at 8:23 PM
Md Mahbubu Hasan said...: Great post.Nice post and nice blog.It may be helps my Mediabyrå Nyköping.; August 4, 2013 at 12:26 AM
Taurian said...: This is one of the easiest tutorial for making a content slider. So easy to use and comes up with lots of features:

http://youcanshout.blogspot.com/2013/08/bxslider-easy-to-use-jquery-plugin-for.html; August 27, 2013 at 4:59 AM
inka solihat said...: thanks for info; September 12, 2013 at 8:50 PM
indra mahmud said...: thanks tutorialnya sob; September 12, 2013 at 8:59 PM
davies said...: check it out on my site
http://bimdroid.blogspot.com

nice tutorials anyway; October 20, 2013 at 3:17 PM
Amais Bajwa said...: thanks bro! I also create CSS3 animated social widgets.; April 24, 2014 at 6:48 AM
ilmudes said...: thank you.
www.justdoitfriend.com; July 13, 2014 at 9:28 PM
Unknown said...: Wow it's really awesome www.htmluse.com jquery plugins and tutorial or www.jsplugins.net js plugins.... Thanks for sharing; August 24, 2014 at 4:12 AM