Ok, so maybe the whole code is more helpful
// Define Global Vars
var detailSlider
var pageScroll
var sessionCookie
var prefetch = [];
var size = Cookie.read("size");
var imageName = '';
var imageSizes = [];
var resizeTimer = '';
var next = '';
var prev = ''
var about = false;
// Verify that the size cookie is valid:
if(size == null || size.toInt() < 0){
var size = 'auto';
}else{
var size = size.toInt();
}
// Take the current browser size, and determine the correct
// image size to load. (Or load the size specified in the cookie)
function chooseSize () {
// If a size has already been set via a cookie,
// load that size instead:
if(size != 'auto'){
return size;
}
var windowSize = window.getSize();
// x = width y = height
// x px (padding)
if(windowSize.x < 1230 || windowSize.y < 850){
return 0; // 0 = small
}else if(windowSize.x >= 1230 && windowSize.y >= 900){
return 1; // 1 = X-Large
}
}
// Convert the size number into the actual title
function sizeName(imgsize){
var size_name
switch (imgsize)
{
case 1 :
size_name = 'x_s';
break;
default : // 0
size_name = 's';
}
return size_name;
}
/*
FUNCTION: loadImage( animate [bool,optional], manual [int,optional] )
This function loads the appropiate image size depanding on the user's browser window.
It can also load a specefied size if the variable "manual" is set.
Animation is enabled by default, but can be turned off by setting animate to false.
*/
function loadImage(animate, manual){
// Only load the small image by default on iPods:
if(Browser.Platform.ipod == true && manual === false){
return false;
}
if(manual !== false){
var detectSize = manual.toInt();
size = detectSize;
Cookie.write('size', size);
}else if(size != 'auto'){
var detectSize = size;
}else{
var detectSize = chooseSize();
Cookie.write('auto_size', detectSize);
}
if(imageSizes[detectSize] == '0x0'){
while(detectSize !== 0 && imageSizes[detectSize] == '0x0'){
detectSize = detectSize-1;
}
}
var imgSize = imageSizes[detectSize].split('x');
var name = sizeName(detectSize);
// currentSize = $('wrapper').getStyle('width').toInt();
imgSize[0] = imgSize[0].toInt();
imgSize[1] = imgSize[1].toInt();
var ratio = imgSize[0]/imgSize[1];
if(imgSize[0] < 800){
var pagewidth = 800;
}else{
var pagewidth = imgSize[0];
}
if(imgSize[0] == 0 || imgSize[1] == 0){
return false;
}
$$('#size a').each(function(item){
if(detectSize == item.rel){
item.addClass('active');
}else{
item.removeClass('active');
}
});
if($('photo').getStyle('width').toInt() == (imgSize[0] )){
// No Change
return false;
}else if(animate == false){
// Without Animation:
$('wrapper').setStyle('width',(pagewidth ));
}else{
// With Wnimation:
$('wrapper').tween('width', (pagewidth ));
}
var img = $('image');
if(animate == false){
// Without Animation:
img.setProperty('width',imgSize[0]);
img.setProperty('height',imgSize[1]);
if(ratio <= 1){
$('photo').setStyle('width',(imgSize[0]));
$('photo').setStyle('height',(imgSize[1]));
}
}else{
// With Animation:
img.morph({width: imgSize[0], height: imgSize[1]});
if(ratio <= 1){
$('photo').morph({width: (imgSize[0]+26), height: (imgSize[1])});
}
}
img.setProperty('src','images/'+name.substr(0,1) + imageName.substr(1,120));
if(ratio > 1){
var orientation = 'horizontal';
}else if(ratio < 1){
var orientation = 'vertical';
}else{
var orientation = 'square';
}
if(!about){
$('wrapper').setProperty('class',name+' '+orientation);
}else{
$('wrapper').setProperty('class',name+' '+orientation+' about');
}
// If the user is using IE6:
if(Browser.Engine.trident4 != null){
// Manually specify the overlay height:
$('navigation').setStyle('height',imgSize[1]);
}
// Image size has change, return true:
return true;
}
window.addEvent('domready', function() {
about = $('wrapper').hasClass('about');
if(!about){
next = $('next');
prev = $('prev');
// While the page loads, might as well display the next/prev nav links...
// if(next){next.addClass('visible');}
// if(prev){prev.addClass('visible');}
// Load the correct sized image, without animation:
loadImage(false,false);
// Define FX:
var detailSlider = new Fx.Slide('details', {
link: 'ignore',
duration: 800,
fps: 30,
wheelStops: false,
transition: Fx.Transitions.Expo.easeInOut
});
var pageScroll = new Fx.Scroll(window, {
link: 'ignore',
duration: 800,
fps: 30,
wheelStops: false,
transition: Fx.Transitions.Expo.easeInOut
});
// Read Sesson Cookie
var sessionCookie = Cookie.read("detailView");
// If the previous page had hidden details,
// hide the details for this page as well.
if(sessionCookie != 'show'){
// Hide Slider:
detailSlider.hide();
}else{
// If the user is using IE6:
if(Browser.Engine.trident4 != null){
$('details').parentNode.setStyle('height',$('details').getSize().y+50);
}
}
} // end if !about
// Make the image size links clickable:
$$('#size a').each(function(link){
link.addEvent('click', function(){
loadImage(true,link.rel);
return false;
});
});
});
window.addEvent('resize',function(){
// Wait 600ms before resizing the photo...
resizeTimer = $clear(resizeTimer);
resizeTimer = (function(){ loadImage(true,false); }).delay(200);
});
the script is working propper, but unfortunately my upload is creating the file s_filename.jpg and x_s_filename.jpg
If I rename the file x_s manually to x_filename it is working, but this can't be a solution