Layer error: Image.reduceRegion: Too many pixels in the region. Found 13758042614, but maxPixels allows only 10000000. E - google-earth-engine

Hi I'm new to google earth engine so I am struggling with a (probably) quite basic error.
Here is my code - the issue is with the Sunglint Corrected layer.
I'm trying to correct sentinel-2 images for Sunglint so that I can remote sense seagrass.
I think the issue is something to do with incorrect scaling, although I'm very unsure how to fix this. Plz help!
var dataset = ee.ImageCollection('COPERNICUS/S2_SR')
.filterDate('2021-05-01', '2021-09-30')
.filter(ee.Filter.lt('CLOUDY_PIXEL_PERCENTAGE',20))
.filterBounds(roi)
.select(['B2','B3','B4','B1', 'B8']);
var rgbVis = {
min: 0.0,
max: 1000,
bands: ['B3', 'B2', 'B4'],
};
Map.addLayer(dataset, rgbVis, 'Filtered Collection');
var mosaic = dataset.mosaic();
var medianComposite = dataset.min();
Map.addLayer(medianComposite, rgbVis, 'Median Composite', 0);
var hansenImage = ee.Image('UMD/hansen/global_forest_change_2015');
var datamask = hansenImage.select('datamask');
var mask = datamask.eq(2);
var maskedComposite = medianComposite.updateMask(mask);
Map.addLayer(maskedComposite, rgbVis, 'masked');
Map.addLayer(maskedComposite, {
bands: ['B4', 'B3', 'B2',],
min: 0,
max: 1000
}, 'BOA');
var B2 = maskedComposite.select(['B8', 'B2']);
var B3 = maskedComposite.select(['B8', 'B3']);
var B4 = maskedComposite.select(['B8', 'B4']);
var lfitB2 = B2.reduceRegion({
reducer: ee.Reducer.linearFit(),
geometry: glint,
scale: 10,
//maxPixels: 1000,
//bestEffort: true
});
var lfitB3 = B3.reduceRegion({
reducer: ee.Reducer.linearFit(),
geometry: glint,
scale: 10,
});
var lfitB4 = B4.reduceRegion({
reducer: ee.Reducer.linearFit(),
geometry: glint,
scale: 10,
});
//print('B2 OLS estimates:', lfitB2);
//print('B2 y-intercept:', lfitB2.get('offset'));
//print('B2 Slope:', lfitB2.get('scale'));
//print('B3 Slope:', lfitB3.get('scale'));
//print('B4 Slope:', lfitB4.get('scale'));
var slope_B2 = ee.Image.constant(lfitB2.get('scale')).clip(roi).rename('slope_B2');
var slope_B3 = ee.Image.constant(lfitB3.get('scale')).clip(roi).rename('slope_B3');
var slope_B4 = ee.Image.constant(lfitB4.get('scale')).clip(roi).rename('slope_B4');
var min_B8 = ee.Image.constant(maskedComposite.select('B8').reduceRegion(ee.Reducer.min(),roi, 3).get('B8')).rename('min_B8');
var glint_factors = ee.Image([slope_B2, slope_B3, slope_B4, min_B8]);
var S2 = maskedComposite.addBands(glint_factors);
/*var deglint_B2 = S2.select('B8').subtract(min_B8);
var deglint_B2 = slope_B2.multiply(deglint_B2);
var deglint_B2 = S2.select('B2').subtract(deglint_B2);
Map.addLayer(deglint_B2);*/
var deglint_B2 = S2.expression(
'Blue - (Slope * (NIR - MinNIR))', {
'Blue': S2.select('B2'),
'NIR': S2.select('B8'),
'MinNIR': S2.select('min_B8'),
'Slope': S2.select('slope_B2')
}).rename('B2');
var deglint_B3 = S2.expression(
'Green - (Slope * (NIR - MinNIR))', {
'Green': S2.select('B3'),
'NIR': S2.select('B8'),
'MinNIR': S2.select('min_B8'),
'Slope': S2.select('slope_B3')
}).rename('B3');
var deglint_B4 = S2.expression(
'Red - (Slope * (NIR - MinNIR))', {
'Red': S2.select('B4'),
'NIR': S2.select('B8'),
'MinNIR': S2.select('min_B8'),
'Slope': S2.select('slope_B4')
}).rename('B4');
var S2_deglint = ee.Image([deglint_B2, deglint_B3, deglint_B4]);
Map.addLayer(S2_deglint, {
bands: ['B4', 'B3', 'B2'],
min: 0.0,
max: 0.2
}, 'Sunglint Corrected');
var linkedMap = ui.Map();

