Jump to content


Check out our Community Blogs

Register and join over 40,000 other developers!


Recent Status Updates

View All Updates

Photo
- - - - -

Creating a Slideshow using only Javascript, HTML and CSS part 1

innerHTML

  • Please log in to reply
7 replies to this topic

#1 Csabi

Csabi

    CC Resident

  • Advanced Member
  • PipPipPipPip
  • 60 posts

Posted 01 August 2010 - 02:45 PM

In this tutorial I will show you how to create a simple but effective Slideshow using only HTML, CSS and Javascript. The concept of this slideshow is simple: to change the image the content of a div will be changed using innerHTML. But, this is far enough for now, because I want to write this tutorial to be understood by everybody, with or without previous experience in Javascript.

Now, you probably ask "Where I need to write the code?" - Well you can write it in any HTML editor like Adobe Dreamweaver or you can write it simply in Notepad (this is what I will describe in this tutorial), because HTML and Javascript don`t require a compiler like C++.
Just open Notepad and write the following code in a blank file:
<html>
<head>
</head>
<body>

<!-- Code goes here -->

</body>
</html>
Now click on File >> Save as...
Posted Image
At the file name type in any name, but end it with .html, (e.g.: slideshow.html), and at Save as type select All files
To preview your page just open your file in a browser like Firefox or Internet Explorer - it should be a blank page.
It`s useful to preview you code from time to time, because if you get an error at the end you will need to recheck the whole code.

Now, you can remove the <!-- Code goes here --> line, just remember that the code needs to be placed between the <body> and </body> tags.

Creating the div`s
We need 3 div`s (a div is like and invisible box):
- one to hold the entire slideshow (the following 2 div`s) - call it slideshow (id="slideshow")
- another one to hold the images (one at a time) - slideshowimage
- and one to hold the control buttons (next, prev...) - slideshowcontrols

Note: All of these divs will have fixed width, I will use 400px, but you can use any size, because the script will detect any size, but make sure that you use the same width for all of them!
Use for all of the divs the overflow:hidden; option.
I recommend to use inline CSS (using the style="" tag)
Here is my code:
<div id="slideshow" style="width:400px;overflow:hidden;">
<div id="slideshowimage" style="width:400px;overflow:hidden;">
</div>
<div id="slideshowcontrols" style="width:400px;overflow:hidden;">
</div>
</div>


Start working with Javascript
Write the following code bellow the above code (before </body>):
<script type="text/javascript">
</script>
These are the starting and the ending tags of Javascript.

Now create between those tags function called changeimage and inside alert "ok":
<script type="text/javascript">
function changeimage(){
alert("ok");
}
</script>
Now we need something to trigger the function. The images will change on pressing a button: Prev, Next or by clicking the image, so first let`s add the two buttons to the slideshowcontrols div:
I will use a tags with onclick event:
<a onclick="changeimage();">Prev</a>
<a onclick="changeimage();">Next</a>
Save your file and click on one of the buttons - it should alert "ok".
If you have followed with attention each step your code should look like this:
<html>
<head>
</head>

<body>

<div id="slideshow" style="width:400px;overflow:hidden;">
<div id="slideshowimage" style="width:400px;overflow:hidden;">
</div>
<div id="slideshowcontrols" style="width:400px;overflow:hidden;">
<a onclick="changeimage();">Prev</a>
<a onclick="changeimage();">Next</a>
</div>
</div>

<script type="text/javascript">
function changeimage(){
alert("ok");
}
</script>

</body>
</html>
Well, I think this is enough for now, soon I will post the following parts, too. Sorry for my bad english, if you have any question just ask, I will help if I can.
  • 2
If you enjoy reading this discussion and are thinking about commenting, why not click here to register and start participating in under a minute?

#2 BlaineSch

BlaineSch

    CC Leader

  • Expert Member
  • PipPipPipPipPipPipPip
  • 1559 posts

Posted 01 August 2010 - 05:11 PM

Nice so far!

Few questions:

Why not use Notepad++? When I first started coding I used Notepad, I thought it was amazing since I could find PHP and Perl variables easy since the all started with the cash sign ($), but Notepad++ has syntax highlighting which comes in handy!
Notepad++ | 5.7

Also, are you going to make use of jQuery or mooTools?

It might be nice to post up an end result so we know what were aiming for. Maybe not the code but a screenshot or something.

Keep up the good work! +rep!
  • 0

#3 Csabi

Csabi

    CC Resident

  • Advanced Member
  • PipPipPipPip
  • 60 posts

Posted 02 August 2010 - 12:50 AM

Thanks for the +rep :thumbup:

When I`we coded it I`we used adobe dreamweaver, but I`we chose Notepad for the tutorial because everybody has Notepad already installed.
And no, I will not use jQuery or mooTools.
And I`we not posted an image about the finished slideshow because I`m thinking to add more features to it, like overlaying the control buttons on the image
  • 0
If you enjoy reading this discussion and are thinking about commenting, why not click here to register and start participating in under a minute?

#4 amrosama

amrosama

    CC Mentor

  • VIP Member
  • PipPipPipPipPipPipPipPip
  • 2765 posts

Posted 02 August 2010 - 03:02 AM

nice work. cant wait for the next part
+rep
  • 0
yo homie i heard you like one-line codes so i put a one line code that evals a decrypted one line code that prints "i love one line codes"
eval(base64_decode("cHJpbnQgJ2kgbG92ZSBvbmUtbGluZSBjb2Rlcyc7"));
www.amrosama.com | the unholy methods of javascript

#5 Csabi

Csabi

    CC Resident

  • Advanced Member
  • PipPipPipPip
  • 60 posts

Posted 02 August 2010 - 04:02 AM

Thanks, I`we submitted the second part already, I`m just waiting to be approved
  • 0
If you enjoy reading this discussion and are thinking about commenting, why not click here to register and start participating in under a minute?

#6 Csabi

Csabi

    CC Resident

  • Advanced Member
  • PipPipPipPip
  • 60 posts

Posted 13 August 2010 - 12:35 AM

Here is the second part: http://forum.codecal...s-part-2-a.html
  • 0
If you enjoy reading this discussion and are thinking about commenting, why not click here to register and start participating in under a minute?

#7 VisCode

VisCode

    CC Lurker

  • Just Joined
  • Pip
  • 2 posts
  • Programming Language:(Visual) Basic, Visual Basic .NET
  • Learning:C, C++, Objective-C, C#, Assembly

Posted 07 August 2012 - 02:44 PM

Thanks Man :nervous:
  • 0

#8 destineddesign

destineddesign

    CC Lurker

  • New Member
  • Pip
  • 5 posts
  • Location:california

Posted 18 September 2014 - 11:16 PM

I found the notepad ++ very good. It helps us to write code in an active way. Restrictions based on the suggestion of another program function  :thumbup1:


  • 0