View Full Version : Creating a gallery

04-14-2011, 12:50 PM

Am looking for advice on what would be best.

I'm creating a site for a card designer/illustrator so there will be a few galleries included. In anyones opinion are galleries best produced in JavaScript or CSS?

Now I'm not good with JavaScript but have found a few gallery templates online and am learning CSS as I go, so again will probably look for inspiration online. But I'm just curious to read anyone thoughts and advice on the subject!

I don't need or want it to be to fancy. I feel JavaScipt would be better if I want it to be all swooshy and neat looking but maybe if I just create a grid with rollovers I'm thinking that will work. What are peoples thoughts?



Ps maybe back asking for help with either code if it doesnt work ha!!

04-14-2011, 01:08 PM
Like you hinted at, you can create a basic gallery with thumbnails and when you rollover them an enlargement appears nearby with just css and no javascript.

But if you want any other features then you'll probably have to use javascript, unless of course you want to use Flash.

This demo is a basic gallery where you can add as many pics and captions as you like to picData without having to touch the javascript and html.

When you click a thumbnail, its enlargement and caption fades in.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="http://www.w3.org/1999/xhtml">
<style type="text/css">
p {
clear: both;
#ulThumbs {
clear: both;
list-style-type: none
#ulThumbs li {
margin: 0px 10px 0px 0px;
padding: 0px 0px 0px 0px;
display: inline
#imgEnlargeContainer {
width: 50%;
float: left
#descContainer {
width: 50%;
float: right
#enlargeContainer {
opacity: 0;
<script type="text/javascript">
var picData = [
['num1.jpg','description 1'],
['num2.jpg','description 2'],
['num3.jpg','description 3'],
['num4.jpg','description 4']
var thumbMaxWidth = 100;
var thumbMaxHeight = 100;
var fadeTimer;
function showEnlargement(picNum){
var nextThumbIndex = (picNum+1 > picData.length-1)? 0 : picNum+1;
curOpac = 0;
imgEnlargeO.src = picO[picNum].src;
descContainerO.innerHTML = picData[picNum][1];
fadeTimer = setInterval(setOpacity,100);
var curOpac = 0;
var speed = 0.2;
function setOpacity() {
curOpac = curOpac + speed;
if(curOpac <= 10){
function setOpacityCSS(){
if(typeof(enlargeContainerO.style.opacity) == 'string'){
enlargeContainerO.style.opacity = curOpac/10;
} else {
enlargeContainerO.style.filter = 'alpha(opacity=' + curOpac*10 + ')';
enlargeContainerO = document.getElementById('enlargeContainer');
imgEnlargeO = document.getElementById('imgEnlarge');
descContainerO = document.getElementById('descContainer');
//load the images into an Image object
picO = new Array();
for(i=0; i < preloadedImgs.length; i++){
picO[i] = new Image();
picO[i].src = preloadedImgs[i].src;
//create the thumbnails
var ulThumbsO = document.getElementById('ulThumbs');
var thumbDims = new Array();
for(i=0; i < picO.length; i++){
liO = document.createElement('li');
imgO = document.createElement('img');
imgO.src = picO[i].src;
thumbDims = calcNewDimensions(picO[i].width, picO[i].height, thumbMaxWidth, thumbMaxHeight);
imgO.width = thumbDims['width'];
imgO.height = thumbDims['height'];
imgO.num = i;
//set a default random enlargement and description
var picNum = Math.floor(Math.random()*picData.length);
function calcNewDimensions(width, height, maxWidth, maxHeight){
newDims = new Array();
var xRatio = maxWidth / width;
var yRatio = maxHeight / height;
//calculate the new width and height
if(width <= maxWidth && height <= maxHeight) { //image does not need resizing
newDims["width"] = width;
newDims["height"] = height;
} else if(xRatio * height < maxHeight) {
newDims["height"] = Math.round(xRatio * height);
newDims["width"] = maxWidth;
} else {
newDims["width"] = Math.round(yRatio * width);
newDims["height"] = maxHeight;
return newDims;
<!-- preload the images so we can use their actual width and height property
to scale the thumbnails -->
<div id="preloadedPics" style="display: none"></div>
<script type="text/javascript">
for(i=0; i < picData.length; i++){
var newImg = document.createElement('img');
newImg.src = picData[i][0];
newImg.alt = picData[i][1];
preloadedImgs = document.getElementById('preloadedPics').getElementsByTagName('img');
<!-- --------------------End of image preloads ------------------ -->
<div id="enlargeContainer">
<div id="imgEnlargeContainer">
<img id="imgEnlarge" src="" alt="" />
<div id="descContainer"></div>
<p>Click on a thumbnail</p>
<ul id="ulThumbs"></ul>

04-14-2011, 05:23 PM
Thanks for advice Bullant, appreciate it!

Javascript does scare me a little as i can never get it to validate, even with the advice I have been given in a previous JavaScript thread. So I think I will try and stick to CSS at the moment and explore the other options when I'm abit more confident.

I already have some code on my page which I can convert to sue as a gallery but is helpful seeinf other codes and seeing what works best.

Just need to get the content off the person I'm making site for now!! GAHHH!!!


04-15-2011, 01:22 AM
you're welcome :)

04-15-2011, 01:47 AM
Just need to get the content off the person I'm making site for now!! GAHHH!!!

hahaha welcome to the world of freelance webdesign!