Hello all,
My developer friend told me of this site, and I'm hoping that perhaps someone might be able to help me solve a problem that I'm running into on any and all browsers while building the portfolio section of this website for my friend at her website which is (sorry for only being able to link one thing.... www - jennaschweitzer - dot - com
So as you can see in the above link, I have been putting together a fairly simple, "one-page portfolio" for a graphic designer friend of mine. The goal was to integrate a horizontally scrolling carousel showcasing her 8 different projects (for which I used the "Anything Slider" created by Chris Coyier of CSS-Tricks, but then within the 8 main pieces, I've tried to implement this plug-in called "simple gallery" ( http://www.dynamicdrive.com/dynamicindex4/simplegallery.htm ) as a way to showcase alternate photos of the same main piece.
For the most part this worked ok. I was able to integrate the anything slider, but while reading the documentation on how to incorporate multiple "galleries" within the same page using the "simplegallery" plug-in, the simplegallery notes said the following:
To define a new Simple Controls Gallery, you should call new simpleGallery() in the HEAD section of your page with the supported parameters:
var 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: [
["pool.jpg",
"http://en.wikipedia.org/wiki/Summer",
"_new", ""], ["cave.jpg",
"http://en.wikipedia.org/wiki/Winter",
"", ""], ["fruits.jpg", "", "", ""],
["autumn.jpg", "", "", ""] ],
autoplay: [true, 2500, 2],
//[auto_play_boolean,
delay_btw_slide_millisec,
cycles_before_stopping_int] persist:
false, fadeduration: 500,
//transition duration (milliseconds)
oninit:function(){ //event that fires
when gallery has initialized/ ready to
run //Keyword "this": references
current gallery instance (ie: try
this.navigate("play/pause") },
onslide:function(curslide, i){ //event
that fires after each slide is shown
//Keyword "this": references current
gallery instance //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) } })
First and foremost, note the "mygallery" variable in bold red- this should be an arbitrary but unique variable that identifies this instance of the Gallery on your page. For multiple instances, use a different variable name each time.
Taking this into account, I created 8 unique instances of the gallery, for the "alternate view" galleries of the eight portfolio pieces. Here is the code I put at the bottom of the simplegallery.js file (you'll see it's all fairly straightforward, just adding a unique number to each one, and chaging the photo url's, but otherwise identical.
var mygallery=new simpleGallery({
wrapperid: "simplegallery1", //ID of main gallery container,
dimensions: [750, 515], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
imagearray: [
["images/mod_dog.jpg", "", "", ""],
["images/mod_dog2.jpg", "", "", ""],
["images/mod_dog3.jpg", "", "", ""]
],
autoplay: false, //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
oninit:function(){ //event that fires when gallery has initialized/ ready to run
//Keyword "this": references current gallery instance (ie: try this.navigate("play/pause"))
},
onslide:function(curslide, i){ //event that fires after each slide is shown
//Keyword "this": references current gallery instance
//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)
}
})
var mygallery2=new simpleGallery({
wrapperid: "simplegallery2", //ID of main gallery container,
dimensions: [750, 515], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
imagearray: [
["images/custo.jpg", "", "", ""],
["images/custo2.jpg", "", "", ""],
["images/custo3.jpg", "", "", ""]
],
autoplay: false, //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
oninit:function(){ //event that fires when gallery has initialized/ ready to run
//Keyword "this": references current gallery instance (ie: try this.navigate("play/pause"))
},
onslide:function(curslide, i){ //event that fires after each slide is shown
//Keyword "this": references current gallery instance
//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)
}
})
var mygallery3=new simpleGallery({
wrapperid: "simplegallery3", //ID of main gallery container,
dimensions: [750, 515], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
imagearray: [
["images/shins.jpg", "", "", ""],
["images/shins2.jpg", "", "", ""],
["images/shins3.jpg", "", "", ""],
["images/shins4.jpg", "", "", ""]
],
autoplay: false, //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
oninit:function(){ //event that fires when gallery has initialized/ ready to run
//Keyword "this": references current gallery instance (ie: try this.navigate("play/pause"))
},
onslide:function(curslide, i){ //event that fires after each slide is shown
//Keyword "this": references current gallery instance
//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)
}
})
var mygallery4=new simpleGallery({
wrapperid: "simplegallery4", //ID of main gallery container,
dimensions: [750, 515], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
imagearray: [
["images/tamara.jpg", "", "", ""],
["images/tamara2.jpg", "", "", ""],
["images/tamara3.jpg", "", "", ""]
],
autoplay: false, //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
oninit:function(){ //event that fires when gallery has initialized/ ready to run
//Keyword "this": references current gallery instance (ie: try this.navigate("play/pause"))
},
onslide:function(curslide, i){ //event that fires after each slide is shown
//Keyword "this": references current gallery instance
//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)
}
})
var mygallery5=new simpleGallery({
wrapperid: "simplegallery5", //ID of main gallery container,
dimensions: [750, 515], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
imagearray: [
["images/affinity.jpg", "", "", ""],
["images/affinity2.jpg", "", "", ""],
["images/affinity3.jpg", "", "", ""]
],
autoplay: false, //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
oninit:function(){ //event that fires when gallery has initialized/ ready to run
//Keyword "this": references current gallery instance (ie: try this.navigate("play/pause"))
},
onslide:function(curslide, i){ //event that fires after each slide is shown
//Keyword "this": references current gallery instance
//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)
}
})
var mygallery6=new simpleGallery({
wrapperid: "simplegallery6", //ID of main gallery container,
dimensions: [750, 515], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
imagearray: [
["images/carbonfund.jpg", "", "", ""],
["images/carbonfund2.jpg", "", "", ""],
["images/carbonfund3.jpg", "", "", ""]
],
autoplay: false, //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
oninit:function(){ //event that fires when gallery has initialized/ ready to run
//Keyword "this": references current gallery instance (ie: try this.navigate("play/pause"))
},
onslide:function(curslide, i){ //event that fires after each slide is shown
//Keyword "this": references current gallery instance
//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)
}
})
var mygallery7=new simpleGallery({
wrapperid: "simplegallery7", //ID of main gallery container,
dimensions: [750, 515], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
imagearray: [
["images/solyluna.jpg", "", "", ""],
["images/solyluna2.jpg", "", "", ""],
["images/solyluna3.jpg", "", "", ""]
],
autoplay: false, //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
oninit:function(){ //event that fires when gallery has initialized/ ready to run
//Keyword "this": references current gallery instance (ie: try this.navigate("play/pause"))
},
onslide:function(curslide, i){ //event that fires after each slide is shown
//Keyword "this": references current gallery instance
//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)
}
})
var mygallery8=new simpleGallery({
wrapperid: "simplegallery8", //ID of main gallery container,
dimensions: [750, 515], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
imagearray: [
["images/jazzfest.jpg", "", "", ""],
["images/jazzfest2.jpg", "", "", ""]
],
autoplay: false, //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
oninit:function(){ //event that fires when gallery has initialized/ ready to run
//Keyword "this": references current gallery instance (ie: try this.navigate("play/pause"))
},
onslide:function(curslide, i){ //event that fires after each slide is shown
//Keyword "this": references current gallery instance
//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)
}
})
The problem that currently happens is in the display of "simplegallery8", which is presently the one on [www.jennaschweitzer.com, labeled "jazz fest". In troubleshooting though, I found that whatever gallery of photos was last in the order, would display this same loading error. The photos flicker in for a millisecond and then an off-white color just covers up the whole screen. Does anyone have any insight as to what might be causing this. Admittedly, I am quite a novice, but since the only modifications to the code I made were to add multiple gallery instances (and i tried to follow the instructions on the plug-in information page), and to use it in conjunction with the anythingslider plug-in that I found at css-tricks.com, I thought perhaps it was one of these two issues that I lacked a full understanding of.
Any help solving my problem is greatly appreciated!!!!
-Bob