Related

Error while trying to export gee data and display appears (Error code: 3)

when I export the GEE data it appears
Error: Image.clipToBoundsAndScale, argument 'input': Invalid type.
Expected type: Image. Actual type: FeatureCollection.
(Error code: 3)
can you help me solve it
following is the script code
var maskL8 = function(image) {
var qa = image.select('BQA');
var mask = qa.bitwiseAnd(1 << 4).eq(0);
return image.updateMask(mask);
}
var composite = ee.ImageCollection('LANDSAT/LC08/C01/T1_TOA')
.filterDate('2021-01-01', '2021-12-31')
.filterBounds(geometry)
.map(maskL8)
.median().clip(geometry);
//visualisasi citra
var RGBTrue = composite.select(['B2', 'B4', 'B7']);
var RGBparam = { min: 0, max: 0.2,};
Map.addLayer(RGBTrue, RGBparam, 'TRUE');
var aoi = vegetasi.merge(badan_air).merge(lahan_terbangun).merge(tegalan)
.merge(rumput).merge(industri).merge(kosong).merge(sawah);
var bands = ['B1','B2','B3','B4','B5','B6','B7'];
var training = composite.select(bands).sampleRegions({
collection: aoi,
properties: ['lc'],
scale: 30
});
var classifier = ee.Classifier.smileCart().train({
features: training,
classProperty: 'lc',
inputProperties: bands
});
var classified = composite.select(bands).classify(classifier);
Map.addLayer(classified,
{min: 0, max: 7, palette:['darkgreen','blue','red','darkblue','green','orange','yellow', 'brown']},
'classification');
//Klasifikasi
var uji_aoi = uji_akurasi_vegetasi.merge(uji_akurasi_badanair).merge(uji_akurasi_lahanterbangun).merge(uji_akurasi_tegalan)
.merge(uji_akurasi_rumput).merge(uji_akurasi_industri).merge(uji_akurasi_kosong).merge(uji_akurasi_sawah);
var validasi = classified.sampleRegions({
collection: uji_aoi,
properties: ['lc'],
scale: 30,
});
print(validasi);
var akurasi = validasi.errorMatrix('lc', 'classification');
print('Confusion matrix', akurasi);
print('Overall accuracy: ', akurasi.accuracy());
var class_areas = ee.Image.pixelArea().divide(1000*1000).addBands(classified)
.reduceRegion({
reducer: ee.Reducer.sum().group({
groupField: 1,
groupName: 'code',
}),
geometry: geometry,
maxPixels : 500000000,
scale: 30,
}).get('groups');
print(class_areas);
//legenda
var panel = ui.Panel({
style: {
position: 'bottom-left',
padding: '5px;'
}
})
var title = ui.Label({
value: 'Klasifikasi Tutupan Lahan',
style: {
fontSize: '14px',
fontWeight: 'bold',
margin: '0px;'
}
})
panel.add(title)
var color = ['darkgreen','blue','red','darkblue','green','orange','yellow', 'brown']
var lc_class = ['Vegetasi', 'Lahan Terbangun', 'Sawah', 'Badan Air','Lahan Kosong','Rerumputan','Industri','Tegalan']
var list_legend = function(color, description) {
var c = ui.Label({
style: {
backgroundColor: color,
padding: '10px',
margin: '4px'
}
})
var ds = ui.Label({
value: description,
style: {
margin: '5px'
}
})
return ui.Panel({
widgets: [c, ds],
layout: ui.Panel.Layout.Flow('horizontal')
})
}
for(var a = 0; a < 8; a++){
panel.add(list_legend(color[a], lc_class[a]))
}
Map.add(panel)
// Export the image, specifying the CRS, transform, and region.
Export.image.toDrive({
image: geometry,
description: 'imageToDriveExample_transform',
region: geometry
});
I try to export data but the result is always the same. Is there an error in this code?

Layer error in Google Earth Engine - Layer error: Image.reduceRegion: Too many pixels in the region. Found ***, but maxPixels allows only 10000000

