im Quelltext ist doch der Code eigentlich ersichtlich. Aber ich kann ihn auch hier einfügen. Benötigt nur etwas Platz
Code: Alles auswählen
$(document).ready(
function(){
// This initialises carousels on the container elements specified, in this case, carousel1.
$("#carousel1").CloudCarousel({
xPos: 700,
yPos: 300,
// buttonLeft: $("#left-but"),
// buttonRight: $("#right-but"),
altBox: $("#alt-text"),
titleBox: $("#title-text"),
});
}
);
//////////////////////////////////////////////////////////////////////////////////
// CloudCarousel V1.0.5
// (c) 2011 by R Cecco. <http://www.professorcloud.com>
// MIT License
//
// Reflection code based on plugin by Christophe Beyls <http://www.digitalia.be>
//
// Please retain this copyright header in all versions of the software
//////////////////////////////////////////////////////////////////////////////////
(function($) {
// START Reflection object.
// Creates a reflection for underneath an image.
// IE uses an image with IE specific filter properties, other browsers use the Canvas tag.
// The position and size of the reflection gets updated by updateAll() in Controller.
function Reflection(img, reflHeight, opacity) {
var reflection, cntx, imageWidth = img.width, imageHeight = img.width, gradient, parent;
parent = $(img.parentNode);
this.element = reflection = parent.append("<canvas class='reflection' />").find(':last')[0];
if ( !reflection.getContext && $.browser.msie) {
this.element = reflection = parent.append("<img class='reflection' />").find(':last')[0];
reflection.style.filter = "flipv progid:DXImageTransform.Microsoft.Alpha(opacity=" + (opacity * 100) + ", style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy=" + (reflHeight / imageHeight * 100) + ")";
}
else {
cntx = reflection.getContext("2d");
try {
$(reflection).attr({width: imageWidth, height: reflHeight});
cntx.save();
cntx.translate(0, imageHeight-1);
cntx.scale(1, -1);
cntx.drawImage(img, 0, 0, imageWidth, imageHeight);
cntx.restore();
cntx.globalCompositeOperation = "destination-out";
gradient = cntx.createLinearGradient(0, 0, 0, reflHeight);
gradient.addColorStop(0, "rgba(255, 255, 255, " + (1 - opacity) + ")");
gradient.addColorStop(1, "rgba(255, 255, 255, 1.0)");
cntx.fillStyle = gradient;
cntx.fillRect(0, 0, imageWidth, reflHeight);
}
catch(e) {
return;
}
}
// Store a copy of the alt and title attrs into the reflection
// $(reflection).attr({ 'alt': $(img).attr('alt'), title: $(img).attr('title')} ); Anzeige von alt und title im Spiegelbild wird nicht benötigt
} //END Reflection object
// START Item object.
// A wrapper object for items within the carousel.
var Item = function(imgIn, options){
this.orgWidth = imgIn.width;
this.orgHeight = imgIn.height;
this.image = imgIn;
this.reflection = null;
this.alt = imgIn.alt;
this.title = imgIn.title;
this.imageOK = false;
this.options = options;
this.imageOK = true;
if (this.options.reflHeight > 0){
this.reflection = new Reflection(this.image, this.options.reflHeight, this.options.reflOpacity);
}
$(this.image).css('position','absolute'); // Bizarre. This seems to reset image width to 0 on webkit!
}; // END Item object
// Controller object.
// This handles moving all the items, dealing with mouse clicks etc.
var Controller = function(container, images, options){
var items = [], funcSin = Math.sin, funcCos = Math.cos, ctx=this;
this.controlTimer = 0;
this.stopped = false;
//this.imagesLoaded = 0;
this.container = container;
this.xRadius = options.xRadius;
this.yRadius = options.yRadius;
this.showFrontTextTimer = 0;
this.autoRotateTimer = 0;
if (options.xRadius === 0){
this.xRadius = ($(container).width()/2.3);
}
if (options.yRadius === 0){
this.yRadius = ($(container).height()/6);
}
this.xCentre = options.xPos;
this.yCentre = options.yPos;
this.frontIndex = 0; // Index of the item at the front
// Start with the first item at the front.
this.rotation = this.destRotation = Math.PI/2;
this.timeDelay = 2200/options.FPS;
// Turn on the infoBox
if(options.altBox !== null){
$(options.altBox).css('display','block');
$(options.titleBox).css('display','block');
}
// Turn on relative position for container to allow absolutely positioned elements
// within it to work.
// $(container).css({ position:'relative', overflow:'hidden'}); Von mir auskommentiert
$(options.buttonLeft).css('display','inline');
$(options.buttonRight).css('display','inline');
// Setup the buttons.
$(options.buttonLeft).bind('mouseup',this,function(event){
event.data.rotate(-1);
return false;
});
$(options.buttonRight).bind('mouseup',this,function(event){
event.data.rotate(1);
return false;
});
// You will need this plugin for the mousewheel to work: http://plugins.jquery.com/project/mousewheel
if (options.mouseWheel){
$(container).bind('mousewheel',this,function(event, delta){
event.data.rotate(delta);
return false;
});
}
$(container).bind('mouseover click',this,function(event){
clearInterval(event.data.autoRotateTimer); // Stop auto rotation if mouse over.
var text = $(event.target).attr('alt');
// If we have moved over a carousel item, then show the alt and title text.
if ( text !== undefined && text !== null ){
// clearTimeout(event.data.showFrontTextTimer);
// $(options.altBox).html( ($(event.target).attr('alt') ));
// $(options.titleBox).html( ($(event.target).attr('title') ));
if ( options.bringToFront && event.type == 'click' ){
var idx = $(event.target).data('itemIndex');
var frontIndex = event.data.frontIndex;
//var diff = idx - frontIndex;
var diff = (idx - frontIndex) % images.length;
if (Math.abs(diff) > images.length / 2) {
diff += (diff > 0 ? -images.length : images.length);
}
event.data.rotate(-diff);
}
}
});
// If we have moved out of a carousel item (or the container itself),
// restore the text of the front item in 1 second.
$(container).bind('mouseout',this,function(event){
var context = event.data;
clearTimeout(context.showFrontTextTimer);
context.showFrontTextTimer = setTimeout( function(){context.showFrontText();},1000);
context.autoRotate(); // Start auto rotation.
});
// Prevent items from being selected as mouse is moved and clicked in the container.
// Halten Sie Sachen davon ab, ausgewählt zu werden, als Maus bewegt und im Behälter geklickt wird.
$(container).bind('mousedown',this,function(event){
event.data.container.focus();
return false;
});
container.onselectstart = function () { return false; }; // For IE.
this.innerWrapper = $(container).wrapInner('<div style="position:absolute;width:100%;height:100%;"/>').children()[0];
// Shows the text from the front most item.
this.showFrontText = function(){
if ( items[this.frontIndex] === undefined ) { return; } // Images might not have loaded yet.
// $(options.altBox).html( $(items[this.frontIndex].image).attr('alt'));
$(options.titleBox).html( $(items[this.frontIndex].image).attr('title')); // Hier werden die Daten aus dem Frontbild geholt
$(options.altBox).html( $(items[this.frontIndex].image).attr('src')); // Url für "Bild-Mitte" holen
var url = $(items[this.frontIndex].image).attr('src'); // Url in Variable speichern
$('#mitte').attr('src', url); // Url an "Bild-Mitte" übergeben
};
this.go = function(){
if(this.controlTimer !== 0) { return; }
var context = this;
this.controlTimer = setTimeout( function(){context.updateAll();},this.timeDelay);
};
this.stop = function(){
clearTimeout(this.controlTimer);
this.controlTimer = 0;
};
// Starts the rotation of the carousel. Direction is the number (+-) of carousel items to rotate by.
this.rotate = function(direction){
this.frontIndex -= direction;
this.frontIndex %= items.length;
this.destRotation += ( Math.PI / items.length ) * ( 2*direction );
this.showFrontText();
this.go();
};
this.autoRotate = function(){
if ( options.autoRotate !== 'no' ){
var dir = (options.autoRotate === 'right')? 1 : -1;
this.autoRotateTimer = setInterval( function(){ctx.rotate(dir); }, options.autoRotateDelay );
}
};
// This is the main loop function that moves everything.
this.updateAll = function(){
var minScale = options.minScale; // This is the smallest scale applied to the furthest item.
var smallRange = (1-minScale) * 0.5;
var w,h,x,y,scale,item,sinVal;
var change = (this.destRotation - this.rotation);
var absChange = Math.abs(change);
this.rotation += change * options.speed;
if ( absChange < 0.001 ) { this.rotation = this.destRotation; }
var itemsLen = items.length;
var spacing = (Math.PI / itemsLen) * 2;
//var wrapStyle = null;
var radians = this.rotation;
var isMSIE = $.browser.msie;
// Turn off display. This can reduce repaints/reflows when making style and position changes in the loop.
// See http://dev.opera.com/articles/view/efficient-javascript/?page=3
this.innerWrapper.style.display = 'none';
var style;
var px = 'px', reflHeight;
var context = this;
for (var i = 0; i<itemsLen ;i++){
item = items[i];
sinVal = funcSin(radians);
scale = ((sinVal+1) * smallRange) + minScale;
x = this.xCentre + (( (funcCos(radians) * this.xRadius) - (item.orgWidth*0.1)) * scale); /* Originalwert: 0.5 Verschiebt die vorderen Bilder aus der Mitte */
y = this.yCentre + (( (sinVal * this.yRadius) ) * scale);
if (item.imageOK){
var img = item.image;
w = img.width = item.orgWidth * scale * 0.2; // 0.2 verändert die Originalweite des Bildes
h = img.height = item.orgHeight * scale *0.2; // 0.2 verändert die Originalhöhe des Bildes
img.style.left = x + px ;
img.style.top = y + px;
img.style.zIndex = "" + (scale * 100)>>0; // >>0 = Math.foor(). Firefox doesnt like fractional decimals in z-index.
if (item.reflection !== null){
reflHeight = options.reflHeight * scale;
style = item.reflection.element.style;
style.left = x + px;
style.top = y + h + options.reflGap * scale + px;
style.width = w + px;
if (isMSIE){
style.filter.finishy = (reflHeight / h * 100);
}
else{
style.height = reflHeight + px;
}
}
}
radians += spacing;
}
// Turn display back on.
this.innerWrapper.style.display = 'block';
// If we have a preceptable change in rotation then loop again next frame.
if ( absChange >= 0.001 ){
this.controlTimer = setTimeout( function(){context.updateAll();},this.timeDelay);
}
else{
// Otherwise just stop completely.
this.stop();
}
}; // END updateAll
// Create an Item object for each image
// func = function(){return;ctx.updateAll();} ;
// Check if images have loaded. We need valid widths and heights for the reflections.
this.checkImagesLoaded = function(){
var i;
for(i=0;i<images.length;i++) {
if ( (images[i].width === undefined) || ( (images[i].complete !== undefined) && (!images[i].complete) )){
return;
}
}
for(i=0;i<images.length;i++) {
items.push( new Item( images[i], options ) );
$(images[i]).data('itemIndex',i);
}
// If all images have valid widths and heights, we can stop checking.
clearInterval(this.tt);
this.showFrontText();
this.autoRotate();
this.updateAll();
};
this.tt = setInterval( function(){ctx.checkImagesLoaded();},50);
}; // END Controller object
// The jQuery plugin part. Iterates through items specified in selector and inits a Controller class for each one.
$.fn.CloudCarousel = function(options) {
this.each( function() {
options = $.extend({}, {
reflHeight:40,
reflOpacity:1,
reflGap:15,
minScale:0.6,
xPos:0,
yPos:0,
xRadius:740,
yRadius:380,
altBox:null,
titleBox:null,
FPS: 30,
autoRotate: 'yes',
autoRotateDelay: 2500,
speed:0.1,
mouseWheel: false,
bringToFront: true
},options );
// Create a Controller for each carousel.
$(this).data('cloudcarousel', new Controller( this, $('.cloudcarousel',$(this)), options) );
});
return this;
};
})
(jQuery);
Meine Veränderungen sind nicht so gravierend. Bei meinen Änderungen habe ich einen kurzen Kommentar (in deutsch) dazu geschrieben. Die englischen Kommentare sind nicht von mir.
Ansonsten habe ich noch einiges vom Style in eine CSS-Datei ausgelagert. Allerdings hatte das keinen Einfluss auf die von mir angesprochenen Punkte.
für all eure Bemühungen!