Image Gallery Into Your Blog Post

If you'd like to showcase your image galleries in a slightly different way from what most lightbox scripts do, FrogJS Image Gallery is the answer. You view the images in sequence, by clicking on the previous and next images' thumbnail. Thumbnails are placed at the left and right edges of the FrogJS DIV and the main image is centered within that DIV. For this example, I've defined 3 images, the three thumbnails are 125px wide and the main image is 400px wide, my FrogJS DIV’s width to at least 700px

Here's a step by step guide to installing the script. Login to your Dashboard> Layout> Edit Html. Copy and paste these lines into your CSS section. The preferred place to add CSS code is right in front of the closing b:skin tag

#FrogJS{
width: 700px;
height: 600px;
margin: 0 auto;
}
#FrogJSCredit{
text-align: right;
font-size: 80%;
color: #999;
padding: 1px;
}
#FrogJSCaption{
text-align: left;
line-height: 140%;
}

Next, copy the scripts source code below and paste between the closing b:skin tag and the closing head tag.
<script type="text/javascript" src="http://onlinebiztutorials.googlepages.com/prototype.js"></script>
<script type="text/javascript" src="http://onlinebiztutorials.googlepages.com/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="http://onlinebiztutorials.googlepages.com/frog.js"></script>

Save the template. Then, click Settings> Formatting> Post Template. Add these lines into the post template box.

<div id="FrogJS">

<a href="images/1.jpg" title="Your Image Title">
<img src="images/1_thumb.jpg" alt="Your Image Description" />
</a>

<a href="images/2.jpg" title="Your Image Title">
<img src="images/2_thumb.jpg" alt="Your Image Description" />
</a>

<a href="images/3.jpg" title="Your Image Title">
<img src="images/3_thumb.jpg" alt="Your Image Description" />
</a>

</div>
Example:-

Save settings. You'll notice that anything you type into the box of "Post Template" will appear in your new post. (Note - All your images must go inside the DIV tag. Just add another DIV tag if you want to increase the number of images.)