I've had this error in Google Earth Engine. I'm trying to account for sunglint off the ocean as I attempt to map seagrass.
Here is my code.
The error is happening when I try to run the Sunglint Corrected map layer. I've tried changing the max number of pixels but to no avail. I've also tried setting best effort to true, but this hasn't helped either which is extremely unfortunate. Please help!
var dataset = ee.ImageCollection('COPERNICUS/S2_SR')
.filterDate('2021-05-01', '2021-09-30')
.filter(ee.Filter.lt('CLOUDY_PIXEL_PERCENTAGE',20))
.filterBounds(roi)
.select(['B2','B3','B4','B1', 'B8']);
var rgbVis = {
min: 0.0,
max: 1000,
bands: ['B3', 'B2', 'B4'],
};
Map.addLayer(dataset, rgbVis, 'Filtered Collection');
var mosaic = dataset.mosaic();
var medianComposite = dataset.min();
Map.addLayer(medianComposite, rgbVis, 'Median Composite', 0);
var hansenImage = ee.Image('UMD/hansen/global_forest_change_2015');
var datamask = hansenImage.select('datamask');
var mask = datamask.eq(2);
var maskedComposite = medianComposite.updateMask(mask);
Map.addLayer(maskedComposite, rgbVis, 'masked');
Map.addLayer(maskedComposite, {
bands: ['B4', 'B3', 'B2',],
min: 0,
max: 1000
}, 'BOA');
var B2 = maskedComposite.select(['B8', 'B2']);
var B3 = maskedComposite.select(['B8', 'B3']);
var B4 = maskedComposite.select(['B8', 'B4']);
var lfitB2 = B2.reduceRegion({
reducer: ee.Reducer.linearFit(),
geometry: glint,
scale: 10,
//maxPixels: 1000,
//bestEffort: true
});
var lfitB3 = B3.reduceRegion({
reducer: ee.Reducer.linearFit(),
geometry: glint,
scale: 10,
});
var lfitB4 = B4.reduceRegion({
reducer: ee.Reducer.linearFit(),
geometry: glint,
scale: 10,
});
//print('B2 OLS estimates:', lfitB2);
//print('B2 y-intercept:', lfitB2.get('offset'));
//print('B2 Slope:', lfitB2.get('scale'));
//print('B3 Slope:', lfitB3.get('scale'));
//print('B4 Slope:', lfitB4.get('scale'));
var slope_B2 = ee.Image.constant(lfitB2.get('scale')).clip(roi).rename('slope_B2');
var slope_B3 = ee.Image.constant(lfitB3.get('scale')).clip(roi).rename('slope_B3');
var slope_B4 = ee.Image.constant(lfitB4.get('scale')).clip(roi).rename('slope_B4');
var min_B8 = ee.Image.constant(maskedComposite.select('B8').reduceRegion(ee.Reducer.min(),roi, 3).get('B8')).rename('min_B8');
var glint_factors = ee.Image([slope_B2, slope_B3, slope_B4, min_B8]);
var S2 = maskedComposite.addBands(glint_factors);
/*var deglint_B2 = S2.select('B8').subtract(min_B8);
var deglint_B2 = slope_B2.multiply(deglint_B2);
var deglint_B2 = S2.select('B2').subtract(deglint_B2);
Map.addLayer(deglint_B2);*/
var deglint_B2 = S2.expression(
'Blue - (Slope * (NIR - MinNIR))', {
'Blue': S2.select('B2'),
'NIR': S2.select('B8'),
'MinNIR': S2.select('min_B8'),
'Slope': S2.select('slope_B2')
}).rename('B2');
var deglint_B3 = S2.expression(
'Green - (Slope * (NIR - MinNIR))', {
'Green': S2.select('B3'),
'NIR': S2.select('B8'),
'MinNIR': S2.select('min_B8'),
'Slope': S2.select('slope_B3')
}).rename('B3');
var deglint_B4 = S2.expression(
'Red - (Slope * (NIR - MinNIR))', {
'Red': S2.select('B4'),
'NIR': S2.select('B8'),
'MinNIR': S2.select('min_B8'),
'Slope': S2.select('slope_B4')
}).rename('B4');
var S2_deglint = ee.Image([deglint_B2, deglint_B3, deglint_B4]);
Map.addLayer(S2_deglint, {
bands: ['B4', 'B3', 'B2'],
min: 0.0,
max: 0.2
}, 'Sunglint Corrected');
var linkedMap = ui.Map();
Map.addLayer(S2, {
bands: ['B4', 'B3', 'B2'],
min: 0.0,
max: 0.15,
}, 'Top-of-Atmosphere Reflectance');
Map.addLayer(S2_deglint, {bands: ['B4', 'B3', 'B2'], min: 0.0, max: 1000, scale: 1}, 'Sunglint Corrected');
var linker = ui.Map.Linker([ui.root.widgets().get(0), linkedMap]);

