Kép címére állva egyéb funkciók is elérhetők', interact: ' ' }, about: { text: ' ', title: ' ', link: 'http://creamotiv.hu' }, slideshow: { start: "Vetítés indítása", stop: "Vetítés vége" } }, show_linkback: true, keys: { close: 'b', prev: 'e', next: 'k', slideshow: 'v' }, handlers: { // For custom actions show: null }, opacity: 0.9, padding: null, // if null - autodetect speed: 400, // Duration of effect, milliseconds rel: 'cbsbox', // What to look for in the rels auto_relify: true, // should we automaticly do the rels? scroll_with: true, // should the cbsbox scroll with the page? baseurl: null, template: '\ \ ', // ----------------- // Functions //cbsbox konstruktor construct: function ( options ) { //már egyszer inicializáltunk? var initial = typeof this.constructed === 'undefined' || this.constructed === false; //konstruktorunk lefutott állapotba állítása this.constructed = true; //felépítettük a dom-ot már? var domReady = initial; // Prepare options options = $.extend({}, options); // ------------------- // Handle files // Add baseurl if ( initial && (typeof options.files === 'undefined') ) { // Load the files like default // Get the src of the first script tag that includes our js file (with or without an appendix) this.src = $('script[src*='+this.files.js.cbsbox+']:first').attr('src'); // Make sure we found ourselves if ( !this.src ) { // We didn't $.log('WARNING', 'cbsbox was not able to find it\'s javascript script tag necessary for auto-inclusion.'); this.finish(); // We don't work with files anymore, so don't care for domReady domReady = false; } else { // We found ourself // automatikus baseurl detektalas, ha nincs megadva direktbe if(this.baseurl == null) this.baseurl = this.src.substring(0, this.src.indexOf(this.files.js.cbsbox)); // Apply baseurl to files var me = this; $.each(this.files, function(group, val){ $.each(this, function(file, val){ me.files[group][file] = me.baseurl+val; }); }); delete me; domReady = false; } } else if ( typeof options.files === 'object' ) { // We have custom files var me = this; $.each(options.files, function(group, val){ $.each(this, function(file, val){ this.options[file] = me.baseurl+val; }); }); delete me; } else { // Don't have any files, so no need to perform domReady domReady = false; } // ------------------- // Apply options for ( i in this.options ) { // Cycle through the options var name = this.options[i]; if ( (typeof options[name] === 'object') && (typeof this[name] === 'object') ) { // We have a group like text or files this.options[name] = $.extend(this.options[name], options[name]); } else if ( typeof options[name] !== 'undefined' ) { // We have that option, so apply it this.options[name] = options[name]; } } // ------------------- // Handle our DOM if ( !domReady) { // We have reason to handle the dom $(function() { // DOM is ready, so fire our DOM handler $.cbsBox.domReady(); }); } // ------------------- // Finish Up // All good return true; }, replace: function(text, expr, val) { while(expr.test(text)) { text = text.replace(expr, val); } return text; }, domReady: function ( ) { // ------------------- // Append display // Include stylesheet var stylesheets = this.files.css; var bodyEl = document.getElementsByTagName($.browser.safari ? 'head' : 'body')[0]; for ( stylesheet in stylesheets ) { var linkEl = document.createElement('link'); linkEl.type = 'text/css'; linkEl.rel = 'stylesheet'; linkEl.media = 'screen'; linkEl.href = stylesheets[stylesheet]; linkEl.id = 'cbsbox-stylesheet-'+stylesheet; $('#'+linkEl.id).remove(); bodyEl.appendChild(linkEl); } delete stylesheets; delete bodyEl; // template elokeszitese $('#cbsbox,#cbsbox-overlay').remove(); var template = this.template; template = this.replace(template, /%about_title%/, this.text.about.title); template = this.replace(template, /%about_text%/, this.text.about.text); template = this.replace(template, /%help_close%/, this.text.help.close); template = this.replace(template, /%help_interact%/, this.text.help.interact); template = this.replace(template, /%images_loading%/, this.files.images.loading); template = this.replace(template, /%images_slideShowBar%/, this.files.images.slideShowBar); template = this.replace(template, /%closeInfo%/, this.text.closeInfo); if(this.files.images.close) { this.text.close+="
![]("+this.files.images.close+")
";
}
template = this.replace(template, /%close%/, this.text.close);
template = this.replace(template, /%slideshow_start%/, this.text.slideshow.start);
template = this.replace(template, /%slideshow_stop%/, this.text.slideshow.stop);
$('body').append(template);
// Update Boxes - for some crazy reason this has to be before the hide in safari and konqueror
this.resizeBoxes();
this.repositionBoxes();
// Hide
$('#cbsbox,#cbsbox-overlay,#cbsbox-overlay-text-interac,#cbsbox-startStop-stop,#cbsbox-thumbnailNavContainer').hide();
//elotoltunk par kepet a templatehez...
$.each(this.files.images, function()
{ // Proload the image
var preloader = new Image();
preloader.onload = function() {
preloader.onload = null;
preloader = null;
}; preloader.src = this;
});
// -------------------
// Apply events
// If the window resizes, act appropriatly
$(window).unbind().resize(function ()
{ // The window has been resized
$.cbsBox.resizeBoxes();
$.cbsBox.repositionBoxes();
});
// If the window scrolls, act appropriatly
if ( $.cbsBox.scroll_with )
{ // We want to
$(window).scroll(function ()
{ // The window has scrolled
$.cbsBox.repositionBoxes();
});
}
// Prev
$('#cbsbox-nav-btnPrev').unbind().hover(function() { // over
$(this).css({ 'background' : 'url(' + $.cbsBox.files.images.prev + ') left 45% no-repeat' });
},function() { // out
$(this).css({ 'background' : 'transparent url(' + $.cbsBox.files.images.blank + ') no-repeat' });
}).click(function() {
$.cbsBox.showImage($.cbsBox.images.prev());
return false;
});
// Next
$('#cbsbox-nav-btnNext').unbind().hover(function() { // over
$(this).css({ 'background' : 'url(' + $.cbsBox.files.images.next + ') right 45% no-repeat' });
},function() { // out
$(this).css({ 'background' : 'transparent url(' + $.cbsBox.files.images.blank + ') no-repeat' });
}).click(function() {
$.cbsBox.showImage($.cbsBox.images.next());
return false;
});
// Help
if ( this.show_linkback )
{ // Linkback exists so add handler
$('#cbsbox-overlay-text-about a').click(function(){window.open($.cbsBox.text.about.link); return false;});
}
$('#cbsbox-overlay-text-close').unbind().hover(
function(){
$('#cbsbox-overlay-text-interact').fadeIn();
},
function(){
$('#cbsbox-overlay-text-interact').fadeOut();
}
);
// Assign close clicks
$('#cbsbox-overlay, #cbsbox-loading-link, #cbsbox-btnClose, #cbsbox-close-button').unbind().click(function() {
$.cbsBox.finish();
return false;
});
// -------------------
// Finish Up
// Relify
if ( $.cbsBox.auto_relify )
{ // We want to relify, no the user
$.cbsBox.relify();
}
// All good
return true;
},
relify: function ( )
{ // Create event
//
var groups = {};
var groups_n = 0;
var orig_rel = this.rel;
// Create the groups
$.each($('a[rel^="'+orig_rel+'"]'), function(index, obj){
// Get the group
var rel = $(obj).attr('rel');
var s = rel.indexOf('[');
var s2 = rel.indexOf(',');
var s3 = rel.indexOf(']');
//rellel átadott paraméterek levágása
if ( s > 0 && s3 > 0) {
if(s2 > 0) {
rel = rel.substring((s+1),s2);
} else {
rel = rel.substring((s+1),s3);
}
} else {
var rel = groups_n;
}
// Are we really a group
if ( rel === orig_rel )
{ // We aren't
rel = groups_n; // we are individual
}
// Does the group exist
if ( typeof groups[rel] === 'undefined' )
{ // Make the group
groups[rel] = [];
groups_n++;
}
// Append the image
groups[rel].push(obj);
});
// cbsbox groups
$.each(groups, function(index, group){
$(group).cbsbox();
});
// Done
return true;
},
init: function ( image /*int*/, images /*[]*/ )
{ // Init a batch of cbsboxes
// Establish images
if ( typeof images === 'undefined' )
{
images = image;
image = 0;
}
// Clear
this.images.clear();
// Add images
if ( !this.images.add(images) )
{ return false; }
// Do we need to bother
if ( this.images.empty() )
{ // No images
$.log('WARNING', 'cbsbox started, but no images: ', image, images);
this.finish();
return false;
}
// Set active
if ( !this.images.active(image) )
{ return false; }
// Done
return true;
},
start: function ( )
{ // Display the cbsbox
// We are alive
this.visible = true;
// Adjust scrolling
if ( this.scroll === 'disable' )
{ //
$(document.body).css('overflow', 'hidden');
}
// Fix attention seekers
$('embed, object, select').css('visibility', 'hidden');//.hide(); - don't use this, give it a go, find out why!
// Resize the boxes appropriatly
this.resizeBoxes('general');
// Reposition the Boxes
this.repositionBoxes({'speed':0});
// Hide things
$('#cbsbox-infoFooter').hide(); // we hide this here because it makes the display smoother
$('#cbsbox-image,#cbsbox-nav,#cbsbox-nav-btnPrev,#cbsbox-nav-btnNext,#cbsbox-infoBox,#cbsbox-infoFooter,#cbsbox-iframe-content,#cbsbox-inline-content').hide();
// Display the boxes
$('#cbsbox-overlay').css('opacity',this.opacity).fadeIn(400, function(){
// Show the cbsbox
$('#cbsbox').fadeIn(300);
// Display first image
if ( !$.cbsBox.showImage($.cbsBox.images.active()) )
{ $.cbsBox.finish(); return false; }
});
// All done
return true;
},
finish: function ( )
{ // Get rid of cbsbox
$.cbsBox.slideShowStop();
$('#cbsbox-slideShowBar').stop();
$('#cbsbox').hide();
$('#cbsbox-overlay').fadeOut(function() { $('#cbsbox-overlay').hide(); });
// Fix attention seekers
$('embed, object, select').css({ 'visibility' : 'visible' });//.show();
},
resizeBoxes: function ( )
{
// Style overlay and show it
$('#cbsbox-overlay').css({
width: $(document).width(),
height: $(document).height()
});
},
repositioning: false, // are we currently repositioning
reposition_failsafe: false, // failsafe
repositionBoxes: function ( options )
{
// Prepare
if ( $.cbsBox.repositioning )
{ // Already here
$.cbsBox.reposition_failsafe = true;
return null;
}
$.cbsBox.repositioning = true;
// Options
options = $.extend({}, options);
options.callback = options.callback || null;
options.speed = options.speed || 'slow';
// Get page scroll
var pageScroll = this.getPageScroll();
// Figure it out
var nHeight = options.nHeight+50 || parseInt($('#cbsbox').height(),10) || $(document).height()/3;
// Display cbsbox in center
var nTop = pageScroll.yScroll + ($(document.body).height() /*frame height*/ - nHeight) / 2.5;
var nLeft = pageScroll.xScroll;
// Animate
var css = {
left: nLeft,
top: nTop
};
if (options.speed) {
$('#cbsbox').animate(css, 'slow', function(){
if ( $.cbsBox.reposition_failsafe )
{ // Fire again
$.cbsBox.repositioning = $.cbsBox.reposition_failsafe = false;
$.cbsBox.repositionBoxes(options);
}
else
{ // Done
$.cbsBox.repositioning = false;
if ( options.callback )
{ // Call the user callback
options.callback();
}
}
});
}
else
{
$('#cbsbox').css(css);
if ( $.cbsBox.reposition_failsafe )
{ // Fire again
$.cbsBox.repositioning = $.cbsBox.reposition_failsafe = false;
$.cbsBox.repositionBoxes(options);
}
else
{ // Done
$.cbsBox.repositioning = false;
}
}
// Done
return true;
},
showImage: function ( image, options )
{
// Establish image
image = this.images.get(image);
if ( !image ) { return image; }
// Establish options
options = $.extend({step:1}, options);
// Split up below for jsLint compliance
if(image.type=="image") {
var skipped_step_1 = options.step > 1 && this.images.active().src !== image.src;
var skipped_step_2 = options.step > 2 && $('#cbsbox-image').attr('src') !== image.src;
if ( skipped_step_1 || skipped_step_2 )
{ // Force step 1
$.log('We wanted to skip a few steps: ', options, image, skipped_step_1, skipped_step_2);
options.step = 1;
}
}
// What do we need to do
switch ( options.step )
{
// ---------------------------------
// We need to preload
case 1:
// Disable keyboard nav
this.keyboardNavDisable();
// Disable thumbnail nav
this.thumbnailNavDisable();
// Show the loading image
$('#cbsbox-loading').show();
// Hide things
$('#cbsbox-image,#cbsbox-nav,#cbsbox-nav-btnPrev,#cbsbox-nav-btnNext,#cbsbox-infoBox,#cbsbox-infoBoxTop,#cbsbox-slideShowContainer,#cbsbox-inline-content ,#cbsbox-iframe-content').hide();
// Remove show info events
$('#cbsbox-imageBox').unbind();
// ^ Why? Because otherwise when the image is changing, the info pops out, not good!
// Make the image the active image
if ( !this.images.active(image) ) { return false; }
if(image.type=="image") {
// Preload the image, and continue to step 2 once loaded
var preloader = new Image();
preloader.onload = function() {
$.cbsBox.showImage(null, {step:2, width:preloader.width, height:preloader.height});
preloader.onload = null;
preloader = null;
};
preloader.src = image.src;
} else {
$.cbsBox.showImage(null, {step:2, width:image.width, height:image.height});
}
// Done
break;
// ---------------------------------
// Resize the container
case 2:
if(image.type == "image") {
// Set image src
$('#cbsbox-image').attr('src', image.src);
}
// Set container border (Moved here for Konqueror fix - Credits to Blueyed)
if ( typeof this.padding === 'undefined' || this.padding === null || isNaN(this.padding) )
{ // Autodetect
this.padding = parseInt($('#cbsbox-imageContainer').css('padding-left'), 10) || parseInt($('#cbsbox-imageContainer').css('padding'), 10) || 15;
}
// Establish options
options = $.extend({width:640, height:480}, options);
options.width = parseInt(options.width)?parseInt(options.width):640;
options.height = parseInt(options.height)?parseInt(options.height):480;
// Resize image box
// i:image, c:current, n:new, d:difference
// Get image dimensions
var iWidth = parseInt(options.width);
var iHeight = parseInt(options.height);
// Get current width and height
var cWidth = $('#cbsbox-imageBox').width();
var cHeight = $('#cbsbox-imageBox').height();
// Get the width and height of the selected image plus the padding
var nWidth = (iWidth + (this.padding * 2)); // Plus the image's width and the left and right padding value
var nHeight = (iHeight + (this.padding * 2)); // Plus the image's height and the left and right padding value
var docWidth = $(window).innerWidth();
var docHeight = $(window).innerHeight();
if(docWidth < nWidth) {
nWidth = parseInt(docWidth-100);
nHeight = parseInt(nWidth/iWidth*iHeight);
}
if(docHeight < nHeight) {
nHeight = parseInt(docHeight-100);
nWidth = parseInt(nHeight/iHeight*iWidth);
}
// Diferences
var dWidth = cWidth - nWidth;
var dHeight = cHeight - nHeight;
// Lets do this here because we can - NO because we know the heights here
$('#cbsbox-nav-btnPrev,#cbsbox-nav-btnNext').css({ height: nHeight });
$('#cbsbox-infoBox').css({ width: nWidth });
$('#cbsbox-infoBoxTop').css({ width: nWidth });
$('#cbsbox-image').css({ width: nWidth, height: nHeight });
if(!$.browser.msie) {
var bWidth = nWidth + parseInt($('#cbsbox-imageBox').css("border-left-width"))+parseInt($('#cbsbox-imageBox').css("border-right-width"));
} else {
var bWidth = nWidth;
}
// Reposition the Boxes
this.repositionBoxes({'nHeight':nHeight});
if(image.type=="html"){
$('#cbsbox-imageBox').animate({ width: nWidth, height: nHeight }, this.speed);
$('#cbsbox-over').animate({ width: bWidth}, this.speed);
$('#cbsbox-bottom').animate({ width: bWidth}, this.speed);
if(image.open=="div") {
$('#cbsbox-inline-content').load(image.src + "?ajax=" + (new Date().getTime()),function(evt){
$.cbsBox.showImage(null, {step:5});
$.cbsBox.relify();
});
} else {
$('#cbsbox-iframe-content').attr("src",image.src + "?ajax=" + (new Date().getTime()));
$.cbsBox.showImage(null, {step:5});
$('#cbsbox-iframe-content').show();
}
return true;
}
// Do we need to wait? (just a nice effect to counter the other
if ( dWidth === 0 && dHeight === 0 )
{ // We are the same size
this.pause(this.speed/3);
$.cbsBox.showImage(null, {step:3});
}
else
{ // We are not the same size
// Animate
$('#cbsbox-imageBox').animate({ width: nWidth, height: nHeight }, this.speed, function ( ) { $.cbsBox.showImage(null, {step:3}); } );
$('#cbsbox-over').animate({ width: bWidth}, this.speed);
$('#cbsbox-bottom').animate({ width: bWidth}, this.speed);
}
// Done
break;
// ---------------------------------
// Display the image
case 3:
// Hide loading
$('#cbsbox-loading').hide();
// Animate image
$('#cbsbox-image').fadeIn(500, function() {$.cbsBox.showImage(null, {step:4}); });
// Start the proloading of other images
this.preloadNeighbours();
// Fire custom handler show
if ( $.cbsBox.handlers.show !== null )
{ // Fire it
$.cbsBox.handlers.show(image);
}
if ($.cbsBox.images.size() > 1) {
var thumbnails = '';
var allThumbsWidth = 0;
for (i = 0; i < $.cbsBox.images.size(); i++) {
var preThumbs = new Image();
var image = $.cbsBox.images.get(i);
preThumbs.src = image.src;
thumbnails += '