Image Gallery Into Your Blog Post

image gallery
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

width: 700px;
height: 600px;
margin: 0 auto;
text-align: right;
font-size: 80%;
color: #999;
padding: 1px;
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 href="images/2.jpg" title="Your Image Title">
<img src="images/2_thumb.jpg" alt="Your Image Description" />

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



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.)


Kim said...

this looks great ..
I'm going to try it on my TAD...
thanks !!!!

Is said...

@Kim, make sure your frogjs's width is same as your post-container which is 505px. Then, adjust the image size accordingly :)

DJ said...

Hi it would be very nice if you incorporate live examples in your post ..:):D

Post a Comment

1. Comments posted must be accompanied by names or pseudonyms.
2. Anonymous posting and those containing profanities will be rejected.
3. Comments are moderated due to spam problems. I have to approve the comment before it will show up.

:)) ;)) ;;) :D ;) :p :(( :) :( :X
=(( :-o :-/ :-* :| 8-} :)] :-t b-( :-L