Wednesday, December 26, 2012

Setup Image Slider of Haralampi Lux Blogger Template Slider

 

 Hi All Of CoolBthemes User's, Those Days We Are Converting New Free Free Premium Wp Themes To Blogger Platform, Recently We Converted Haralampi Lux Blogger Template. Im See More Blogger User's Dont Know How To Customize This Theme, So I decided Help All Of My Fan's

Follow This Step's To Fix Your Slider

First Search This Code
  • <div id='slider-wrap'>
    
After You Can See This Code Under The <div id='slider-wrap'> Code
  • <div class='flexslider'>
    <ul class='slides'>
    <li>
    <a href='http://www.coolbthemes.com/' title='Introducing San Francisco'><img src='http://2.bp.blogspot.com/-7BGEQ26qwkw/UNXN7Z3KCoI/AAAAAAAABn4/yvKu998Jm5c/s1600/114.jpg'/></a>
    <div class='flex-caption'>
    <h3 class='flex-title'><a href='http://www.coolbthemes.com/' title='Introducing San Francisco'>Introducing San Francisco</a></h3>
          Let other cities build grand monuments. San Francisco days are better spent sunning by the bay and digesting lavish seafood dinners &#8211; no matter whether you&#8217;re a human or a sea lion that&#8217;s...     </div>
    </li>
    <li>
    <a href='http://www.coolbthemes.com/' title='History of the Tower of London'><img src='http://3.bp.blogspot.com/-VXqdzFqTTV0/UNXN5HeLZhI/AAAAAAAABns/z5kn1zhHirc/s1600/26.jpg'/></a>
    <div class='flex-caption'>
    <h3 class='flex-title'><a href='http://www.coolbthemes.com/' title='History of the Tower of London'>History of the Tower of London</a></h3>
          The History of the Tower of London dates back over one thousand years. Its bloody history is steeped in mystery and intrigue. The comprehensive Tower of London Timeline provides details of both the...     </div>
    </li>
    <li>
    <a href='http://www.coolbthemes.com/' title='Grand Central Station Visitors Tour'><img src='http://2.bp.blogspot.com/-B6gvRKp0hGw/UNXN6QHq8wI/AAAAAAAABnw/Bp-Rp95XnQg/s1600/37.jpg'/></a>
    <div class='flex-caption'>
    <h3 class='flex-title'><a href='http://www.coolbthemes.com/' title='Grand Central Station Visitors Tour'>Grand Central Station Visitors Tour</a></h3>
          Grand Central Terminal (often inaccurately referred to as Grand Central Station) is a beautiful Beaux-arts building in midtown Manhattan. First opened in 1913, Grand Central Terminal underwent a...     </div>
    </li>
    </ul><!--.slides-->
    <ul class='custom-controls'>
    <li class='wide-3'><a href='#'></a></li><li class='wide-3'><a href='#'></a></li><li class='wide-3'><a href='#'></a></li>
    </ul><!--.custom-controls-->
    </div><!--.flexslider-->
    
Now You Can Replace Red color Url With Your Title Address, (If Anyone Click This Slider You Can Add Destination Address Here

Green Color Address Is a  Image Url., Image Url Post Here,

Yellow Color Is a Slider Headline, Replace Green Text With Your Own Text,

Blue Color Is a Title Tag, Its Part Of Off site Seo. Add Similar Tag To Hedline

All Is Don
Read More

Tuesday, December 18, 2012

Social Welcome Popup Box With Social Share Using Jquery For Blogger

Social Welcome Popup Box With Social Share Using Jquery For Blogger

Hi All Of CBT Fans, After Long Time I Will Post Small Article for Your Blogger Blog's. This Hack For Popup Box, This Popup bov design using jquery and css, if any visitor on your site, he or she should like or tweet your fan page, its simple and quality hack, Follow This Steps To Don It

Check This Demo
Demo Blog

1. Go to Layout >> Add a Gadget >> Add a HTML/JavaScript Gadget.

After Add This Code To There


  • <style>
    #stp-bg{
     display:none;
     position:fixed;
     _position:absolute; /* hack for IE 6*/
     height:100%;
     width:100%;
     top:0;
     left:0;
     background:#000000; 
     z-index:998;
    }
    
    #stp-main{
     position:fixed;
     top:220px;
     _position:absolute; /* hack for IE 6*/
     display:none;
     width:450px;
     border:7px solid #2f2f2f;
     background:#fff;
     z-index:999;
            border-radius: 9px;
     -moz-border-radius: 9px;
     -webkit-border-radius: 9px;
     margin:0pt;
     padding:0pt;
     color:#333333;
     text-align:left;
     font-family:arial,sans-serif !important;
     font-size:13px;
    }
    
    #stp-title{
     font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif !important;
     font-size:18px;
     padding:13px 0 13px 15px;
    }
    
    #stp-close{
     float:right;
     font-size:14px;
     font-weight:bold;
     font-family:Verdana, Geneva, sans-serif;
     color:#777777 !important;
     margin:0 13px 0 0;
     border-bottom:0px !important;
     text-decoration:none !important;
    }
    
    #stp-close:hover{
     text-decoration:none !important;
    }
    
    #stp-msg{
     background:#4074CF;
     padding:10px 15px;
     color:#ffffff;
     font-family:Arial, Helvetica, sans-serif !important;
     font-weight:bold;
     line-height:20px;
    }
    
    #stp-buttons{
     margin:25px 0px 25px 120px;
     padding:0 0 0 15px;
    }
    
    #stp-bottom{
     padding:15px 10px;
     background:#EFEFEF;
     color:#95989F;
     border-top:1px solid #DDE0E8;
    }
    
    #stp-counter{
     font-size:11px !important;
     text-align:right;
     font-weight:bold;
    }
    
    .stp-button{
     float:left;
     width:120px;
    }
    
    .step-clear{
     clear:both !important;
    }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
    <script src="http://platform.twitter.com/widgets.js" type="text/javascript">
    </script>
    <script type="text/javascript" src="http://swflor.googlecode.com/files/jquery.stp.min.js">
    </script>        
    <script>       $(document).ready(function(){                                                           $().socialTrafficPop({                      timeout: 30,                    title: "Wellcome To Coolbthemes Demo Blog ",                  
    message: 'Please Like And  <em>Help Us To Grow</em>! ',                     google_url: "", google_size: "tall",                     fb_url: "https://www.facebook.com/fbpages0001",   fb_layout: "box_count",                     closeable: true,                      advancedClose: false,                      opacity: '0.45', twitter_on: true              
    });                  
    });      
    </script>
    
    
 Replace This Link "https://www.facebook.com/fbpages0001" With Your Fan page URL




 Now All Is Don

If you Have Any Question Please Comment Here

 Enjoy..!!
Read More

Sunday, April 1, 2012

Design/Customize Bloger Template Templates And Convert Wordpress Themes To Blogger

Design/Customize Bloger Template Templates And Convert Wordpress Themes To Blogger
hi all of my blogger friend, now we are started premium service, i have received more request about design unique templates and we are Convert WordPress templates to Blogger platform,

1. Design Unique Templates For You (Price Starting Cost: $ 100.00 USD)
more blogger users like to use unique and his/her own style template for there blogs. id you want unique template for your site we are design template with your ideas,

2. Convert WordPress Template to Blogger (Price Starting Cost: $ 80.00 USD)
do you like design your site as a premium wp site?now you can do it, this service is a very good for premium bloggers, we are converting any wp themes to blogger.

3. Customize Your Blog (prices starting Cost: $ 20.00 US)
if you have any blog already , do you want customize your blog,? you can customize your blog using coolbthemescompremium service,

we accept paypal and moneybookers payment

you can contact us using this form.





Read More

