>
JavaScript >
Experiment 1 : Simple JS Gallery

9 December, 04:49 pm

I’m always crap at promoting my own stuff. I’d guess that most people involved in web development have a load of widgets, snippets or prototypes that they’ve created but while they might be interesting they aren’t really big enough to shout about.

Anyway a while ago I put two of my HTML/CSS/Javascript experiments up on this site. I then mostly forgot about them. One of them – the simple JavaScriptpt gallery – was getting a lot of hits from people searching on Google: it’s currently by far the most visited page on this site. Eventually the inevitable happened and some asked for help using the script, so I reckon it’s about time I had a channel to both promote and recieve feedback on these experiments. I’ll be writing a brief post about each experiment as I put the up.

But for now, here’s the my take on a Simple Unobtrusive Gallery Slideshow type thing

ps. I’ve moved the Barak’s comment to here from it’s original place

Comments:

  1. Barak Levy replied on Dec 7, 09:06 am : #

    Hello,
    I am trying to use the simple javascript gallery you wrote, but i need to rplace the previuse and next image links with numbers, like: 1 | 2 | 3 |... depend on how many images are in the gallery. the numbers need to be links to the relevant image…
    can you help me?

  2. Ed Everett replied on Dec 9, 05:09 pm : #

    Hi Barak,

    I’m glad you find the script useful.

    To get a list of links like that, in the javascript file replace lines 72 to 97 with: 

    var controlList = document.createElement(‘ul’);
	
	var counter = 0;
	for(var i = 0; i<gSet.imgArray.length; i++)
	{
			counter++
		var img = gSet.imgArray[i]
		var link = document.createElement(‘a’)
			link.innerHTML = (gSet.titles) ? img.title : counter;
			link.href = ‘#’;
			link.onclick = function(){changeImage(this);return false;}
		var li = document.createElement(‘li’)
			li.appendChild(link)
			controlList.appendChild(li);
	}
	
	function changeImage(that)
	{
		var links = that.parentNode.parentNode.getElementsByTagName(‘li’);
		var position;
		for(var j=0;j<links.length;j++)
			if(that.parentNode == links[j])		
				position = j;			
		buildg(null,null,position);
		
	}
	
	//add the new elements into the DOM.
	gDisplay.appendChild(gSet.imgArray[imgNum]); //add in an image then the control links
	gDisplay.appendChild(controlList);
  3. Arnie replied on Dec 9, 11:14 pm : #

    Hi Ed!

    Good stuff. Hope to see more.

    The link to Simple Unobtrusive Gallery/Slideshow type thing you have in your post is broken.

    Arnie

  4. Ed Everett replied on Dec 10, 12:31 pm : #

    Thanks Arnie,

    The link is fixed. I hope your new job is working out.

    Ed.

  5. Barak Levy replied on Dec 10, 01:24 pm : #

    thank you!
    i learned a lot about javascript gallery from your code and from some other i found and i made this page:
    http://www.tween-id.com/develop/pitsou/HayfaPenthouse.html
    and you can enlarge the images…
    the only problem is that in IE 7 this page sometimes got stuck…
    In FireFoX, and IE6 – it is fine
    Any ide?

  6. Aboo Bolaky replied on Dec 13, 01:31 pm : #

    Dude.. the current page layout breaks in IE 7

  7. C.J. replied on Mar 2, 09:27 pm : #

    Hey A.B. give the guy a break, he’s busy working on a favicon.

  8. wissenwill replied on Mar 7, 03:34 pm : #

    is there a way to use this gallery with lightbox?

  9. hsuueu replied on Jun 25, 11:23 pm : #

    CLlJKp eecsnkrlcgzj, [url=http://fezpwfuouasp.com/]fezpwfuouasp[/url], [link=http://shzbwtxblrsq.com/]shzbwtxblrsq[/link], http://qayxleqsfjgk.com/

**************** notes test