famo.us lightbox demo transition

I'm trying to get a transition that is similar to the lightbox demo that famous has put out. I have a grid layout, when I click a surface in the grid, Id like to have the surface transition, grow in size and be centered in the browser window.
--edit
Here is the demo, what I would like to nail is the flyout of the clicked image from its location to the center of the screen. http://demo.famo.us/lightbox/
I have the following code that I've been using as a basis. http://codepen.io/heyimlance/pen/JooQMX
var Engine = famous.core.Engine;
var Surface = famous.core.Surface;
var GridLayout = famous.views.GridLayout;
var StateModifier = famous.modifiers.StateModifier;
var Transform = famous.core.Transform;
var RenderNode = famous.core.RenderNode;
var Easing = famous.transitions.Easing;
var mainContext = Engine.createContext();
var grid = new GridLayout({
dimensions: [8, 8],
});
var surfaces = [];
grid.sequenceFrom(surfaces);
function newSurface(id) {
var surface = new Surface({
content: id + 1,
properties: {
backgroundColor: "hsl(" + (id * 70 / 64) + ", 60%, 70%)",
lineHeight: '50px',
textAlign: 'center'
}
});
var smod = new StateModifier({
size: [50,50],
transform: Transform.translate(0,0,1),
origin: [.5,.5]
});
var rnode = new RenderNode();
rnode.add(smod).add(surface);
surfaces.push(rnode);
surface.on('click', function() {
console.log(smod)
var zpos = (this.up || this.up == undefined) ? 0 : -180;
if (!zpos) {
this.up = false;
smod.setTransform(Transform.translate(0,0,2000), { curve:Easing.outElastic, duration: 1000 })
gridModifier.setTransform(Transform.translate(0,0,-2000), { curve:Easing.outElastic, duration: 500 })
} else {
this.up = true;
gridModifier.setTransform(Transform.translate(0,0,0), { curve:Easing.outElastic, duration: 400 })
smod.setTransform(Transform.translate(0,0,0), { curve:Easing.outElastic, duration: 1000 })
}
});
}
for(var i = 0; i < 64; i++) {
newSurface(i);
}
var gridModifier = new StateModifier({
size: [400, 400],
align: [.5, .5],
origin: [.5, .5],
transform : Transform.translate(0,0,0),
});
var gridRotate = new StateModifier({
transform : Transform.rotate(0,0,0),
});
mainContext.add(gridModifier).add(grid);
mainContext.setPerspective(1000);
Using your code, I made a few changes to use the Lightbox render contoller at the time of the click. Not sure what transition you would like for the grid and surface, this should give you options to transition as you like.
Here is a codepen of the example
The code:
var Engine = famous.core.Engine;
var Surface = famous.core.Surface;
var GridLayout = famous.views.GridLayout;
var StateModifier = famous.modifiers.StateModifier;
var Transform = famous.core.Transform;
var RenderNode = famous.core.RenderNode;
var RenderController = famous.views.RenderController;
var Lightbox = famous.views.Lightbox;
var Easing = famous.transitions.Easing;
var mainContext = Engine.createContext();
var grid = new GridLayout({
dimensions: [8, 8],
});
var surfaces = [];
var showing;
grid.sequenceFrom(surfaces);
var cmod = new StateModifier({
origin: [0.5, 0.5],
align: [0.5, 0.5]
});
var controller = new Lightbox({
inTransition: true,
outTransition: false,
overlap: true
});
controller.hide();
function newSurface(id) {
var surface = new Surface({
size: [undefined, undefined],
content: id + 1,
properties: {
backgroundColor: "hsl(" + (id * 70 / 64) + ", 60%, 70%)",
lineHeight: '50px',
textAlign: 'center',
cursor: 'pointer'
}
});
surface._smod = new StateModifier({
size: [420,420],
origin: [0.5, 0.5],
align: [0.5, 0.5]
});
surface._rnode = new RenderNode();
surface._rnode.add(surface._smod).add(surface);
surfaces.push(surface);
surface.on('click', function(context, e) {
if (this === showing) {
controller.hide({ curve:Easing.inElastic, duration: 1000 }, function(){
gridModifier.setTransform(Transform.scale(1,1,1),
{ curve:Easing.outElastic, duration: 1000 });
});
showing = null;
} else {
showing = this;
gridModifier.setTransform(Transform.scale(0.001, 0.001, 0.001),
{ curve:Easing.outCurve, duration: 300 });
cmod.setTransform(Transform.translate(0, 0, 0.0001));
controller.show(this._rnode, { curve:Easing.outElastic, duration: 2400 });
}
}.bind(surface, mainContext));
}
for(var i = 0; i < 64; i++) {
newSurface(i);
}
var gridModifier = new StateModifier({
size: [400, 400],
align: [0.5, 0.5],
origin: [0.5, 0.5]
});
mainContext.add(gridModifier).add(grid);
mainContext.add(cmod).add(controller);
mainContext.setPerspective(1000);
I think the best way is to follow "StateModifier" example that you can find in famo.us university : http://famo.us/university/lessons/#/famous-102/transitionables/2
Do a scale :
// animates x- and y-scale to 1
stateModifier.setTransform(
Transform.scale(1, 1, 1),
{ duration : 2000, curve: Easing.outBack }
);
and then a align [0.5, 0.5] :
var alignModifier = new Modifier({
align: [0.5, 0.5]
});
and if you want background to be minified, you have to apply 'scale' modifier too to make all other surfaces smaller.

