Be a Supporter!

Creating A Slideshow In Html

  • 999 Views
  • 10 Replies
New Topic
AnimatixReels
AnimatixReels
  • Member since: Jun. 2, 2012
  • Offline.
Forum Stats
Member
Level 03
Artist
Creating A Slideshow In Html 2012-10-03 20:35:28

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?


"There never was a master that wasn't a student...

Diki
Diki
  • Member since: Jan. 31, 2004
  • Offline.
Forum Stats
Moderator
Level 13
Programmer
Response to Creating A Slideshow In Html 2012-10-03 22:20:40

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
AnimatixReels
  • Member since: Jun. 2, 2012
  • Offline.
Forum Stats
Member
Level 03
Artist
Response to Creating A Slideshow In Html 2012-10-09 12:21:24

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


"There never was a master that wasn't a student...

NinoGrounds
NinoGrounds
  • Member since: Nov. 28, 2005
  • Offline.
Forum Stats
Member
Level 19
Programmer
Response to Creating A Slideshow In Html 2012-10-10 08:08:54

I use AnythingSlider

NickJohnson
NickJohnson
  • Member since: Aug. 30, 2012
  • Offline.
Forum Stats
Member
Level 01
Blank Slate
Response to Creating A Slideshow In Html 2012-10-12 02:25:24

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
AnimatixReels
  • Member since: Jun. 2, 2012
  • Offline.
Forum Stats
Member
Level 03
Artist
Response to Creating A Slideshow In Html 2012-11-16 23:01:42

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! :)


"There never was a master that wasn't a student...

Flylikeapig
Flylikeapig
  • Member since: Nov. 9, 2012
  • Offline.
Forum Stats
Member
Level 01
Blank Slate
Response to Creating A Slideshow In Html 2012-11-17 03:01:30

This one is awesome!

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

AnimatixReels
AnimatixReels
  • Member since: Jun. 2, 2012
  • Offline.
Forum Stats
Member
Level 03
Artist
Response to Creating A Slideshow In Html 2012-11-26 18:26:56

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

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

Looks helpful... :)


"There never was a master that wasn't a student...

AnimatixReels
AnimatixReels
  • Member since: Jun. 2, 2012
  • Offline.
Forum Stats
Member
Level 03
Artist
Response to Creating A Slideshow In Html 2012-11-26 18:40:28

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/>


"There never was a master that wasn't a student...

FallingTears
FallingTears
  • Member since: Nov. 28, 2012
  • Offline.
Forum Stats
Member
Level 03
Programmer
Response to Creating A Slideshow In Html 2012-11-28 19:56:08

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


BBS Signature