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.
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>
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.
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>
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.
<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.
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:
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.
April 5, 2009 7:19 pm Bogdan Pop
2009-04-06 23:53:55 Cristhian Bedon http://www.cbedon.com