JS Help for function

This site is best viewed in a modern browser with JavaScript enabled.

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