2008-09-19

Slideshow Into Your Blog Post

This script takes list of images and creates a smooth scrolling photo gallery into your blog post i.e instantly create an image gallery by writing just few lines of HTML. It will also create pagination to allow you to flow through your photos.

This tutorial will help you quickly install and configure the script on your blog. Before we move on, I should highlight that all the images within a single gallery must have the same width/height ( 370x250 in pixels). But if you can't live without declaring your images size, this script will use your declared dimensions.

Login to your Dashboard> Layout> Edit Html. Check the Expand Widget Template check box. Copy here 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

Next, copy the script 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/contentslider.js"></script>
Scroll down to your closing Body tag, place this script immediately before it.

<script type="text/javascript">

featuredcontentslider.init({
id: "slider2", //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: ["Previous", "Next"], //labels for "prev" and "next" links. Set to "" to hide.
revealtype: "click", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
enablefade: [true, 0.2], //[true/false, fadedegree]
autorotate: [false, 3000], //[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>

Save the template. Then, click on "Posting". Add these lines into your post editor.
<div id="slider2" class="sliderwrapper">

<div class="contentdiv">
<img src="http://i34.servimg.com/u/f34/11/94/91/73/pic110.jpg"/>
</div>

<div class="contentdiv">
<img src="http://i34.servimg.com/u/f34/11/94/91/73/pic213.jpg"/>
</div>

<div class="contentdiv">
<img src="http://i34.servimg.com/u/f34/11/94/91/73/pic310.jpg"/>
</div>
</div>
<div id="paginate-slider2" class="pagination">
<a href="#" class="toc">Page 1</a> <a href="#" class="toc anotherclass">Page 2</a> <a href="#" class="toc">Page 3</a> <a href="#" class="prev" style="margin-left: 10px"><</a> <a href="#" class="next">></a>
</div>

Publish your post and you're done!
(Note - Change the image urls to yours. Add another Div tag if you want to add more photos but you also need to add this code <a href="#" class="toc">Page 4</a> into the pagination script.)

1 comments:

skin tags said...

I like the photo its very adventurous, but I am expecting that there are page two and three but when I click them there are no other photos posted.

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