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:
{ 3 comments… read them below or add one }
Quote from above: “Now for the java:”
That is javascript! Java is completely different programming language.
You have point here, but to clarify I just wrote Java – just to save my self a few keystrokes.
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?