JS Help for function

[omar1000]

Maybe someone can help me!? I am not very experienced in javascript.
The problem: I have two images which I us for different switching displays, the small one is s_filename.jpg and the large one is x_s_filename.jpg

The script below is grabbing the filename prefix, but only the first letter, how can I manage it to get the first 3 or 2 letters like x_s

function sizeName(imgsize){
var size_name

switch (imgsize)
{
case 1 :
size_name = 'x_s';
break;
default : // 0
size_name = 's';
}
return size_name;
}

I appreciate any help.

[Declan1991]

No, what that code does very inefficiently, is return "s" if you call it as sizeName(1), and "x_s" if you call it as sizeName(1). So you showed us the wrong part of the code.

And from a programming point of view, that's a terrible naming system. It would be much easier if the small one was called s_filename.jpg and the large one was called x_filename.jpg. Or even better, if you had two separate folders, large/filename.jpg, and small/filename.jpg.

[omar1000]

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