Creating A Slideshow In Html

[AnimatixReels]

So I'm making a blog in Blogger, right?

Well, I know a bit of HTML and Javascript, but this is seriously kicking my head.

What's the prob, you ask?

I'm trying to create a custom slideshow on the side of my blog,where users can let alone and let it slide by or they can manually choose. I'm also trying to have where when you click the image, it links to the post.

I can't seem to solve this problem, and some of you guys(girls) do this for a living, so...

Any help?

[Diki]

Instead of reinventing the wheel you could use an existing library such as SlidesJS (requires jQuery).
However if you're adamant about doing it yourself: What have you tried so far that hasn't worked? Can you post the code?

[AnimatixReels]

At 10/3/12 10:20 PM, Diki wrote: Instead of reinventing the wheel you could use an existing library such as SlidesJS (requires jQuery).
However if you're adamant about doing it yourself: What have you tried so far that hasn't worked? Can you post the code?

Whoops. Didn't even notice this. (facepalm). Anyway, I'll post the code. (But SlideJS looks interesting...)

[NinoGrounds]

I use AnythingSlider

[NickJohnson]

According to my knowledge, To create blog in blogger you don't need to have very much knowledge of HTML. Just create it and get the HTML code.....

[AnimatixReels]

At 10/12/12 02:25 AM, NickJohnson wrote: According to my knowledge, To create blog in blogger you don't need to have very much knowledge of HTML. Just create it and get the HTML code.....

Not that easy when there isnt many templates, but thanks for the advice likewise! :)

[Flylikeapig]

This one is awesome!

http://twitter.github.com/bootstrap/javascript.html#carousel

[AnimatixReels]

At 11/17/12 03:01 AM, Flylikeapig wrote: This one is awesome!

http://twitter.github.com/bootstrap/javascript.html#carousel

Looks helpful... :)

[AnimatixReels]

At 10/3/12 10:20 PM, Diki wrote: Instead of reinventing the wheel you could use an existing library such as SlidesJS (requires jQuery).
However if you're adamant about doing it yourself: What have you tried so far that hasn't worked? Can you post the code?

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquer y.min.js"></script>
<script type="text/javascript" src="http://s3slider-original.googlecode.com/svn/trunk/s3Sli der.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#MBT-slider').s3Slider({
timeOut: 3000
});
});
</script>
<style>
#MBT-slider {
width: 590px; /* Keep it 20px-40PX greater than ACTUAL Image size */
height: 335px;
position: relative;
overflow: hidden;
margin-left: 0;
}
#MBT-sliderContent {
width: 590px;
position: absolute;
top: 0;
margin-left: 0;
}
.MBT-sliderImage {
float: left;
position: relative;
display: none; top: 0;
border:1px solid #ddd;
}
.MBT-sliderImage span {
position: absolute;
font: 10px/15px sans-serif,Arial, Helvetica;
padding: 10px 10px;
background-color: #000;
color: #fff;
filter:'alpha(opacity=70)';
-moz-opacity: .5;
-khtml-opacity: .5;
opacity: .5;
text-align:justify;
}
.MBT-sliderImage span a {
text-decoration:underline;
color:#FE6602;
}
.clear {
clear: both;
}
.top {
top: 0;
left: 0;
width: 570px !important;
height: 70px;
}
.bottom {
bottom: 0;
left: 0;
width: 570px !important;
height:90px;
}
.left {
left: 0;
top: 0;
width: 110px !important;
height: 335px;
}
.right {
right: 0;
bottom: 0;
width: 80px !important;
height: 319px;
}
</style>

<div id="MBT-slider">
<ul id="MBT-sliderContent">
<li class="MBT-sliderImage">
<img src="http://i1269.photobucket.com/albums/jj593/Cinematraxx/A lbum1%2010312/Donate.png" border="0" alt="Photobucket" />" />
<span class="right"><h3>Donate</h3>At least buy me some coffee! (I'm to young to drink beer).</span>
</li>
<li class="MBT-sliderImage">
<img src="http://i1269.photobucket.com/albums/jj593/Cinematraxx/A lbum1%2010312/FirstSTARt_zps3d91571e.png" border="0" alt="First Start, Album cover." />" />" />
<span class="left"><h3>First STARt</h3>Get my first album free!</span>
</li>

<div class="clear MBT-sliderImage"></div>
</ul>
</div>
<br/>

[FallingTears]

While I have written many custom JavaScript rotating banners (slideshows), I now use jQuery with jQuery cycle.