hola juanchooo,
pues tengo varias carpetas, una para cada galería de fotos y las he nombrado numéricamente ( 1, 2, 3, etc.) para tratar de relacionarlas con el valor de la $id que es la que identifica cada proyecto en el XML.
el js. que carga las imágenes es este:
Código HTML:
// get current photo id from URL
var thisURL = document.location.href;
var splitURL = thisURL.split("#");
var photoId = splitURL[1] - 1;
// if no photoId supplied then set default
var photoId = (!photoId)? 0 : photoId;
// CSS border size x 2
var borderSize = 10;
// Photo directory for this gallery
var photoDir = "photos/1/";
// Define each photo's name, height, width, and caption
var photoArray = new Array(
// Source, Width, Height
new Array("IMG_0470.jpg", "600", "450" ,""),
new Array("IMG_2441.jpg", "582", "350",""),
new Array("IMG_2449.jpg", "600", "300",""),
new Array("IMG_0677.jpg", "650", "488",""),
new Array("P3220073.jpg", "600", "400","")
);
// Number of photos in this gallery
var photoNum = photoArray.length;
/*--------------------------------------------------------------------------*/
// Additional methods for Element added by SU, Couloir
Object.extend(Element, {
getWidth: function(element) {
element = $(element);
return element.offsetWidth;
},
setWidth: function(element,w) {
element = $(element);
element.style.width = w +"px";
},
setHeight: function(element,h) {
element = $(element);
element.style.height = h +"px";
},
setSrc: function(element,src) {
element = $(element);
element.src = src;
},
setHref: function(element,href) {
element = $(element);
element.href = href;
},
setInnerHTML: function(element,content) {
element = $(element);
element.innerHTML = content;
}
});
/*--------------------------------------------------------------------------*/
var Slideshow = Class.create();
Slideshow.prototype = {
initialize: function(photoId) {
this.photoId = photoId;
this.photo = 'Photo';
this.photoBox = 'Container';
this.prevLink = 'PrevLink';
this.nextLink = 'NextLink';
this.captionBox = 'CaptionContainer';
this.caption = 'Caption';
this.counter = 'Counter';
this.loader = 'Loading';
},
getCurrentSize: function() {
// Get current height and width, subtracting CSS border size
this.wCur = Element.getWidth(this.photoBox) - borderSize;
this.hCur = Element.getHeight(this.photoBox) - borderSize;
},
getNewSize: function() {
// Get current height and width
this.wNew = photoArray[photoId][1];
this.hNew = photoArray[photoId][2];
},
getScaleFactor: function() {
this.getCurrentSize();
this.getNewSize();
// Scalars based on change from old to new
this.xScale = (this.wNew / this.wCur) * 100;
this.yScale = (this.hNew / this.hCur) * 100;
},
setNewPhotoParams: function() {
// Set source of new image
Element.setSrc(this.photo,photoDir + photoArray[photoId][0]);
// Set anchor for bookmarking
Element.setHref(this.prevLink, "#" + (photoId+1));
Element.setHref(this.nextLink, "#" + (photoId+1));
},
setPhotoCaption: function() {
// Add caption from gallery array
Element.setInnerHTML(this.caption,photoArray[photoId][3]);
Element.setInnerHTML(this.counter,((photoId+1)+'/'+photoNum));
},
resizePhotoBox: function() {
this.getScaleFactor();
new Effect.Scale(this.photoBox, this.yScale, {scaleX: false, duration: 0.3, queue: 'front'});
new Effect.Scale(this.photoBox, this.xScale, {scaleY: false, delay: 0.5, duration: 0.3});
// Dynamically resize caption box as well
Element.setWidth(this.captionBox,this.wNew-(-borderSize));
},
showPhoto: function(){
new Effect.Fade(this.loader, {delay: 0.5, duration: 0.3});
// Workaround for problems calling object method "afterFinish"
new Effect.Appear(this.photo, {duration: 0.5, queue: 'end', afterFinish: function(){Element.show('CaptionContainer');Element.show('PrevLink');Element.show('NextLink');}});
},
nextPhoto: function(){
// Figure out which photo is next
(photoId == (photoArray.length - 1)) ? photoId = 0 : photoId++;
this.initSwap();
},
prevPhoto: function(){
// Figure out which photo is previous
(photoId == 0) ? photoId = photoArray.length - 1 : photoId--;
this.initSwap();
},
initSwap: function() {
// Begin by hiding main elements
Element.show(this.loader);
Element.hide(this.photo);
Element.hide(this.captionBox);
Element.hide(this.prevLink);
Element.hide(this.nextLink);
// Set new dimensions and source, then resize
this.setNewPhotoParams();
this.resizePhotoBox();
this.setPhotoCaption();
}
}
/*--------------------------------------------------------------------------*/
// Establish CSS-driven events via Behaviour script
var myrules = {
'#Photo' : function(element){
element.onload = function(){
var myPhoto = new Slideshow(photoId);
myPhoto.showPhoto();
}
},
'#PrevLink' : function(element){
element.onmouseover = function(){
soundManager.play('beep');
}
element.onclick = function(){
var myPhoto = new Slideshow(photoId);
myPhoto.prevPhoto();
soundManager.play('select');
}
},
'#NextLink' : function(element){
element.onmouseover = function(){
soundManager.play('beep');
}
element.onclick = function(){
var myPhoto = new Slideshow(photoId);
myPhoto.nextPhoto();
soundManager.play('select');
}
},
a : function(element){
element.onfocus = function(){
this.blur();
}
}
};
// Add window.onload event to initialize
Behaviour.addLoadEvent(init);
Behaviour.apply();
function init() {
var myPhoto = new Slideshow(photoId);
myPhoto.initSwap();
soundManagerInit();
}
espero que me haya explicado un poco mejor..Muchas gracias