Tuesday, February 7, 2012

CoolBthemes Top 10 Blogger Template Collection

2012 Top Blogger Template Collection


Socimag Blogger Template is coolbthemes blogger template design, its very powerfull seo friendly blogger template












































Read More

Wednesday, February 1, 2012

How To Install a Blogger Template In New Blogger Interface

http://1.bp.blogspot.com/-Z_XdEqgG7LE/TylF4lRn0pI/AAAAAAAAILo/iFvSghbNEUM/s1600/main-template-install.jpg

Now Blogger Is a Daily Improving There Service, Here are the steps to apply or change the template for your current blog. follow this steps and you can install your new template correctly

1. Login blogger account and Select "Template" On The Right Drop Down Menu


Click On The Image To Zoom This Image


2. Now Click "Backup/Restore" Button Top Of right


Click On The Image To Zoom This Image



3. Then Click "Choose Button"


Click On The Image To Zoom This Image


4. Bow You Can Brows Blogger Template And Click Select, If you haven't New Blogger Template You Can Use Our Template Store And Download Template( Yo Must Select xml File, some times you download rar or zip file you must unzip that file. you can use a free unzipper softwar)


Click On The Image To Zoom This Image

5. Now Click Upload Button for Upload New Blogger Template To Blogger Server.please wait several minute to complete this step

6. Now all is don,
Read More

Friday, January 27, 2012

How To add Ads Banner For Blogger Template









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 before the ]]></b:skin> tag.





.bannerbox{
float:left;
width:280px;
padding:0px ;
margin:0px 0px 0px 3px;
position:relative;
overflow: hidden;
}
.bannerbox h2 {
color:#140000;
margin:0px ;
padding:0px 0px 0px 5px ;
font: 28px Crushed, sans-serif;
height:35px;
line-height:33px;
text-align: left;
font-weight: normal;
border-bottom:2px solid #ffb400;
text-shadow:1px 1px 0px #ffffff;
}
.banner{
margin: 0px ;
padding: 0px ;
float:left;
height:100%;
}
.banner ul {
margin: 0px 0px 0 10px;
padding: 0px 0px;
overflow: auto;
}
.banner li{
width:125px;
margin: 8px 4px 4px 6px ;
padding:1px;
list-style:none;
display : block;
overflow:hidden;
float:left;
background:#fff;
border:1px dashed #d1d1d3;
}
.banner li a:link, .banner li a:visited ,.banner li a:hover{
text-decoration: none;
}



4. Now save your template.

5. Go to Layout-->Page Elements and click on "Add a gadget".Select "html/java script" and add the code given below and click save.




<div class="banner">

<ul>

<li>
<a href="http://www.coolbthemes.com" rel="bookmark" title=""><img src="http://3.bp.blogspot.com/-DBFNl9ENMzg/TvHg_P5zj2I/AAAAAAAAG5w/VUIu7DIuXms/s1600/tutorials_125x125_v10.gif" alt="" style="vertical-align:bottom;" /></a>
</li>



<li>
<a href="http://www.coolbthemes.com" rel="bookmark" title=""><img src="http://2.bp.blogspot.com/-c6-b1qfhatA/TvHg_EnWUQI/AAAAAAAAG5c/PRJQ7nB49nY/s1600/tf_125x125_v1.gif" alt="" style="vertical-align:bottom;" /></a>
</li>

<li>
<a href="http://www.coolbthemes.com" rel="bookmark" title=""><img src="http://4.bp.blogspot.com/-AKnlFIFKIos/TvHg-wHtvOI/AAAAAAAAG5U/qhk0n_lYxeg/s1600/aj_125x125_v2.gif" alt="" style="vertical-align:bottom;" /></a>
</li>

<li>

<a href="http://www.coolbthemes.com" rel="bookmark" title=""><img src="http://1.bp.blogspot.com/-gl6BRkzCIos/TvHg_s-rrrI/AAAAAAAAG54/PCya9HhNbkw/s1600/vh_125x125_1.gif" alt="" style="vertical-align:bottom;" /></a>
</li>
</ul>
</div>


6.Now drag Sidebar to place to gadget
Read More

Thursday, January 26, 2012

How To Add Showcase Style Feature Post Slider For 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 before the ]]></b:skin> tag.



/* Showcase
-------------*/
#showcase {
overflow: hidden;
height: 395px;
margin: 5px;
}
#awOnePageButton .view-slide
{
display: none;
}

/* This class is removed after the showcase is loaded */
/* Assign the correct showcase height to prevent loading jumps in IE */
.showcase-load
{
height: 470px; /* Same as showcase javascript option */
overflow: hidden;
}

/* Container when content is shown as one page */
.showcase-onepage
{
/**/
}

/* Container when content is shown in slider */
.showcase
{
position: relative;
margin: auto;
background: #f1f1f1;
border: 1px solid #d2d2d2;
padding: 0px 0px 9px;
box-shadow: 0 2px 7px #dddddd;
}

.showcase-content-container
{
background-color: #000;
}

/* Navigation arrows */
.showcase-arrow-previous, .showcase-arrow-next
{
position: absolute;
background: url('http://2.bp.blogspot.com/-Gb-N88iG1aw/TutmSnDCEiI/AAAAAAAAGoI/xnC5yWdkeuw/s1600/arrows.png');
width: 35px;
height: 31px;
top: 220px;
cursor: pointer;
z-index: 99999;
opacity: 0.95;
}

.showcase-arrow-previous
{
right: 35px;
background-position: 0 0;
top: 274px;
}
.showcase-arrow-next
{
right: 0px;
top: 274px;
background-position: -34px 0;
}


/* Content */
.showcase-content
{
background-color: #000;
text-align: center;
}

.showcase-content-wrapper
{
text-align: center;
height: 470px;
width: 700px;
display: table-cell;
vertical-align: middle;
}

/* Styling the tooltips */
.showcase-plus-anchor
{
background-image: url('');
background-repeat: no-repeat;
}

.showcase-plus-anchor:hover
{
background-position: -32px 0;
}