Google Maps getBounds() returns undefined

I'm writing a code which will:
-- Load a map and center it on a KML
-- Draw a polygon based on the bounds of the map.
Here below the code. I get an error
Uncaught TypeError: Cannot call method 'getNorthEast' of undefined
function initialize()
{
var mapOptions =
{
zoom: 19,
mapTypeId: google.maps.MapTypeId.ROADMAP //higer zoom
};
var KML1 = new google.maps.KmlLayer(
{
clickable: false,
url: 'https://s3.amazonaws.com/navizon.its.fp/1001/f43l9uvts1_a.kml' //kml link for the floor-plan
});
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
KML1.setMap(map);
var bounds = new google.maps.LatLngBounds();
bounds = map.getBounds();
var ne = bounds.getNorthEast();
var sw = bounds.getSouthWest();
var QLat = Math.abs((ne.lat()-sw.lat())/5);
var QLng = Math.abs((sw.lng()-ne.lng())/5);
var swLat = sw.lat()+QLat;
var swLng = sw.lng()+QLng;
var neLat = ne.lat()-QLat;
var neLng = ne.lng()-QLng;
ne = new google.maps.LatLng(neLat,neLng);
sw = new google.maps.LatLng(swLat,swLng);
var Coords = [
ne, new google.maps.LatLng(ne.lat(), sw.lng()),
sw, new google.maps.LatLng(sw.lat(), ne.lng()), ne
];
surface = new google.maps.Polygon(
{
paths: Coords,
strokeColor: '#00AAFF',
strokeOpacity: 0.6,
strokeWeight: 2,
fillColor: '#00CC66',
fillOpacity: 0.15,
editable: true,
draggable: true,
geodesic:true
});
surface.setMap(map);
google.maps.event.addListener(surface, 'mousemove', ciao) //add listener for changes
//$("#results").append(coordinates[0]);
//Let's update area and price as the poly changes
function ciao(event)
{
var vertices = this.getPath();
// Iterate over the vertices.
for (var i =0; i < vertices.getLength(); i++) {
var xy = vertices.getAt(i);
Coords = []
Coords.push(xy);
};
}
}
Any Suggestion?
Thanks,
Daniele
You need to put all the code that depends on the map bounds inside the event listener.
var surface = null;
function initialize()
{
var mapOptions =
{
zoom: 19,
mapTypeId: google.maps.MapTypeId.ROADMAP //higer zoom
};
var KML1 = new google.maps.KmlLayer(
{
clickable: false,
url: 'https://s3.amazonaws.com/navizon.its.fp/1001/f43l9uvts1_a.kml' //kml link for the floor-plan
});
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
KML1.setMap(map);
google.maps.event.addListener(map,'bounds_changed', function()
{
var bounds = new google.maps.LatLngBounds();
bounds = map.getBounds();
var ne = bounds.getNorthEast();
var sw = bounds.getSouthWest();
var QLat = Math.abs((ne.lat()-sw.lat())/5);
var QLng = Math.abs((sw.lng()-ne.lng())/5);
var swLat = sw.lat()+QLat;
var swLng = sw.lng()+QLng;
var neLat = ne.lat()-QLat;
var neLng = ne.lng()-QLng;
ne = new google.maps.LatLng(neLat,neLng);
sw = new google.maps.LatLng(swLat,swLng);
var Coords = [
ne, new google.maps.LatLng(ne.lat(), sw.lng()),
sw, new google.maps.LatLng(sw.lat(), ne.lng()), ne
];
surface = new google.maps.Polygon(
{
paths: Coords,
strokeColor: '#00AAFF',
strokeOpacity: 0.6,
strokeWeight: 2,
fillColor: '#00CC66',
fillOpacity: 0.15,
editable: true,
draggable: true,
geodesic:true
});
surface.setMap(map);
}); // end of listener callbck
google.maps.event.addListener(surface, 'mousemove', ciao) //add listener for changes
//$("#results").append(coordinates[0]);
//Let's update area and price as the poly changes
function ciao(event)
{
var vertices = this.getPath();
// Iterate over the vertices.
for (var i =0; i < vertices.getLength(); i++) {
var xy = vertices.getAt(i);
Coords = []
Coords.push(xy);
};
}
} // end of initialize

