I feel like talking javascript because it's a fun and useful language to learn for front end web "stuff", or server-side if you run node.js, so here's a javascript thread for some basics and I'll go through a couple examples with an explanation.
To start lets make a simple dynamic javascript gallery from scratch consisting of 3 parts: CSS stylesheet, Javascript and XHTML.
You should make a Folder and inside make 2 text files called style.css, gallerytut.html, and another folder called "images", to hold images. I do it right on my bluehost server and open each with the "code editor"
You'll need some images to put in the images folder to populate the gallery with. I'd resize each to only be 1200px or so max, save for web in photoshop so it's small.
Since javascript doesn't have access to the file system the way php, java, c#, etc you'll need to write down the names of each, OR use a naming convention like mytopic1, mytopic2, etc so you can loop through each and replace the number with the index in the loop.
The stylesheet style.css:
It seems I can't embed the entire JS because it tries to run it even in CODE or PHP quotes it says access denied to site lol
For each category in the gallery I simply make a new object, the images become a property of the category object.
The beginning part of the gallery in between the <head></head>
goes like this:
below that before the closing script tag you need to add the constructor but the site won't let me embed it so here's an image: OR VIEW SOURCE HERE
And you can go here and "view source" and copy it: js (I left it very simple)
So MakeGallery is passed the object we want to make, in our case PigGameImgs, AnimalFarmImgs, and BlenderImgs declared before, with the name, img array, and heading.
The MakeGallery Constructor makes a new object called Gallery and assigns it's properties based off the object passed into it, and declares a couple methods as properties. Then returns it.
Before returning the Gallery Object, it calls it's method Gallery.populate() to loop through the array it has as yet another property of the object.
Once it's populated the gallery and returns it, the rest of the code has to do with the div that will be toggled to show a larger version of whichever image is selected, and two functions call the methods from Gallery to "populate" or "depopulate" the images.
The rest of the html should be self explanatory, simply view source, copy it all into a text editor and save it as .html in the folder that contains the stylesheet and images folder, then open it in the browser.
To start lets make a simple dynamic javascript gallery from scratch consisting of 3 parts: CSS stylesheet, Javascript and XHTML.
You should make a Folder and inside make 2 text files called style.css, gallerytut.html, and another folder called "images", to hold images. I do it right on my bluehost server and open each with the "code editor"
You'll need some images to put in the images folder to populate the gallery with. I'd resize each to only be 1200px or so max, save for web in photoshop so it's small.
Since javascript doesn't have access to the file system the way php, java, c#, etc you'll need to write down the names of each, OR use a naming convention like mytopic1, mytopic2, etc so you can loop through each and replace the number with the index in the loop.
The stylesheet style.css:
Code:
body{
background:#191919;
}
.logo{
border:solid 1px silver;
width:13.5em;
min-height:1em;
padding:0.5em;
font-size:1em;
border:solid 1px silver;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
}
.logo:hover{
border:solid 1px silver;
min-height:1em;
padding:.5em;
color:white;
cursor:pointer;
background:#2a2828;
font-size:1em;
border:solid 1px #2a2828;
box-shadow: inset -.5px 1px 2px 3px gray;
}
#navigation{
margin-left:1em;
height:1em;
}
/* DIVS FLOATING RIGHT*/
#wrapper .shadowClassRight{
float:right;
clear:right;
margin-right:9%;
box-shadow: 2px 2px 10px 3px #888;
-moz-box-shadow:2px 2px 10px 3px #888;
-webkit-box-shadow: 2px 2px 10px 3px#888;
}
body #navigation a{
z-index:25;
margin-left:1em;
padding-left:0.2em;
padding-right:0.2em;
margin-top:0.1em;
height:1em;
color:#191919;
background:#FFF056;
text-decoration:none;
font-size:1.5em;
-webkit-border-radius: 3px;
-moz-border-radius: 8px;
border-radius: 3px;
}
#navigation a:hover{
margin-left:1em;
height:1em;
background:#191919;
color:white;
}
#bannerTop{
border-right:solid 5px #DFE2DB;
border-left:solid 2px #DFE2DB;
border-top:solid 1px #DFE2DB;
border-bottom:solid 3px #DFE2DB;
font-family:Arial, Helvetica, sans-serif;
background: white;
width:96.5%;
padding:1em;
margin-bottom:0.15em;
-webkit-border-radius: 9px;
-moz-border-radius: 9px;
border-radius: 9px;
box-shadow: 0px 0px 15px 5px black;
-moz-box-shadow: 0px 0px 15px 5px black;
-webkit-box-shadow: 0px 0px 15px 5px black;
}
body p{
margin-left:0em;
font-size:1.2em;
}
body img{
margin-left: 0em;
margin-right:3em;
margin-top:1em;
margin-bottom:1em;
max-width:100%;
}
body ul{
font-size:1.5em;
}
body h2{
margin-left:0em;
}
body em{
color:red;
margin-top:1em;
}
#wrapper{
width:80%;
margin-left:10%;
float:left;
-webkit-border-radius: 3px;
-moz-border-radius: 8px;
border-radius: 3px;
}
#aContent{
border-right:solid 5px #DFE2DB;;
border-left:solid 3px #DFE2DB;;
border-top:solid 3px #DFE2DB;;
border-bottom:solid 3px #DFE2DB;;
width:90%;
position:relative;
float:left;
margin-top:0.9em;
background:white;
padding:5%;
font-family:Arial, Helvetica, sans-serif;
-webkit-border-radius: 9px;
-moz-border-radius: 9px;
border-radius: 9px;
box-shadow: 0px 3px 15px 5px black;
-moz-box-shadow: 0px 3px 15px 5px black;
-webkit-box-shadow: 0px 3px 15px 5px black;
}
.innerContent{
margin-left:4%;
}
.innerContent div{
width:30%;
padding:1em;
margin:.5em;
border:solid 1px gray;
-webkit-border-radius: 9px;
-moz-border-radius: 9px;
border-radius: 9px;
}
.innerContent img{
max-width:100%;
}
#tags1{
float:left;
width:100%;
}
#fter{
float:left;
background:white;
margin-top:1em;
min-width:25%;
width:100%;
border-right:solid 5px #DFE2DB;
border-left:solid 2px #DFE2DB;
border-top:solid 1px #DFE2DB;
border-bottom:solid 3px #DFE2DB;
-webkit-border-radius: 9px;
-moz-border-radius: 9px;
border-radius: 9px;
box-shadow:0px 0px 15px 5px black;
-moz-box-shadow: 0px 0px 15px 5px black;
-webkit-box-shadow:0px 0px 15px 5px black;
}
a img{
border:none;
}
#pfs div:hover, #youngAnimalGame div:hover{
cursor:pointer;
background:#2a2828;
color:white;
border:solid 0px #FFF056;
}
#pfs div, #youngAnimalGame div{
padding:0px;
max-width:175px;
max-height:175px;
float:left;
clear:right;
min-width:175px;
min-height:175px;
border:solid 0px gray;
}
#pfs img, #youngAnimalGame img{
height:145px;
width:175px;
}
#pfs pre, #youngAnimalGame pre{
margin-left:1.5em;
margin-bottom:-1em;
margin-top:-0.2em;
}
#imageBox{
z-index:20;
padding:3em;
position:absolute;
left:-7%;
top:-15%;
min-width:60%;
min-height:20em;
max-width:1000px;
background:gray;
visibility:hidden;
border:solid 1px #FFF056;
border-radius: 9px;
}
#closeBox{
padding:0.3em;
font-size:1.5em;
margin-bottom:-.3em;
cursor:pointer;
background:silver;
position:absolute;
top:-10%;
left:-10%;
z-index:100;
min-width:45px;
height:30px;
visibility:hidden;
-webkit-border-radius: 9px;
-moz-border-radius: 9px;
border-radius: 9px;
}
#closeBox:hover{
background:#2a2828;
color:white;
}
#sidePanel{
max-width:10em;
min-height:10em;
border-top:solid 1px silver;
border-bottom:solid 1px silver;
border-left:solid 3px silver;
border-right:solid 2px silver;
padding:1em;
position:absolute;
top:50%;
z-index:2;
right:1em;
background:#DFE2DB;
border-radius: 15px;
}
#sidePanel a{
padding:0.2em;
margin-top:.5em;
float:left;
width:100%;
color:#191919;
background:#FFF056;
text-decoration:none;
-webkit-border-radius: 3px;
-moz-border-radius: 8px;
border-radius: 5px;
border:solid 1px silver;
}
#sidePanel a:hover{
background:gray;
cursor:pointer;
color:white;
}It seems I can't embed the entire JS because it tries to run it even in CODE or PHP quotes it says access denied to site lol
For each category in the gallery I simply make a new object, the images become a property of the category object.
The beginning part of the gallery in between the <head></head>
goes like this:
Code:
var PigGameImgs = { //Pig Fart Supreme game
name:'youngAnimalGame',
imgs: ['pfs1_orig.jpg','pfs2_orig.jpg','pfsConcept_orig.jpg','pfs2_orig.jpg','pfs1_orig.jpg','pigjumps_orig.jpg'],
heading: 'pig fart supreme!'
}
var AnimalFarmImgs = { //animal game object/category
name:'youngAnimalGame',
imgs: ['animalDesert_orig.jpg', 'animalStartMenu_orig.jpg', 'desert1_orig.jpg','brickTown_orig.jpg', 'ridersfieldmap_orig.jpg', 'taming1_orig.jpg', 'animalStable_orig.jpg', 'pigtents_orig.jpg'],
heading: ' Riders Field: '+'\n'+'Taming + Riding!'
}
var BlenderImgs = { //Blender Screenshots
name:'youngAnimalGame',
imgs: ['heightmap_orig.jpg','UOmaporig.jpg','canyon_orig.jpg','racecourse_orig.jpg','rpgLevel_orig.jpg','village_orig.jpg'],
heading: ' Blender Modeling'
}below that before the closing script tag you need to add the constructor but the site won't let me embed it so here's an image: OR VIEW SOURCE HERE
And you can go here and "view source" and copy it: js (I left it very simple)
So MakeGallery is passed the object we want to make, in our case PigGameImgs, AnimalFarmImgs, and BlenderImgs declared before, with the name, img array, and heading.
The MakeGallery Constructor makes a new object called Gallery and assigns it's properties based off the object passed into it, and declares a couple methods as properties. Then returns it.
Before returning the Gallery Object, it calls it's method Gallery.populate() to loop through the array it has as yet another property of the object.
Once it's populated the gallery and returns it, the rest of the code has to do with the div that will be toggled to show a larger version of whichever image is selected, and two functions call the methods from Gallery to "populate" or "depopulate" the images.
The rest of the html should be self explanatory, simply view source, copy it all into a text editor and save it as .html in the folder that contains the stylesheet and images folder, then open it in the browser.