div.showcase-tooltip
{
background-color: #fff;
color: #000;
text-align: left;
padding: 5px 8px;
background-image: url(http://3.bp.blogspot.com/-3E8T1F9JYU8/Tutm3LPZVBI/AAAAAAAAGpM/qO2OW4RShwI/s1600/white-opacity-80.png);
}

/* Styling the caption */
.showcase-caption
{
color: #000;
padding: 10px;
width: 323px;
text-align: left;
position: absolute;
bottom: 0px; left: 0px;
display: none;
background: #282828 url(http://3.bp.blogspot.com/-u9_5weSywMI/TutmTTzYkCI/AAAAAAAAGoo/sD6sCyLi1Kk/s1600/caption.jpg) repeat-x;
border: 1px solid #000000;
opacity: 0.95;
}

h2.stitle a, h2.stitle a:visited {
color: #fff;
text-shadow: 1px 0 1px #000;
font-size: 16px;
text-transform: uppercase;
display: inline-block;
margin: 5px 0 8px 0;
}
.showcase-caption p {
color: #757575;
font-size: 12px;
}


.showcase-onepage .showcase-content
{
margin-bottom: 10px;
}

/* Button Wrapper */
.showcase-button-wrapper
{
clear: both;
margin-top: 10px;
text-align: center;
}

.showcase-button-wrapper span
{
margin-right: 3px;
padding: 2px 5px 0px 5px;
cursor: pointer;
font-size: 12px;
color: #444444;
}

.showcase-button-wrapper span.active
{
color: #fff;
}

/* Thumbnails */
.showcase-thumbnail-container /* Used for backgrounds, no other styling!!! */
{

}

.showcase-thumbnail-wrapper
{
overflow: hidden;
}

.showcase-thumbnail
{
width: 140px;
height: 75px;
cursor: pointer;
border: solid 1px #d2d2d2;
position: relative;
}

.showcase-thumbnail-caption
{
position: absolute;
bottom: 2px;
padding-left: 10px;
padding-bottom: 5px;
}

.showcase-thumbnail-content
{
padding: 10px;
text-align: center;
padding-top: 25px;
}

.showcase-thumbnail-cover
{
background-image: url(http://2.bp.blogspot.com/-FpWPQDEkliI/Tutm3NfARJI/AAAAAAAAGpE/Cyz8zcLYa4Q/s1600/black-opacity-40.png);
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
}

.showcase-thumbnail:hover
{
border: solid 1px #000;
}

.showcase-thumbnail:hover .showcase-thumbnail-cover
{
display: none;
}

.showcase-thumbnail.active
{
border: solid 1px #000;
}

.showcase-thumbnail.active .showcase-thumbnail-cover
{
display: none;
}

.showcase-thumbnail-wrapper-horizontal
{
padding: 10px 10px 0;
}

.showcase-thumbnail-wrapper-horizontal .showcase-thumbnail
{
margin-right: 16px;
width: 140px;
}

.showcase-thumbnail-wrapper-vertical
{
padding: 10px;
}

.showcase-thumbnail-wrapper-vertical .showcase-thumbnail
{
margin-bottom: 10px;
}

.showcase-thumbnail-button-backward,
.showcase-thumbnail-button-forward
{
padding: 7px;
cursor: pointer;
}

.showcase-thumbnail-button-backward
{
padding-bottom: 0px;
padding-right: 0px;
}

.showcase-thumbnail-button-backward .showcase-thumbnail-vertical,
.showcase-thumbnail-button-forward .showcase-thumbnail-vertical,
.showcase-thumbnail-button-forward .showcase-thumbnail-horizontal,
.showcase-thumbnail-button-backward .showcase-thumbnail-horizontal
{
background-image: url(http://2.bp.blogspot.com/-yGqpmRUG3JE/TutmS2XpQTI/AAAAAAAAGoU/tozIkQEf2mk/s1600/arrows-small.png);
background-repeat: no-repeat;
display: none;
width: 17px;
height: 17px;
}

.showcase-thumbnail-button-backward .showcase-thumbnail-vertical
{
background-position: 0 -51px;
margin-left: 55px;
}
.showcase-thumbnail-button-backward:hover .showcase-thumbnail-vertical
{
background-position: -17px -51px;
}

.showcase-thumbnail-button-forward .showcase-thumbnail-vertical
{
background-position: 0 -34px;
margin-left: 55px;
}
.showcase-thumbnail-button-forward:hover .showcase-thumbnail-vertical
{
background-position: -17px -34px;
}

.showcase-thumbnail-button-backward .showcase-thumbnail-horizontal
{
background-position: 0 -17px;
margin-top: 40px;
margin-bottom: 40px;
}
.showcase-thumbnail-button-backward:hover .showcase-thumbnail-horizontal
{
background-position: -17px -17px;
}

.showcase-thumbnail-button-forward .showcase-thumbnail-horizontal
{
background-position: 0 0;
margin-top: 40px;
margin-bottom: 40px;
}
.showcase-thumbnail-button-forward:hover .showcase-thumbnail-horizontal
{
background-position: -17px 0;
}

/* Hide button text */
.showcase-thumbnail-button-forward span span,
.showcase-thumbnail-button-backward span span
{
display: none;
}



/* Clear (used for horizontal thumbnails)
-------------------------------------------*/

.clear
{
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
float: none;
}

banner2k {
background: #ffffff;
)




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

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





<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>

/*

Awkward Showcase - jQuery plugin
http://www.jquery.com
http://www.awkwardgroup.com/sandbox/awkward-showcase-a-jquery-plugin
http://demo.awkwardgroup.com/showcase
Version: 1.1.1

Copyright (C) 2011 Awkward Group (http://www.awkwardgroup.com)
Licensed under Attribution-ShareAlike 3.0 Unported
http://creativecommons.org/licenses/by-sa/3.0/

Markup example for jQuery(&quot;#showcase&quot;).awShowcase();

&lt;div id=&quot;showcase&quot; class=&quot;showcase&quot;&gt;
&lt;!-- Each child div in #showcase represents a slide --&gt;
&lt;div class=&quot;showcase-slide&quot;&gt;
&lt;!-- Put the slide content in a div with the class .showcase-content --&gt;
&lt;div class=&quot;showcase-content&quot;&gt;
&lt;!-- If the slide contains multiple elements you should wrap them in a div with the class .showcase-content-wrapper.
We usually wrap even if there is only one element, because it looks better. :-) --&gt;
&lt;div class=&quot;showcase-content-wrapper&quot;&gt;
&lt;img src=&quot;images/01.jpg&quot; alt=&quot;01&quot; /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;!-- Put the caption content in a div with the class .showcase-caption --&gt;
&lt;div class=&quot;showcase-caption&quot;&gt;
The Caption
&lt;/div&gt;
&lt;!-- Put the tooltips in a div with the class .showcase-tooltips. --&gt;
&lt;div class=&quot;showcase-tooltips&quot;&gt;
&lt;!-- Each anchor in .showcase-tooltips represents a tooltip. The coords attribute represents the position of the tooltip. --&gt;
&lt;a href=&quot;http://www.awkward.se&quot; coords=&quot;634,130&quot;&gt;
&lt;!-- The content of the anchor-tag is displayed in the tooltip. --&gt;
This is a tooltip that displays the anchor html in a nice way.
&lt;/a&gt;
&lt;a href=&quot;http://www.awkward.se&quot; coords=&quot;356, 172&quot;&gt;
&lt;!-- You can add multiple elements to the anchor-tag which are display in the tooltip. --&gt;
&lt;img src=&quot;images/glasses.png&quot; /&gt;
&lt;span style=&quot;display: block; font-weight: bold; padding: 3px 0 3px 0; text-align: center;&quot;&gt;
White Glasses: 500$
&lt;/span&gt;
&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;showcase-slide&quot;&gt;
&lt;div class=&quot;showcase-content&quot;&gt;
&lt;div class=&quot;showcase-content-wrapper&quot;&gt;
Content...
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;

*/

(function(jQuery){jQuery.fn.awShowcase=function(options){var defaults={content_width:700,content_height:470,fit_to_parent:false,auto:false,interval:3000,continuous:false,loading:true,tooltip_width:200,tooltip_icon_width:32,tooltip_icon_height:32,tooltip_offsetx:18,tooltip_offsety:0,arrows:true,buttons:true,btn_numbers:false,keybord_keys:false,mousetrace:false,pauseonover:true,stoponclick:true,transition:&#39;hslide&#39;,transition_delay:300,transition_speed:500,show_caption:&#39;onload&#39;,thumbnails:false,thumbnails_position:&#39;outside-last&#39;,thumbnails_direction:&#39;vertical&#39;,thumbnails_slidex:0,dynamic_height:false,speed_change:false,viewline:false,fullscreen_width_x:15,custom_function:null};options=jQuery.extend(defaults,options);var current_id=0;var previous_id=0;var break_loop=false;var pause_loop=false;var myInterval=null;var showcase=jQuery(this);var showcase_width=options.content_width;var animating=false;var content_viewline_width=10000;var animation_distance=0;var old_animation_distance=0;var remaining_width=0;var content_container=jQuery(document.createElement(&#39;div&#39;)).css(&#39;overflow&#39;,&#39;hidden&#39;).css(&#39;position&#39;,&#39;relative&#39;).addClass(&#39;showcase-content-container&#39;).prependTo(showcase);if(options.fit_to_parent){showcase_width=jQuery(showcase).width()+options.fullscreen_width_x}if(options.viewline){options.thumbnails=false;options.dynamic_height=false;content_container.css(&#39;width&#39;,content_viewline_width);showcase.css(&#39;overflow&#39;,&#39;hidden&#39;);$(&#39;.showcase-arrow-previous&#39;).hide()}var contentArray=[];var thumbnailArray=[];var content_count=0;showcase.children(&#39;.showcase-slide&#39;).each(function(){var object=jQuery(this);content_count++;if(options.thumbnails){var thumb=object.find(&#39;.showcase-thumbnail&#39;);thumbnailArray.push(thumb);thumb.remove()}var object_width=object.find(&#39;.showcase-content&#39;).children().width();var object_height=object.find(&#39;.showcase-content&#39;).children().height();contentArray.push(object.html());object.remove();var new_object=getContent(content_count-1);if(options.viewline||content_count===1){content_container.append(new_object)}if(options.viewline){new_object.css(&#39;position&#39;,&#39;relative&#39;);new_object.css(&#39;float&#39;,&#39;left&#39;);new_object.css(&#39;width&#39;,object_width)}if(options.dynamic_height){new_object.css(&#39;height&#39;,object_height);if(content_count===1){content_container.css(&#39;height&#39;,object_height)}}else{new_object.css(&#39;height&#39;,options.content_height);if(content_count===1){content_container.css(&#39;height&#39;,options.content_height)}}if(options.viewline||content_count===1){displayAnchors(new_object);displayCaption(new_object);if(options.show_caption===&#39;show&#39;){jQuery(new_object).find(&#39;.showcase-caption&#39;).show()}}});var thumb_wrapper;var thumbnailStretch=0;var thumbnailsPerPage=0;if(options.thumbnails){thumb_container=jQuery(&#39;&lt;div /&gt;&#39;);thumb_restriction=jQuery(&#39;&lt;div /&gt;&#39;);thumb_wrapper=jQuery(&#39;&lt;div /&gt;&#39;);for(i=thumbnailArray.length-1;i&gt;=0;--i){var thumbnail=jQuery(thumbnailArray[i]).css({&#39;overflow&#39;:&#39;hidden&#39;});thumbnail.attr(&#39;id&#39;,&#39;showcase-thumbnail-&#39;+i);thumbnail.addClass((i===0)?&#39;active&#39;:&#39;&#39;);thumbnail.click(function(a,b){return function(){if(myInterval){pause_loop=true;clearInterval(myInterval)}changeContent(a,b)}}(i,&#39;&#39;));thumb_wrapper.prepend(thumbnail)}if(options.thumbnails_position===&#39;outside-first&#39;||options.thumbnails_position===&#39;outside-last&#39;){if(options.thumbnails_direction!==&#39;horizontal&#39;){content_container.css(&#39;float&#39;,&#39;left&#39;);content_container.css(&#39;width&#39;,options.content_width);thumb_container.css(&#39;float&#39;,&#39;left&#39;);thumb_container.css(&#39;height&#39;,options.content_height)}else{jQuery(thumb_wrapper).find(&#39;.showcase-thumbnail&#39;).css(&#39;float&#39;,&#39;left&#39;)}if(options.thumbnails_position===&#39;outside-last&#39;){showcase.append(thumb_container);if(options.thumbnails_direction!==&#39;horizontal&#39;){showcase.append(jQuery(&#39;&lt;div /&gt;&#39;).addClass(&#39;clear&#39;))}}else{showcase.prepend(thumb_container);if(options.thumbnails_direction!==&#39;horizontal&#39;){showcase.append(jQuery(&#39;&lt;div /&gt;&#39;).addClass(&#39;clear&#39;))}}}else{thumb_container.css({&#39;position&#39;:&#39;absolute&#39;,&#39;z-index&#39;:20});if(options.thumbnails_direction===&#39;horizontal&#39;){thumb_container.css({&#39;left&#39;:0,&#39;right&#39;:0});jQuery(thumb_wrapper).find(&#39;.showcase-thumbnail&#39;).css(&#39;float&#39;,&#39;left&#39;);jQuery(thumb_wrapper).append(jQuery(&#39;&lt;div /&gt;&#39;).addClass(&#39;clear&#39;));if(options.thumbnails_position===&#39;inside-first&#39;){thumb_container.css(&#39;top&#39;,0)}else{thumb_container.css(&#39;bottom&#39;,0)}}else{thumb_container.css({&#39;top&#39;:0,&#39;bottom&#39;:0});if(options.thumbnails_position===&#39;inside-first&#39;){thumb_container.css(&#39;left&#39;,0)}else{thumb_container.css(&#39;right&#39;,0)}}content_container.prepend(thumb_container)}thumb_container.addClass(&#39;showcase-thumbnail-container&#39;);thumb_container.css(&#39;overflow&#39;,&#39;hidden&#39;);thumb_restriction.addClass(&#39;showcase-thumbnail-restriction&#39;);thumb_restriction.css({&#39;overflow&#39;:&#39;hidden&#39;,&#39;position&#39;:&#39;relative&#39;});if(options.thumbnails_direction===&#39;horizontal&#39;){thumb_restriction.css({&#39;float&#39;:&#39;left&#39;})}thumb_wrapper.addClass(&#39;showcase-thumbnail-wrapper&#39;);if(options.thumbnails_direction===&#39;horizontal&#39;){thumb_wrapper.addClass(&#39;showcase-thumbnail-wrapper-horizontal&#39;)}else{thumb_wrapper.addClass(&#39;showcase-thumbnail-wrapper-vertical&#39;)}thumb_wrapper.css(&#39;position&#39;,&#39;relative&#39;);thumb_restriction.append(thumb_wrapper);thumb_container.append(thumb_restriction);var buttonBackward=jQuery(&#39;&lt;div class=&quot;showcase-thumbnail-button-backward&quot; /&gt;&#39;);if(options.thumbnails_direction!==&#39;horizontal&#39;){buttonBackward.html(&#39;&lt;span class=&quot;showcase-thumbnail-vertical&quot;&gt;&lt;span&gt;Up&lt;/span&gt;&lt;/span&gt;&#39;)}else{buttonBackward.css({&#39;float&#39;:&#39;left&#39;});buttonBackward.html(&#39;&lt;span class=&quot;showcase-thumbnail-horizontal&quot;&gt;&lt;span&gt;Left&lt;/span&gt;&lt;/span&gt;&#39;)}buttonBackward.click(function(){slideThumbnailWrapper(&#39;backward&#39;,false,true)});thumb_container.prepend(buttonBackward);var buttonForward=jQuery(&#39;&lt;div class=&quot;showcase-thumbnail-button-forward&quot; /&gt;&#39;);if(options.thumbnails_direction!==&#39;horizontal&#39;){buttonForward.html(&#39;&lt;span class=&quot;showcase-thumbnail-vertical&quot;&gt;&lt;span&gt;Down&lt;/span&gt;&lt;/span&gt;&#39;)}else{buttonForward.css({&#39;float&#39;:&#39;left&#39;});buttonForward.html(&#39;&lt;span class=&quot;showcase-thumbnail-horizontal&quot;&gt;&lt;span&gt;Right&lt;/span&gt;&lt;/span&gt;&#39;)}buttonForward.click(function(){slideThumbnailWrapper(&#39;forward&#39;,false,true)});thumb_container.append(buttonForward);var thumbnailVisibleStretch=0;if(options.thumbnails_direction!==&#39;horizontal&#39;){thumbnailVisibleStretch=getElementHeight(thumb_wrapper,false);thumbnailVisibleStretch+=(getElementHeight(buttonBackward))+(getElementHeight(buttonForward));while(thumbnailVisibleStretch&lt;options.content_height){thumbnailVisibleStretch+=getElementHeight(jQuery(thumbnailArray[0]));thumbnailsPerPage++}}else{thumbnailVisibleStretch=getElementWidth(thumb_wrapper,false);thumbnailVisibleStretch+=(getElementWidth(buttonBackward))+(getElementWidth(buttonForward));while(thumbnailVisibleStretch&lt;showcase_width){thumbnailVisibleStretch+=getElementWidth(jQuery(thumbnailArray[0]));thumbnailsPerPage++}}if(thumbnailsPerPage+1&gt;thumbnailArray.length){if(options.thumbnails_direction!==&#39;horizontal&#39;){thumb_restriction.css(&#39;margin-top&#39;,getElementHeight(buttonBackward))}else{thumb_restriction.css(&#39;margin-left&#39;,getElementWidth(buttonBackward))}buttonBackward.hide();buttonForward.hide()}if(options.thumbnails_direction!==&#39;horizontal&#39;){var buttonsHeight=(getElementHeight(buttonBackward))+(getElementHeight(buttonForward));thumb_restriction.css(&#39;height&#39;,options.content_height-buttonsHeight)}else{var buttonsWidth=(getElementWidth(buttonBackward))+(getElementWidth(buttonForward));thumb_restriction.css(&#39;width&#39;,showcase_width-buttonsWidth)}if(options.thumbnails_direction===&#39;horizontal&#39;){jQuery(&#39;.showcase-thumbnail&#39;).each(function(){thumbnailStretch+=getElementWidth(jQuery(this))});thumb_wrapper.css(&#39;width&#39;,thumbnailStretch)}else{jQuery(&#39;.showcase-thumbnail&#39;).each(function(){thumbnailStretch+=getElementHeight(jQuery(this))})}}if(options.thumbnails&amp;&amp;options.thumbnails_position.indexOf(&quot;outside&quot;)!==-1&amp;&amp;options.thumbnails_direction!==&#39;horizontal&#39;&amp;&amp;!options.viewline){showcase.css(&#39;width&#39;,showcase_width+getElementWidth(thumb_wrapper,true,false))}else if(!options.fit_to_parent){showcase.css(&#39;width&#39;,showcase_width)}if(content_count&gt;1&amp;&amp;options.auto){myInterval=window.setInterval(autoChange,options.interval)}if(options.auto&amp;&amp;options.pauseonover){showcase.mouseenter(function(){break_loop=true;clearInterval(myInterval)});showcase.mouseleave(function(){if(!pause_loop){break_loop=false;myInterval=window.setInterval(autoChange,options.interval)}})}if(options.arrows&amp;&amp;content_count&gt;1){jQuery(document.createElement(&#39;div&#39;)).addClass(&#39;showcase-arrow-previous&#39;).prependTo(showcase).click(function(){if(myInterval){if(options.stoponclick){pause_loop=true}clearInterval(myInterval)}changeContent((current_id===0)?content_count-1:parseInt(current_id)-1,&#39;previous&#39;)});jQuery(document.createElement(&#39;div&#39;)).addClass(&#39;showcase-arrow-next&#39;).prependTo(showcase).click(function(){if(myInterval){if(options.stoponclick){pause_loop=true}clearInterval(myInterval)}changeContent(current_id+1,&#39;next&#39;)});if(options.viewline){$(&#39;.showcase-arrow-previous&#39;).hide()}}if(options.buttons&amp;&amp;content_count&gt;1){jQuery(document.createElement(&#39;div&#39;)).css(&#39;clear&#39;,&#39;both&#39;).addClass(&#39;showcase-button-wrapper&#39;).appendTo(showcase);i=0;while(i&lt;content_count){jQuery(document.createElement(&#39;span&#39;)).attr(&#39;id&#39;,&#39;showcase-navigation-button-&#39;+i).addClass((i===0)?&#39;active&#39;:&#39;&#39;).html((options.btn_numbers)?parseInt(i)+1:&#39;&amp;#9679;&#39;).click(function(a,b){return function(){if(myInterval){if(options.stoponclick){pause_loop=true}clearInterval(myInterval)}changeContent(a,b)}}(i,&#39;&#39;)).appendTo(jQuery(showcase).find(&#39;.showcase-button-wrapper&#39;));i++}}if(options.keybord_keys){jQuery(document).keydown(function(e){if(options.stoponclick){pause_loop=true}if(myInterval)clearInterval(myInterval);if(e.keyCode===37){changeContent((current_id===0)?content_count-1:parseInt(current_id)-1,&#39;previous&#39;)}if(e.keyCode===39){changeContent((current_id===content_count-1)?0:parseInt(current_id)+1,&#39;next&#39;)}})}function getContent(id){var new_content=jQuery(document.createElement(&#39;div&#39;)).attr(&#39;id&#39;,&#39;showcase-content-&#39;+id).css(&#39;overflow&#39;,&#39;hidden&#39;).css(&#39;position&#39;,&#39;absolute&#39;).addClass(&#39;showcase-content&#39;).html(contentArray[id]);if(!options.viewline){new_content.css(&#39;width&#39;,options.content_width)}if(options.fit_to_parent&amp;&amp;!options.viewline){new_content.css(&#39;left&#39;,(showcase_width/2)-options.content_width/2)}return new_content}function autoChange(){var nextID=parseInt(current_id)+1;if(nextID===content_count&amp;&amp;options.continuous){nextID=0}else if(nextID===content_count&amp;&amp;!options.continuous){break_loop=true;clearInterval(myInterval)}if(!break_loop){changeContent(nextID,&#39;next&#39;)}}function changeContent(id,direction){if(current_id!==id&amp;&amp;!animating){var obj;var obj2;var delay=0;var i;var lrpos=(options.fit_to_parent)?(showcase_width/2)-(options.content_width/2):0;if((id&gt;current_id&amp;&amp;direction!==&#39;previous&#39;)||direction===&#39;next&#39;){if(options.viewline){if(current_id&lt;content_count-1){if(!options.speed_change){animating=true}updateContentViewlineWidth();if(options.pauseonover){window.clearInterval(myInterval)}remaining_width=0;for(i=current_id+1,len=content_count;i&lt;len;++i){obj=addedContentArray[i];remaining_width+=obj.find(&#39;.showcase-content&#39;).children().width()}if(remaining_width&gt;showcase_width){old_animation_distance=animation_distance;animation_distance-=addedContentArray[current_id].find(&#39;.showcase-content&#39;).children().width()}else if($(&#39;.showcase-arrow-next&#39;).is(&#39;:visible&#39;)){old_animation_distance=animation_distance;animation_distance=-(content_viewline_width-(remaining_width+(showcase_width-remaining_width)));$(&#39;.showcase-arrow-next&#39;).fadeOut(300)}content_container.animate({left:animation_distance+&#39;px&#39;},options.transition_speed,function(){animating=false});if($(&#39;.showcase-arrow-next&#39;).is(&#39;:visible&#39;)){current_id++}$(&#39;.showcase-arrow-previous&#39;).fadeIn(300)}}else{if(!options.speed_change){animating=true}obj=jQuery(showcase).find(&#39;#showcase-content-&#39;+parseInt(current_id));obj2=getContent(id);content_container.append(obj2);if(options.dynamic_height){obj2.css(&#39;height&#39;,obj2.find(&#39;.showcase-content&#39;).children().height())}else{obj2.css(&#39;height&#39;,options.content_height)}if(obj.find(&#39;.showcase-content&#39;).children().height()&gt;obj2.find(&#39;.showcase-content&#39;).children().height()&amp;&amp;options.dynamic_height){content_container.stop(true,true).animate({height:obj2.find(&#39;.showcase-content&#39;).children().height()},200);delay=100}if(options.transition===&#39;hslide&#39;){jQuery(obj).delay(delay).animate({left:-(options.content_width)},options.transition_speed+options.transition_delay,function(){obj.remove()})}else if(options.transition===&#39;vslide&#39;){jQuery(obj).delay(delay).animate({top:-(options.content_height)},options.transition_speed+options.transition_delay,function(){obj.remove()})}else{jQuery(obj).delay(delay).fadeOut(options.transition_speed,function(){obj.remove()})}displayAnchors(obj,true);displayCaption(obj,true);if(options.transition===&#39;hslide&#39;){obj2.css(&#39;left&#39;,showcase_width);jQuery(obj2).delay(delay).animate({left:lrpos},options.transition_speed,function(){displayAnchors(obj2);displayCaption(obj2);afterAnimation(obj2)})}else if(options.transition===&#39;vslide&#39;){obj2.css(&#39;top&#39;,showcase.height());jQuery(obj2).delay(delay).animate({top:&#39;0px&#39;},options.transition_speed,function(){displayAnchors(obj2);displayCaption(obj2);afterAnimation(obj2)})}else{obj2.css(&#39;left&#39;,lrpos);obj2.css(&#39;display&#39;,&#39;none&#39;);jQuery(obj2).delay(delay).fadeIn(options.transition_speed,function(){displayAnchors(obj2);displayCaption(obj2);afterAnimation(obj2)})}}}else if(id&lt;current_id||direction===&#39;previous&#39;){if(options.viewline){if(current_id!==0){if(!options.speed_change){animating=true}updateContentViewlineWidth();if(options.pauseonover){window.clearInterval(myInterval)}content_container.animate({left:old_animation_distance+&#39;px&#39;},options.transition_speed,function(){animating=false});animation_distance=old_animation_distance;current_id--;if(current_id===0){$(&#39;.showcase-arrow-previous&#39;).fadeOut(300)}old_id=current_id-1;sub_width=jQuery(addedContentArray[old_id]).width();old_animation_distance=old_animation_distance+sub_width}$(&#39;.showcase-arrow-next&#39;).fadeIn(300)}else{if(!options.speed_change){animating=true}obj=jQuery(showcase).find(&#39;#showcase-content-&#39;+parseInt(current_id));obj2=getContent(id);content_container.append(obj2);if(options.dynamic_height){obj2.css(&#39;height&#39;,obj2.find(&#39;.showcase-content&#39;).children().height())}else{obj2.css(&#39;height&#39;,options.content_height)}if(obj.find(&#39;.showcase-content&#39;).children().height()&gt;obj2.find(&#39;.showcase-content&#39;).children().height()&amp;&amp;options.dynamic_height){content_container.stop(true,true).animate({height:obj2.find(&#39;.showcase-content&#39;).children().height()},200);delay=100}if(options.transition===&#39;hslide&#39;){jQuery(obj).delay(delay).animate({left:(showcase_width)+&#39;px&#39;},options.transition_speed+options.transition_delay,function(){displayAnchors(obj,true);displayCaption(obj,true);obj.remove()})}else if(options.transition===&#39;vslide&#39;){jQuery(obj).delay(delay).animate({top:(options.content_height)+&#39;px&#39;},options.transition_speed+options.transition_delay,function(){displayAnchors(obj,true);displayCaption(obj,true);obj.remove()})}else{jQuery(obj).delay(delay).fadeOut(options.transition_speed,function(){displayAnchors(obj,true);displayCaption(obj,true);obj.remove()})}if(options.transition===&#39;hslide&#39;){obj2.css(&#39;left&#39;,&#39;-&#39;+options.content_width+&#39;px&#39;);jQuery(obj2).delay(delay).animate({left:lrpos},options.transition_speed,function(){displayAnchors(obj2);displayCaption(obj2);afterAnimation(obj2)})}else if(options.transition===&#39;vslide&#39;){obj2.css(&#39;top&#39;,&#39;-&#39;+showcase.height()+&#39;px&#39;);jQuery(obj2).delay(delay).animate({top:&#39;0px&#39;},options.transition_speed,function(){displayAnchors(obj2);displayCaption(obj2);afterAnimation(obj2)})}else{obj2.css(&#39;left&#39;,lrpos);obj2.css(&#39;display&#39;,&#39;none&#39;);jQuery(obj2).delay(delay).fadeIn(options.transition_speed,function(){displayAnchors(obj2);displayCaption(obj2);afterAnimation(obj2)})}content_container.append(obj2)}}if(!options.viewline){previous_id=current_id;current_id=id;if(options.thumbnails){if((current_id&gt;previous_id&amp;&amp;direction!==&#39;previous&#39;)||direction===&#39;next&#39;){slideThumbnailWrapper(&#39;forward&#39;,true)}else if(current_id&lt;previous_id||direction===&#39;previous&#39;){slideThumbnailWrapper(&#39;backward&#39;,true)}}if(options.arrows){jQuery(showcase).find(&#39;.showcase-arrow-previous&#39;).unbind(&#39;click&#39;).click(function(){if(myInterval){if(options.stoponclick){pause_loop=true}clearInterval(myInterval)}changeContent((current_id===0)?content_count-1:parseInt(current_id)-1,&#39;previous&#39;)});jQuery(showcase).find(&#39;.showcase-arrow-next&#39;).unbind(&#39;click&#39;).click(function(){if(myInterval){if(options.stoponclick){pause_loop=true}clearInterval(myInterval)}changeContent((current_id===content_count-1)?0:parseInt(current_id)+1,&#39;next&#39;)})}if(options.thumbnails){i=0;showcase.find(&#39;.showcase-thumbnail&#39;).each(function(){var object=jQuery(this);object.removeClass(&#39;active&#39;);if(i===current_id){object.addClass(&#39;active&#39;)}i++})}if(options.show_caption===&#39;show&#39;){jQuery(obj2).find(&#39;.showcase-caption&#39;).show()}}if(options.buttons){i=0;showcase.find(&#39;.showcase-button-wrapper span&#39;).each(function(){var object=jQuery(this);object.removeClass(&#39;active&#39;);if(i===current_id){object.addClass(&#39;active&#39;)}i++})}if(typeof options.custom_function==&#39;function&#39;){options.custom_function()}}}function afterAnimation(obj){if(options.dynamic_height){content_container.stop(true,true).animate({height:obj.find(&#39;.showcase-content&#39;).children().height()},200)}animating=false}var thumbnailSlidePosition=0;function slideThumbnailWrapper(direction,check,backwardforward){var doTheSlide=true;var thumbnailHeightOrWidth=getElementHeight(jQuery(thumb_wrapper).find(&#39;.showcase-thumbnail&#39;));if(options.thumbnails_direction===&#39;horizontal&#39;){thumbnailHeightOrWidth=getElementWidth(jQuery(thumb_wrapper).find(&#39;.showcase-thumbnail&#39;))}var multiplySlidePosition=1;if(options.thumbnails_slidex===0){options.thumbnails_slidex=thumbnailsPerPage}if(check){var thumbnailSlidePositionCopy=thumbnailSlidePosition;var thumbnailsScrolled=0;while(thumbnailSlidePositionCopy&lt;0){if(options.thumbnails_direction===&#39;horizontal&#39;){thumbnailSlidePositionCopy+=getElementWidth(jQuery(thumbnailArray[0]))}else{thumbnailSlidePositionCopy+=getElementHeight(jQuery(thumbnailArray[0]))}thumbnailsScrolled++}var firstVisible=thumbnailsScrolled;var lastVisible=thumbnailsPerPage+thumbnailsScrolled-1;if(current_id&gt;=firstVisible&amp;&amp;current_id&lt;=lastVisible){doTheSlide=false}var distance;if((current_id-lastVisible)&gt;options.thumbnails_slidex){distance=current_id-lastVisible;while(distance&gt;options.thumbnails_slidex){distance-=options.thumbnails_slidex;multiplySlidePosition++}}else if((firstVisible-current_id)&gt;options.thumbnails_slidex){distance=firstVisible-current_id;while(distance&gt;options.thumbnails_slidex){distance-=options.thumbnails_slidex;multiplySlidePosition++}}else{multiplySlidePosition=1}}if(direction===&#39;forward&#39;&amp;&amp;doTheSlide){if(options.thumbnails_direction===&#39;vertical&#39;&amp;&amp;options.content_height&lt;(thumbnailStretch+thumbnailSlidePosition)){thumbnailSlidePosition-=thumbnailHeightOrWidth*(options.thumbnails_slidex*multiplySlidePosition)}else if(options.thumbnails_direction===&#39;horizontal&#39;&amp;&amp;options.content_width&lt;(thumbnailStretch+thumbnailSlidePosition)){thumbnailSlidePosition-=thumbnailHeightOrWidth*(options.thumbnails_slidex*multiplySlidePosition)}else if(current_id===0){if(!backwardforward){thumbnailSlidePosition=0}}if(options.thumbnails_direction===&#39;horizontal&#39;){thumb_wrapper.animate({left:thumbnailSlidePosition},300)}else{thumb_wrapper.animate({top:thumbnailSlidePosition},300)}}else if(doTheSlide){if(thumbnailSlidePosition&lt;0){thumbnailSlidePosition+=thumbnailHeightOrWidth*(options.thumbnails_slidex*multiplySlidePosition)}else if(current_id===content_count-1){if(!backwardforward){thumbnailSlidePosition-=thumbnailHeightOrWidth*(options.thumbnails_slidex*multiplySlidePosition)}}else{thumbnailSlidePosition=0}if(options.thumbnails_direction===&#39;horizontal&#39;){thumb_wrapper.animate({left:thumbnailSlidePosition},300)}else{thumb_wrapper.animate({top:thumbnailSlidePosition},300)}}}function displayCaption(container,fadeOut){var caption=container.find(&#39;.showcase-caption&#39;);if(!fadeOut){if(options.show_caption===&#39;onload&#39;){caption.fadeIn(300)}else if(options.show_caption===&#39;onhover&#39;){jQuery(container).mouseenter(function(){caption.fadeIn(300)});jQuery(container).mouseleave(function(){caption.stop(true,true).fadeOut(100)})}}else{caption.stop(true,true).fadeOut(300)}}function displayAnchors(container,fadeOut){container.find(&#39;.showcase-tooltips a&#39;).each(function(){if(!fadeOut){var coords=jQuery(this).attr(&#39;coords&#39;);coords=coords.split(&#39;,&#39;);jQuery(this).addClass(&#39;showcase-plus-anchor&#39;);jQuery(this).css(&#39;position&#39;,&#39;absolute&#39;);jQuery(this).css(&#39;display&#39;,&#39;none&#39;);jQuery(this).css(&#39;width&#39;,options.tooltip_icon_width);jQuery(this).css(&#39;height&#39;,options.tooltip_icon_height);jQuery(this).css(&#39;left&#39;,parseInt(coords[0])-(parseInt(options.tooltip_icon_width)/2));jQuery(this).css(&#39;top&#39;,parseInt(coords[1])-(parseInt(options.tooltip_icon_height)/2));var content=jQuery(this).html();jQuery(this).mouseenter(function(){animateTooltip(container,coords[0],coords[1],content)});jQuery(this).mouseleave(function(){animateTooltip(container,coords[0],coords[1],content)});jQuery(this).html(&#39;&#39;);jQuery(this).fadeIn(300)}else{jQuery(this).stop(true,true).fadeOut(300)}})}var tooltip=null;function animateTooltip(container,x,y,content){if(tooltip===null){tooltip=jQuery(document.createElement(&#39;div&#39;)).addClass(&#39;showcase-tooltip&#39;).css(&#39;display&#39;,&#39;none&#39;).css(&#39;position&#39;,&#39;absolute&#39;).css(&#39;max-width&#39;,options.tooltip_width).html(content);container.append(tooltip);var tooltip_paddingx=parseInt(tooltip.css(&#39;padding-right&#39;))*2+parseInt(tooltip.css(&#39;border-right-width&#39;))*2;var tooltip_paddingy=parseInt(tooltip.css(&#39;padding-bottom&#39;))*2+parseInt(tooltip.css(&#39;border-bottom-width&#39;))*2;lastx=parseInt(x)+tooltip.width()+tooltip_paddingx;lasty=parseInt(y)+tooltip.height()+tooltip_paddingy;if(lastx&lt;options.content_width){tooltip.css(&#39;left&#39;,parseInt(x)+parseInt(options.tooltip_offsetx))}else{tooltip.css(&#39;left&#39;,(parseInt(x)-parseInt(options.tooltip_offsetx))-(parseInt(tooltip.width())+parseInt(options.tooltip_offsetx)))}if(lasty&lt;options.content_height){tooltip.css(&#39;top&#39;,parseInt(y)+parseInt(options.tooltip_offsety))}else{tooltip.css(&#39;top&#39;,(parseInt(y)-parseInt(options.tooltip_offsety))-(parseInt(tooltip.height())+parseInt(tooltip_paddingy)))}tooltip.fadeIn(400)}else{tooltip.fadeOut(400);tooltip.remove();tooltip=null}}function getElementHeight(el,incHeight,incMargin,incPadding,incBorders){incHeight=typeof(incHeight)!==&#39;undefined&#39;?incHeight:true;incMargin=typeof(incMargin)!==&#39;undefined&#39;?incMargin:true;incPadding=typeof(incPadding)!==&#39;undefined&#39;?incPadding:true;incBorders=typeof(incBorders)!==&#39;undefined&#39;?incBorders:true;var elHeight=(incHeight)?jQuery((el)).height():0;var elMargin=(incMargin)?parseFloat(jQuery((el)).css(&#39;margin-top&#39;))+parseFloat(jQuery(el).css(&#39;margin-bottom&#39;)):0;var elPadding=(incPadding)?parseFloat(jQuery((el)).css(&#39;padding-top&#39;))+parseFloat(jQuery(el).css(&#39;padding-bottom&#39;)):0;var elBorder=(incBorders)?parseFloat(jQuery((el)).css(&#39;border-top-width&#39;))+parseFloat(jQuery((el)).css(&#39;border-bottom-width&#39;)):0;elHeight+=elMargin+elPadding+elBorder;return elHeight}function getElementWidth(el,incWidth,incMargin,incPadding,incBorders){incWidth=typeof(incWidth)!==&#39;undefined&#39;?incWidth:true;incMargin=typeof(incMargin)!==&#39;undefined&#39;?incMargin:true;incPadding=typeof(incPadding)!==&#39;undefined&#39;?incPadding:true;incBorders=typeof(incBorders)!==&#39;undefined&#39;?incBorders:true;var elWidth=(incWidth)?jQuery((el)).width():0;var elMargin=(incMargin)?parseFloat(jQuery((el)).css(&#39;margin-left&#39;))+parseFloat(jQuery(el).css(&#39;margin-right&#39;)):0;var elPadding=(incPadding)?parseFloat(jQuery((el)).css(&#39;padding-left&#39;))+parseFloat(jQuery((el)).css(&#39;padding-right&#39;)):0;var elBorder=(incBorders)?parseFloat(jQuery((el)).css(&#39;border-left-width&#39;))+parseFloat(jQuery((el)).css(&#39;border-right-width&#39;)):0;elWidth+=elMargin+elPadding+elBorder;return elWidth}if(options.mousetrace){var mousetrace=jQuery(document.createElement(&#39;div&#39;)).css(&#39;position&#39;,&#39;absolute&#39;).css(&#39;top&#39;,&#39;0&#39;).css(&#39;background-color&#39;,&#39;#fff&#39;).css(&#39;color&#39;,&#39;#000&#39;).css(&#39;padding&#39;,&#39;3px 5px&#39;).css(&#39;x-index&#39;,&#39;30&#39;).html(&#39;X: 0 Y: 0&#39;);showcase.append(mousetrace);var offset=showcase.offset();content_container.mousemove(function(e){mousetrace.html(&#39;X: &#39;+(e.pageX-offset.left)+&#39; Y: &#39;+(e.pageY-offset.top))})}$(&#39;#awOnePageButton&#39;).click(function showInOnePage(){if($(&#39;.view-page&#39;).is(&#39;:visible&#39;)){var temp_container=jQuery(document.createElement(&#39;div&#39;));temp_container.addClass(&#39;showcase-onepage&#39;);showcase.before(temp_container);if(myInterval){pause_loop=true;clearInterval(myInterval)}$(this).find(&#39;.view-page&#39;).hide();$(this).find(&#39;.view-slide&#39;).show();showcase.hide();$.each(contentArray,function(index,value){obj=getContent(index);obj.css(&#39;position&#39;,&#39;relative&#39;);temp_container.append(obj);displayAnchors(obj);displayCaption(obj);if(options.dynamic_height){obj.css(&#39;height&#39;,obj.find(&#39;.showcase-content&#39;).children().height())}else{obj.css(&#39;height&#39;,options.content_height)}});var clear=jQuery(document.createElement(&#39;div&#39;));clear.addClass(&#39;clear&#39;);temp_container.append(clear)}else{$(&#39;.showcase-onepage&#39;).remove();$(this).find(&#39;.view-page&#39;).show();$(this).find(&#39;.view-slide&#39;).hide();showcase.show()}return false});var addedContentArray=[];function updateContentViewlineWidth(){content_viewline_width=0;content_container.children(&#39;div&#39;).each(function(){content_viewline_width+=$(this).find(&#39;.showcase-content&#39;).children().width();addedContentArray.push($(this))})}showcase.removeClass(&#39;showcase-load&#39;)}})(jQuery);
</script>

<script type='text/javascript'>

$(document).ready(function()
{
$(&quot;#showcase&quot;).awShowcase(
{
content_width: 650,
content_height: 305,
fit_to_parent: false,
auto: true,
interval: 3000,
continuous: false,
loading: true,
tooltip_width: 200,
tooltip_icon_width: 32,
tooltip_icon_height: 32,
tooltip_offsetx: 18,
tooltip_offsety: 0,
arrows: true,
buttons: false,
btn_numbers: false,
keybord_keys: true,
mousetrace: false, /* Trace x and y coordinates for the mouse */
pauseonover: true,
stoponclick: true,
transition: &#39;hslide&#39;, /* hslide/vslide/fade */
transition_delay: 300,
transition_speed: 500,
show_caption: &#39;onload&#39;, /* onload/onhover/show */
thumbnails: true,
thumbnails_position: &#39;outside-last&#39;, /* outside-last/outside-first/inside-last/inside-first */
thumbnails_direction: &#39;horizontal&#39;, /* vertical/horizontal */
thumbnails_slidex: 0, /* 0 = auto / 1 = slide one thumbnail / 2 = slide two thumbnails / etc. */
dynamic_height: false, /* For dynamic height to work in webkit you need to set the width and height of images in the source. Usually works to only set the dimension of the first slide in the showcase. */
speed_change: false, /* Set to true to prevent users from swithing more then one slide at once. */
viewline: false /* If set to true content_width, thumbnails, transition and dynamic_height will be disabled. As for dynamic height you need to set the width and height of images in the source. */
});
});
</script>




6. Now You Can Save Your Template

7. Go to Layout-->Page Elements and click on "Add a gadget".Select "html/java script" and add the code given below and click save.




<div id="showcase" class="showcase">
<div class="showcase-slide">
<div class="showcase-content">

<img src="http://4.bp.blogspot.com/-zH611nDrckk/TxPljcBF94I/AAAAAAAAHyk/22EXUofEf0k/s1600/1.jpg" alt="Quas molestias excepturi" class="slimage full noalign" width="650" height="305" /> </div>
<div class="showcase-caption">
<h2 class="stitle"><a href="http://www.simplewpthemes.com/themesdemos/?p=137">Quas molestias excepturi</a></h2>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum...</p>
</div>
<div class="showcase-thumbnail">
<img src="http://4.bp.blogspot.com/-zH611nDrckk/TxPljcBF94I/AAAAAAAAHyk/22EXUofEf0k/s1600/1.jpg" alt="Quas molestias excepturi" class="slimage full noalign" width="140" height="75" /> </div>

</div>
<div class="showcase-slide">
<div class="showcase-content">
<img src="http://2.bp.blogspot.com/-EpuA00D4v5E/TxPljiwqupI/AAAAAAAAHys/xPcnNmKRxwk/s1600/2.jpg" alt="Impedit quo minus id" class="slimage full noalign" width="650" height="305" /> </div>
<div class="showcase-caption">
<h2 class="stitle"><a href="http://www.simplewpthemes.com/themesdemos/?p=134">Impedit quo minus id</a></h2>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum...</p>

</div>
<div class="showcase-thumbnail">
<img src="http://2.bp.blogspot.com/-EpuA00D4v5E/TxPljiwqupI/AAAAAAAAHys/xPcnNmKRxwk/s1600/2.jpg" alt="Impedit quo minus id" class="slimage full noalign" width="140" height="75" /> </div>
</div>
<div class="showcase-slide">
<div class="showcase-content">
<img src="http://2.bp.blogspot.com/-nzIJRO2a8Sc/TxPljrvm8SI/AAAAAAAAHy8/SWmZb-rPphM/s1600/3.jpg" alt="Voluptates repudiandae kon" class="slimage full noalign" width="650" height="305" /> </div>
<div class="showcase-caption">

<h2 class="stitle"><a href="http://www.simplewpthemes.com/themesdemos/?p=132">Voluptates repudiandae kon</a></h2>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum...</p>
</div>
<div class="showcase-thumbnail">
<img src="http://2.bp.blogspot.com/-nzIJRO2a8Sc/TxPljrvm8SI/AAAAAAAAHy8/SWmZb-rPphM/s1600/3.jpg" alt="Voluptates repudiandae kon" class="slimage full noalign" width="140" height="75" /> </div>
</div>
<div class="showcase-slide">

<div class="showcase-content">
<img src="http://4.bp.blogspot.com/-4f5mwQqLlvI/TxPlkODSQzI/AAAAAAAAHzI/yl9Ue7RNIXo/s1600/4.jpg" alt="Mauris euismod rhoncus tortor" class="slimage full noalign" width="650" height="305" /> </div>
<div class="showcase-caption">
<h2 class="stitle"><a href="http://www.simplewpthemes.com/themesdemos/?p=22">Mauris euismod rhoncus tortor</a></h2>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum...</p>
</div>
<div class="showcase-thumbnail">

<img src="http://4.bp.blogspot.com/-4f5mwQqLlvI/TxPlkODSQzI/AAAAAAAAHzI/yl9Ue7RNIXo/s1600/4.jpg" alt="Mauris euismod rhoncus tortor" class="slimage full noalign" width="140" height="75" /> </div>
</div>
</div>
<div style="clear:both; margin-bottom: 20px;"></div>



8. Now drag your new gadget Top of "Blog Posts" Section.

9. All Is Done.....
Read More