accessing javascript variables

I want to assign array of photos to imagearray but the following script is not working.
i cant able to access variables a,i,cnlink etc in new fadeSlideShow() .how to access this outside the function and assign it to imagearray
<script type="text/javascript">
var i; var a; var cnLink; var cn;var cnSplit;
var photos = new Array();
var photoslink = new Array();
function x() {
a = document.getElementById('HiddenField4').value;
cnLink = document.getElementById('hdnLink').value;
cn = document.getElementById('HiddenField3').value;
cnSplit = cnLink.split(';');
while (i < cn) {
photoslink[i] = cnSplit[i];
photos[i] = b[i];
i++;
}
}
var mygallery2 = new fadeSlideShow({
wrapperid: "fadeshow2",
dimensions: [568, 313],
imagearray: [
photos
//<--array of images!
],
displaymode: { type: 'auto', pause: 2500, cycles: 0, wraparound: false },
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "always",
togglerid: "fadeshow2toggler"
})
</script>
<script type="text/javascript">
var i; var a; var cnLink; var cn;var cnSplit;
var photos = new Array();
var photoslink = new Array();
function x() {
a = document.getElementById('HiddenField4').value;
cnLink = document.getElementById('hdnLink').value;
cn = document.getElementById('HiddenField3').value;
cnSplit = cnLink.split(';');
while (i < cn) {
photoslink[i] = cnSplit[i];
photos[i] = b[i];
i++;
}
}
x(); // try executing your function as well.
var mygallery2 = new fadeSlideShow({
wrapperid: "fadeshow2",
dimensions: [568, 313],
imagearray: [
photos
//<--array of images!
],
displaymode: { type: 'auto', pause: 2500, cycles: 0, wraparound: false },
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "always",
togglerid: "fadeshow2toggler"
})
</script>
Or you can drop defining the function at all.
<script type="text/javascript">
var i;
var a;
var cnLink;
var cn;
var cnSplit;
var photos = new Array();
var photoslink = new Array();
a = document.getElementById('HiddenField4').value;
cnLink = document.getElementById('hdnLink').value;
cn = document.getElementById('HiddenField3').value;
cnSplit = cnLink.split(';');
while (i < cn) {
photoslink[i] = cnSplit[i];
photos[i] = b[i];
i++;
}
var mygallery2 = new fadeSlideShow({
wrapperid: "fadeshow2",
dimensions: [568, 313],
imagearray: [
photos
//<--array of images!],
displaymode: {
type: 'auto',
pause: 2500,
cycles: 0,
wraparound: false
},
persist: false,
//remember last viewed slide and recall within same session?
fadeduration: 500,
//transition duration (milliseconds)
descreveal: "always",
togglerid: "fadeshow2toggler"
})
</script>

Resources