/**
* handels the javascript gallery with cycle plugin. creates a gallery with images on a page.
*/
var i4_Image = {
slider_counter: 0,
slider_started: [],
translations: null,
loader_src: '',
set_translations: function(translations) { this.translations = translations; },
set_loader_src: function(src) { this.loader_src = src; },
listener_keydown_next: 0,
listener_keydown_prev: 0,
listener_keydown_esc: 0,
observe_tn: function(params) {
if ($(params.gallery_container)) {
// pointer on tn
$(params.id).setStyle({ 'cursor': 'pointer' });
$(params.id).next('.plus').setStyle({ 'cursor': 'pointer' });
// hide view image
if ($(params.view_id)) {
$(params.view_id).hide();
}
// observe click
$(params.id).observe('click', (function(){ this.click(params) }).bind(this)); // end observe click
$(params.id).next('.plus').observe('click', (function(){ this.click(params) }).bind(this)); // end observe click
} else {
log('container "'+params.gallery_container+'" does not extist!');
}
}, // i4_Image.observe_tn()
click: function(params) {
// close all image_slider_containers and show active container
$$('.image_slider_container').each(function(item){
item.hide();
})
$(params.view_container).hide();
$(params.gallery_container).show();
Effect.ScrollTo(params.gallery_container, { duration: 0.2, offset: -20 });
// create slider dom if not allready exists
if (this.slider_started.indexOf($(params.gallery_container).down('.slider').readAttribute('id'))) {
this.slider_started.push($(params.gallery_container).down('.slider').readAttribute('id'));
this.load_image(params.gallery_container, this.get_slide_index(params.gallery_container, params.view_id), params.view_container, params);
// start slider if first image is loaded
// $(params.view_id).down('img').obseve('load'); doesn't work with ie7!
var image = new Image();
image.onload = (function() {
$(params.view_id).down('img').show();
$(params.gallery_container).down('img.loader_gif').hide();
// create "slideshow" if there is more than one slides
if ($(params.gallery_container).down('.slider').childElements().size() > 1) {
/* cycle plugin jquery */
J('#'+$(params.gallery_container).down('.slider').readAttribute('id')).cycle({
fx: 'fade',
speed: '1000',
timeout: 0,
startingSlide: this.get_slide_index(params.gallery_container, params.view_id),
next: '#'+params.gallery_container+' .next',
prev: '#'+params.gallery_container+' .prev',
cleartypeNoBg: true,
fit: true,
before: function(current, next, opts){
// renew height
// @todo: show loader-gif while loading the image fel/20101110
$(params.gallery_container).down('img.loader_gif').show();
var image = new Image();
image.onload = function() {
next.down('img').show();
$(params.gallery_container).down('img.loader_gif').hide();
i4_Image.renew_height(params.gallery_container, next);
i4_Image.renew_height(current.up('.slider').readAttribute('id'), next);
}
image.src = next.down('img').readAttribute('src');
},
after: function(current, next, opts){
// set width of container
current.up('.slider').setStyle({
'width': $(params.gallery_container).getStyle('width')
});
// update position text
J('#'+params.gallery_container+' .position').html((opts.currSlide+1)+'/'+opts.slideCount);
// if last page
if ((opts.currSlide+1) == opts.slideCount) {
$$('#'+params.gallery_container+' .next')[0].hide();
} else {
$$('#'+params.gallery_container+' .next')[0].show();
// load next image
i4_Image.load_image(params.gallery_container, opts.currSlide+1, params.view_container, params);
}
// if first page
if (opts.currSlide == 0) {
$$('#'+params.gallery_container+' .prev')[0].hide();
} else {
$$('#'+params.gallery_container+' .prev')[0].show();
// load prev image
i4_Image.load_image(params.gallery_container, opts.currSlide-1, params.view_container, params);
}
}
});
// key event listener (arrows for next and prev)
this.register_keylistener(params);
} else { // if there is only one slides
// set width of container
$(params.gallery_container).down('.slider').setStyle({
'width': $(params.gallery_container).getStyle('width')
});
this.renew_height(params.gallery_container, $(params.gallery_container).down('.slider').childElements()[0]);
$(params.view_id).show();
$$('#'+params.gallery_container+' .next')[0].hide();
$$('#'+params.gallery_container+' .prev')[0].hide();
} // if else there is only one slides
}).bind(this);
image.src = $(params.view_id).down('img').src; // $(params.view_id).down('img').obseve('load'); doesn't work with ie7!
} else { // if slider allready exists, start slideshow with clicked img
// get slide index
var starting_slide = this.get_slide_index(params.gallery_container, params.view_id);
var slider_id = $(params.gallery_container).down('.slider').readAttribute('id');
this.load_image(params.gallery_container, starting_slide, params.view_container, params);
// key event listener (arrows for next and prev)
this.register_keylistener(params);
if ($(params.gallery_container).down('.slider').childElements().size() > 1) {
if (starting_slide != null ) {
J('#'+slider_id).cycle(starting_slide);
} else {
this.close(params);
}
}
}
}, // i4_Image.click()
load_image: function (gallery_container, slide_index, view_container, params) {
var slide = $(gallery_container).down('.slider').down();
if (slide_index > 0) {
slide = slide.next(slide_index-1);
}
// log(slide_index);
// log($(gallery_container));
// log($(slide));
// log(slide.down().tagName);
if (slide.down().tagName.toLowerCase() != 'img') {
slide.insert({
top: new Element('img', {
src: slide.down('div.src').innerHTML,
alt: slide.down('div.alt').innerHTML
}).
setStyle({
'height': 'auto',
'cursor': 'pointer'
}).
hide().
observe('click', (function(){
this.close(params);
}).bind(this))
});
slide.down('div.src').remove();
slide.down('div.alt').remove();
}
}, // i4_Image.load_image()
renew_height: function(gallery_container, current_view) {
var slider_top;
if ($(gallery_container).hasClassName('slider')) {
slider_top = current_view.getStyle('top');
} else {
slider_top = $(gallery_container).down('.slider').getStyle('top');
}
var space = parseInt($('slider_navigation').getStyle('marginTop').sub('px', ''))+parseInt(slider_top.sub('px', ''))+$('slider_navigation').getHeight();
var height = current_view.getHeight()+space+'px';
$(gallery_container).setStyle({
'height': height
});
}, // i4_Image.renew_height()
get_slide_index: function(gallery_container, view_id) {
var result = null;
$$('#'+gallery_container+' .slider')[0].childElements().each((function(item, i){
item.hide();
if (item.readAttribute('id') == view_id) {
result = i;
item.show();
}
}).bind(this));
return result;
}, // i4_Image.get_slide_index()
prepair_gallery_container: function(params){
if (!$(params.gallery_container)) {
this.slider_counter++;
$(params.view_container).insert({
before: new Element('div', {'id': params.gallery_container }).addClassName('image_slider_container').
setStyle({
'float': 'left',
'width': $(params.view_container).getWidth()-parseInt($(params.view_container).getStyle('paddingLeft').sub('px', ''))+'px',
'marginLeft': $(params.view_container).getStyle('marginLeft'),
'marginTop': $(params.view_container).getStyle('marginTop'),
'paddingLeft': $(params.view_container).getStyle('paddingLeft')
}).
hide().
insert({
top: ""
}).
insert({
top: " "
}).
insert({
top: new Element('img', { src: this.loader_src }).addClassName('loader_gif')
})
});
$(params.gallery_container).down('img.loader_gif').setStyle({
'left': ($(params.gallery_container).getWidth()/2)-15+'px'
});
// observe back button
$$('#'+params.gallery_container+' .back_button')[0].observe('click', (function(){
this.close(params);
}).bind(this));
}
$('slider_'+this.slider_counter).insert({
bottom: $(params.view_id)
});
}, // i4_Image.prepair_gallery_container()
register_keylistener: function(params) {
this.listener_keydown_next = i4_Document_listener.keydown({
keys: [39],
callback: (function() {
if ($$('#'+params.gallery_container+' .next')[0].getStyle('display') != 'none') {
J('#'+$(params.gallery_container).down('.slider').readAttribute('id')).cycle('next');
}
}).bind(this)
});
this.listener_keydown_prev = i4_Document_listener.keydown({
keys: [37],
callback: (function() {
if ($$('#'+params.gallery_container+' .prev')[0].getStyle('display') != 'none') {
J('#'+$(params.gallery_container).down('.slider').readAttribute('id')).cycle('prev');
}
}).bind(this)
});
this.listener_keydown_esc = i4_Document_listener.keydown({
keys: [27],
callback: (function() {
this.close(params);
}).bind(this)
});
}, // i4_Image.register_keylistener()
close: function(params) {
$(params.gallery_container).hide();
$(params.view_container).show();
i4_Document_listener.stop_keydown(this.listener_keydown_next);
i4_Document_listener.stop_keydown(this.listener_keydown_prev);
i4_Document_listener.stop_keydown(this.listener_keydown_esc);
} // i4_Image.close()
} // i4_Image