How To: Make a Gallery using Javascript & HTML

by Cristhian Bedon on March 22, 2009

This is my first tutorial written here, and what I would be showing you is how to make a Gallery using some basic HTML, CSS and Java. Before getting into this some basic skill of HTML and CSS would be good to have before hand. But this is a simple tutorial and I will break it down as much as I can.

Beginning

Well before the CSS, lets go and get out basic codes out there and setup a basic page:

<html>
<head>
<title>Gallery</title>
</head>
<body>

</body>
</html>

Now the CSS

We are going to start with naming the styles that we are going to use and adjust a few settings.

<style type="text/css">
.gallerycontroller{
width: 200px
}

.gallerycontent{
width: 640px;
height: 480px;
border: 1px solid black;
background-color: #FFFFCC;
padding: 3px;
display: block;
}
</style>

Ok so what we did was create div id’s “gallerycontroller” as well as “gallerycontent”. We also set up the parameters for the size of the images that we would be showing, width is set at 640 and the height is 480.
Also to separate the gallery from the rest of the page we added a 1px border all around it.

Javascript

Now for the javascript:

<script type="text/javascript">

var tickspeed=3000 //ticker speed in miliseconds (2000=2 seconds)
var displaymode="auto" //displaymode ("auto" or "manual"). No need to modify as form at the bottom will control it, unless you wish to remove form.

if (document.getElementById){
document.write('n')
}

var selectedDiv=0
var totalDivs=0

function getElementbyClass(classname){
partscollect=new Array()
var inc=0
var alltags=document.all? document.all.tags("DIV") : document.getElementsByTagName("*")
for (i=0; i
if (alltags[i].className==classname)
partscollect[inc++]=alltags[i]
}
}

function contractall(){
var inc=0
while (partscollect[inc]){
partscollect[inc].style.display="none"
inc++
}
}

function expandone(){
var selectedDivObj=partscollect[selectedDiv]
contractall()
selectedDivObj.style.display="block"
if (document.gallerycontrol)
temp.options[selectedDiv].selected=true
selectedDiv=(selectedDiv
if (displaymode=="auto")
autocontrolvar=setTimeout("expandone()",tickspeed)
}

function populatemenu(){
temp=document.gallerycontrol.menu
for (m=temp.options.length-1;m>0;m--)
temp.options[m]=null
for (i=0;i
var thesubject=partscollect[i].getAttribute("subject")
thesubject=(thesubject=="" || thesubject==null)? "HTML Content "+(i+1) : thesubject
temp.options[i]=new Option(thesubject,"")
}
temp.options[0].selected=true
}

function manualcontrol(menuobj){
if (displaymode=="manual"){
selectedDiv=menuobj
expandone()
}
}

function preparemode(themode){
displaymode=themode
if (typeof autocontrolvar!="undefined")
clearTimeout(autocontrolvar)
if (themode=="auto"){
document.gallerycontrol.menu.disabled=true
autocontrolvar=setTimeout("expandone()",tickspeed)
}
else
document.gallerycontrol.menu.disabled=false
}

function startgallery(){
if (document.getElementById("controldiv")) //if it exists
document.getElementById("controldiv").style.display="block"
getElementbyClass("gallerycontent")
totalDivs=partscollect.length
if (document.gallerycontrol){
populatemenu()
if (document.gallerycontrol.mode){
for (i=0; i
if (document.gallerycontrol.mode[i].checked)
displaymode=document.gallerycontrol.mode[i].value
}
}
}
if (displaymode=="auto" && document.gallerycontrol)
document.gallerycontrol.menu.disabled=true
expandone()
}

if (window.addEventListener)
window.addEventListener("load", startgallery, false)
else if (window.attachEvent)
window.attachEvent("onload", startgallery)
else if (document.getElementById)
window.onload=startgallery

</style>

Breaking the java code down:

So basically what this piece of code does is control the speed the images change at:

var tickspeed=3000 //ticker speed in miliseconds (eg: 2000=2 seconds)
var displaymode="auto"

Now this piece of code tells the java where to find the CSS for the gallery:

if (document.getElementById){
document.write('n')

The rest of the code is just defining the controller of the Gallery, and setting up on how it should start. Lets move on and try to get this down with, what is left is where to get the images to display.

The body

<body>

</body>

The following code does is create a div, using the div ID’s we created earlier and creates a place where the images you choose would be shown. The “subject” line would be a way for you to add a title to the photo so people could know what you are looking at.

Conclusion

At the end your code would be like the following:

<html>
<head>
<title>Gallery</title>
</head>

<style type="text/css">
.gallerycontroller{
width: 200px
}

.gallerycontent{
width: 640px;
height: 480px;
border: 1px solid black;
background-color: #FFFFCC;
padding: 3px;
display: block;
}

</style>

<script type="text/javascript">


var tickspeed=3000 
var displaymode="auto" 
if (document.getElementById){
document.write('n')
}

var selectedDiv=0
var totalDivs=0

function getElementbyClass(classname){
partscollect=new Array()
var inc=0
var alltags=document.all? document.all.tags("DIV") : document.getElementsByTagName("*")
for (i=0; i0;m--)
temp.options[m]=null
for (i=0;i

Blank form

Auto: Manual:
</body> </html>

Well that’s is pretty much it, it’s pretty plain but if you work on the CSS you can make this look very pretty. Here is a live demo of this at work. This would be a good way to show case your photos or just even a way for you to have your artwork display. The possibilities with this are end less. Comments are welcomed like always, and if you want to receive updates on post subscribe to the RSS feed.

{ 3 comments… read them below or add one }

Bogdan Pop April 5, 2009 at 7:19 pm

Quote from above: “Now for the java:”
That is javascript! Java is completely different programming language.

Reply

Cristhian Bedon April 6, 2009 at 11:53 pm

You have point here, but to clarify I just wrote Java – just to save my self a few keystrokes.

Reply

Gambling casino news June 3, 2009 at 5:48 am

Im loving this script, it does exactly what I wanted to do, and is easy for me to use. I have no java exerience, but I do know enough CSS.
However Ive got one question. So far, you click on the thumbnail, and it shows the larger versn. How can I have that larger version link to an even larger version (full resolution) in a separate window?

Reply

Leave a Comment

CommentLuv badge

Previous post:

Next post: