View Full Version : Simple Controls Gallery and IE7

01-27-2009, 09:41 PM
1) Script Title: Simple Controls Gallery

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/simplegallery.htm

I've implemented Simple Controls Gallery to show a client portfolio, but needed to swap out the gallery dynamically based on which gallery the user wants to see. I set this up in javascript using a switch to swap out the imagearray contents. It works perfectly in Firefox, Safari, and Opera, but is failing in IE7 with an "imagearray is null or not an object" -- referencing line 26 of the "simplegallery.js" file. I can paste the original demo code in outside of the switch, and it shows up with no issue in IE7. Any thoughts?

You can see the current code at:

Thanks for you help.

01-28-2009, 05:14 AM
My guess is something in you eval() statement is not sitting well with IE. It's hard to debug in this case without examining each of the strings you're feeding into eval() line by line. Regardless though, you should avoid using eval() altogether (as it's inefficient), and use use a function that in turn calls new simpleGallery() with the desired image array to show instead. Here's a fully working example:

<script type="text/javascript" src="simplegallery.js">

* Simple Controls Gallery- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more


<script type="text/javascript">

var imgcollection1=[
["http://i26.tinypic.com/11l7ls0.jpg", "http://en.wikipedia.org/wiki/Swimming_pool", "_new"],
["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", ""],
["http://i30.tinypic.com/531q3n.jpg", "", ""],
["http://i31.tinypic.com/119w28m.jpg", "", ""]

var imgcollection2=[
["http://i31.tinypic.com/119w28m.jpg", "", ""],
["http://i30.tinypic.com/531q3n.jpg", "", ""],
["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", ""],
["http://i26.tinypic.com/11l7ls0.jpg", "http://en.wikipedia.org/wiki/Swimming_pool", "_new"]

function showgallery(imgcollection){
mygallery=new simpleGallery({
wrapperid: "simplegallery1", //ID of main gallery container,
dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
imagearray: imgcollection,
autoplay: true,
persist: false,
pause: 2500, //pause between slides (milliseconds)
fadeduration: 500, //transition duration (milliseconds)
oninit:function(){ //event that fires when gallery has initialized/ ready to run
onslide:function(curslide, i){ //event that fires after each slide is shown
//curslide: returns DOM reference to current slide's DIV (ie: try alert(curslide.innerHTML)
//i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc)

showgallery(imgcollection1) //show imgcollection1 to start when page loads



<div id="simplegallery1"></div>

<a href="javascript:showgallery(imgcollection1)">Show collection 1</a> <a href="javascript:showgallery(imgcollection2)">Show collection 2</a>

As you can see, all you need to do is first define individual arrays containing the desired images to show within that collection, then feed it into function showgallery(). This function calls new SimpleGallery() with all the settings predefined except the image collection to show.

01-28-2009, 06:22 AM
Thanks for the quick response. I implemented your suggestion (definitely better) and it's still not working in IE7...reporting the same imagearray is null or not an object and referencing line 26 of simplegallery.js. I uploaded your example file and placed on the server at:


It works like a champ. So I'm stumped and still not sure what direction to go in.

01-28-2009, 06:50 AM
In IE you cannot have a trailing comma (highlighted red) at the end of an array:

var imgcollection1=[
["images/portfolio/concrete/f_concrete_1.jpg", "", ""],
["images/portfolio/concrete/f_concrete_2.jpg", "", ""],
["images/portfolio/concrete/f_concrete_3.jpg", "", ""],
["images/portfolio/concrete/f_concrete_4.jpg", "", ""],
["images/portfolio/concrete/f_concrete_5.jpg", "", ""],
["images/portfolio/concrete/f_concrete_6.jpg", "", ""],
["images/portfolio/concrete/f_concrete_7.jpg", "", ""],
["images/portfolio/concrete/f_concrete_8.jpg", "", ""],
["images/portfolio/concrete/f_concrete_9.jpg", "", ""],

All of your imgcollection# arrays have this problem. Remove that extra comma from each array and it should at least work. There could also be other problems.

01-28-2009, 08:14 AM
&#%@!!!!! It now works perfectly sans the comma. Guess I can't entirely blame Microsoft for this one. Thanks sincerely for your help! I'll be singing your praises.

04-10-2009, 05:28 PM
This is exactly what I wanted to do!! It is so cool!!

Is there anyway to modify the background color depending on which image array you are showing????

This website rocks!!