Estoy tratando de cambiar el valor de una variable global llamada numerofinal después de haber hecho click en un div, para almacenarlo como valor de un array. Cuando hago click la variable numerofinal cambia, pero se queda allí dentro y no cambia dentro de la variable directorio.
var negro = $("#blacko");
var material = ['white', 'black', 'chrome'];
var numerofinal = 0;
negro.on("click", function() {
numerofinal += 1;
});
var directorio = 'imgs/' + material[numerofinal] + '/image{frame}.png';
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Muchas gracias a todos por contestar tan rápido. Sois unos cracks. El problema es que no funciona ninguno de ellos como espero y es porque seguramente no me terminé de explicar correctamente. Esto de la variable directorio lo necesito para cambiar dinámicamente el parámetro source: de un objeto o plugin que uso para visualizar esa array de imágenes simulando un 360 view. Es un plugin que encontré en internet llamado spritespin. Vi como el autor cambiaba dinámicamente el número de imágenes de cada array y pensé utilizar ese plugin pero añadiendo más opciones. La idea es que al pulsar en un botón externo cambié toda la array de imágenes y muestre otro acabado del producto en 360 grados. Como estoy aprendiendo que no hay que repetirse a uno mismo, la idea sería cambiar dinámicamente la fuente o source: de donde vienen los conjuntos de imágenes diferentes.
Lo que proponéis cambia la variable directorio, pero no su valor no se adjunta dentro del objeto. Adjunto código:
//config directorio spritespin
var negro = $("#blacko");
var material = ['white', 'black', 'chrome'];
var numerofinal = 0;
negro.on("click", function() {
numerofinal += 1;
});
function resultado() {
directorio = 'imgs/' + material[numerofinal] + '/image{frame}.png';
}
actualizarDirectorio();
$('.spritespin').spritespin({
// generate an array of image urls.
// this is a helper function that takes a {frame} placeholder
source: SpriteSpin.sourceArray(directorio, {
// this ramge of numbers is interpolated into the {frame} placeholder
frame: [001,050],
// the frame placeholder will be padded with leading '0' up to the number of 'digits'
digits: 3
}),
// this is a helper function that takes a {frame} placeholder
/* source: SpriteSpin.sourceArray('imgs/mix/image{frame}.png', {
// this ramge of numbers is interpolated into the {frame} placeholder
frame: [001,050],
// the frame placeholder will be padded with leading '0' up to the number of 'digits'
digits: 3
}),*/
// Specify the display width and height of the frame.
// Optionally the size of the container can be defined with CSS.
width: 500,
height: 500,
// Sense controls the direction and speed of the animation for mouse/touch interactions.
// Here a negative value is chosen to invert the rotation, so the animation 'follows' the drag direction.
// Values towards 0 will slow the animation down.
sense: -1,
animate: true,
responsive: true,
loop: false,
frameTime: 50,
}); //end spritespin