Fotoslider
Moderator: HTML-Laie
- Ratoncito
- Webmaster
- Beiträge: 109
- Registriert: So 24. Nov 2013, 09:59
- Mein Vorname: Wolfgang
Fotoslider
Hallo zusammen,
kaum da und schon um Hilfe rufen
Seit einiger Zeit schlage ich mich mit einem Fotoslider herum. Der Code ist (leider) nicht von mir, denn dazu reichen meine Kenntnisse leider nicht aus. Nur ein paar kleine Änderungen habe ich auf die Reihe bekommen.
Ansehen kann man sich die Testversion hier:
http://wr-foto.npage.de/001-cloud-queretaro.html
Folgende Details würde ich gerne einfügen oder abändern:
1.) Drehrichtung und Geschwindigkeit über die Stellung des Mauszeigers
2.) Beim Bewegen der Vorschaubilder im Uhrzeigersinn durch Anklicken wechselt das Foto in der Mitte nur bis zum ersten Foto
4.) Das Foto in der Mitte sollte über einen netten Effekt wechseln
4.) Beim Verlassen des Sliders und der Rückkehr über den Pfeil "eine Seite zurück" des Browsers werden keine Bilder angezeigt. erst nach F5 sind diese wieder sichtbar
5.) Beim Öffnen des Sliders werden die Fotos in Originalgröße angezeigt. Eine Anzeige der Fotos sollte aber zu Beginn in kleiner Größe sein oder ganz verhindert werden.
Ich hoffe, dass es hier Experten gibt, die mir bei meinen Problemen helfen können.
Für Eure Bemühungen im Voraus schon mal besten Dank
Saludos - Wolfgang
kaum da und schon um Hilfe rufen
Seit einiger Zeit schlage ich mich mit einem Fotoslider herum. Der Code ist (leider) nicht von mir, denn dazu reichen meine Kenntnisse leider nicht aus. Nur ein paar kleine Änderungen habe ich auf die Reihe bekommen.
Ansehen kann man sich die Testversion hier:
http://wr-foto.npage.de/001-cloud-queretaro.html
Folgende Details würde ich gerne einfügen oder abändern:
1.) Drehrichtung und Geschwindigkeit über die Stellung des Mauszeigers
2.) Beim Bewegen der Vorschaubilder im Uhrzeigersinn durch Anklicken wechselt das Foto in der Mitte nur bis zum ersten Foto
4.) Das Foto in der Mitte sollte über einen netten Effekt wechseln
4.) Beim Verlassen des Sliders und der Rückkehr über den Pfeil "eine Seite zurück" des Browsers werden keine Bilder angezeigt. erst nach F5 sind diese wieder sichtbar
5.) Beim Öffnen des Sliders werden die Fotos in Originalgröße angezeigt. Eine Anzeige der Fotos sollte aber zu Beginn in kleiner Größe sein oder ganz verhindert werden.
Ich hoffe, dass es hier Experten gibt, die mir bei meinen Problemen helfen können.
Für Eure Bemühungen im Voraus schon mal besten Dank
Saludos - Wolfgang
Zuletzt geändert von Ratoncito am Mi 11. Dez 2013, 18:15, insgesamt 2-mal geändert.
- Jasko
- Globaler Moderator
- Beiträge: 3278
- Registriert: Di 21. Feb 2012, 06:59
- Mein Vorname: Herr Jasmin ;)
- Wohnort: Rheinland-Pfalz
- Kontaktdaten:
Re: Fotoslider
Leider kann man ohne Orginalcode sehr schwer helfen.
Wenn du veraenderungen schon vorgenommen hast, koennte es passiert sein das Einstellungen des Orginalcodes veraendert wurden die zum richtigen funktionieren wichtig sind.
Also wenn du einen Link zum Ursprung hast koennte man sicher deine Liste abarbeiten und die Probleme versuchen zu loesen.
MfG
Wenn du veraenderungen schon vorgenommen hast, koennte es passiert sein das Einstellungen des Orginalcodes veraendert wurden die zum richtigen funktionieren wichtig sind.
Also wenn du einen Link zum Ursprung hast koennte man sicher deine Liste abarbeiten und die Probleme versuchen zu loesen.
MfG
- Ratoncito
- Webmaster
- Beiträge: 109
- Registriert: So 24. Nov 2013, 09:59
- Mein Vorname: Wolfgang
Re: Fotoslider
Hallo Jasko,Jasko hat geschrieben:Leider kann man ohne Orginalcode sehr schwer helfen.
Wenn du veraenderungen schon vorgenommen hast, koennte es passiert sein das Einstellungen des Orginalcodes veraendert wurden die zum richtigen funktionieren wichtig sind.
Also wenn du einen Link zum Ursprung hast koennte man sicher deine Liste abarbeiten und die Probleme versuchen zu loesen.
MfG
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);
Ansonsten habe ich noch einiges vom Style in eine CSS-Datei ausgelagert. Allerdings hatte das keinen Einfluss auf die von mir angesprochenen Punkte.
Saludos - Wolfgang
- Jasko
- Globaler Moderator
- Beiträge: 3278
- Registriert: Di 21. Feb 2012, 06:59
- Mein Vorname: Herr Jasmin ;)
- Wohnort: Rheinland-Pfalz
- Kontaktdaten:
Re: Fotoslider
So bald ich mehr Zeit habe probiere ich deinen Code aus und deine Vorschlaege dan melde ich mich wieder.
MfG
MfG
- thaileben
- Moderator
- Beiträge: 7772
- Registriert: So 26. Sep 2010, 03:47
- Mein Vorname: Jürg
- Wohnort: nahe Ubon Ratchathani / Thailand
- Kontaktdaten:
Re: Fotoslider
Hi Wolfgang
Ich finde du hast den Slider ganz schön verändert --ich meine zum ersten Muster
mit den anklicken und das Bild in der mitte in gross betrachten klappt nun ganz gut -- schön.
Ich denke Jasko kann dir bestimmt weiterhelfen
Jürg
Ich finde du hast den Slider ganz schön verändert --ich meine zum ersten Muster
mit den anklicken und das Bild in der mitte in gross betrachten klappt nun ganz gut -- schön.
Ich denke Jasko kann dir bestimmt weiterhelfen
Jürg
- Ratoncito
- Webmaster
- Beiträge: 109
- Registriert: So 24. Nov 2013, 09:59
- Mein Vorname: Wolfgang
Re: Fotoslider
Hallo,Jasko hat geschrieben:So bald ich mehr Zeit habe probiere ich deinen Code aus und deine Vorschlaege dan melde ich mich wieder.
MfG
nein, ich möchte nicht drängeln
Aber es wird Zeit für ein kleines Update, denn ich war in der Zwischenzeit ein wenig fleißig. Zwar habe ich die oben erwähnten Probleme nicht beseitigt, aber der Slider ist nun mit einigen Änderungen auf meine eigene Seite umgezogen
Zu finden ist er nun hier:
http://wr-foto.npage.de/001-cloud-queretaro.html
Allerdings gibt es ein riesiges Problem, bei dem ich keine Lösung finde. In Opera werden die Bilder nicht angezeigt
Im Entwicklertool wird mir bei Scripte folgende Zeile bemängelt:
var basehref = document.getElementsByTagName("base")[0].href;
Fehler:
Unhandled Error: Cannot convert 'document.getElementsByTagName("base")[0]' to object
Nun kann ich mit der Information nichts anfangen, dazu reichen meine Kenntnisse leider nicht aus. Und was noch schlimmer ist, der Code ist nicht von mir, sondern wird von Npage eingefügt.
Hat jemand einen Tipp?
Vielen Dank für Eure Hilfe - Wolfgang
- Jasko
- Globaler Moderator
- Beiträge: 3278
- Registriert: Di 21. Feb 2012, 06:59
- Mein Vorname: Herr Jasmin ;)
- Wohnort: Rheinland-Pfalz
- Kontaktdaten:
Re: Fotoslider
Wenn der Fehlercode nicht von dir ist kannst du relativ wenig da machen. Du solltest den Support anschreiben und um Hilfe bei diesem Fehler fragen. Eine Frage habe ich da noch, wird der Fehler nur auf dieser Seite bemengellt wo deine Slideshow ist oder generel?
MfG
MfG
- Ratoncito
- Webmaster
- Beiträge: 109
- Registriert: So 24. Nov 2013, 09:59
- Mein Vorname: Wolfgang
Re: Fotoslider
Hallo Jasko,Jasko hat geschrieben:Wenn der Fehlercode nicht von dir ist kannst du relativ wenig da machen. Du solltest den Support anschreiben und um Hilfe bei diesem Fehler fragen. Eine Frage habe ich da noch, wird der Fehler nur auf dieser Seite bemengellt wo deine Slideshow ist oder generel?
MfG
den Slider habe ich mit Firefox, Internet-Explorer, Google-Chrome, Safari und Opera getestet. Lediglich mit Opera werden die Fotos nicht angezeigt, da für Höhe und Weite der Wert 0 ausgegeben wird.
Im Entwicklertool von Opera wird mir der in meinem letzten Beitrag beschriebene Fehlercode angezeigt. Ob er letztendlich dafür verantwortlich ist, dass die Werte für die Fotos auf dem Wert 0 bleiben, kann ich nur vermuten.
Kannst Du Dir das mal in Opera anschauen?
Meine Kenntnisse reichen leider nicht aus.
Kurzes Update:
Das Problem habe ich im nPage-Forum gestellt.
http://forum.npage.de/sonstiges/41211-h ... post400877
Es gibt wohl ein Problem bei allen Seiten mit eigenem Design. Auch mit Deiner Seite.
Die Fehlermeldung kann man mit der dort beschriebenen Lösung abstellen, aber der Slider funktioniert mit Opera immer noch nicht.
Saludos - Wolfgang
- Ratoncito
- Webmaster
- Beiträge: 109
- Registriert: So 24. Nov 2013, 09:59
- Mein Vorname: Wolfgang
Re: Fotoslider
Hallo Jasko,Jasko hat geschrieben:So bald ich mehr Zeit habe probiere ich deinen Code aus und deine Vorschlaege dan melde ich mich wieder.
MfG
darf ich mich nochmal in Erinnerung bringen?
Am Aussehen des Sliders habe ich noch ein wenig gearbeitet. Die aktuelle Version ist hier:
http://wr-foto.npage.de/003-cloud-mexico.html
zu sehen.
Die wichtigste Änderung, die ich gerne realisieren möchte ist, dass Drehrichtung und Geschwindigkeit über die Stellung des Mauszeigers bestimmt werden.
Kannst Du mir dabei weiterhelfen?
Oder jemand anderes eine Idee? Ich bin für jede Hilfe oder Anregung dankbar.
Noch ein schönes Wochenende - Wolfgang
- Butterblume
- Held des Forums
- Beiträge: 7528
- Registriert: Fr 3. Aug 2012, 16:33
- Mein Vorname: Karin
- Wohnort: Peine / Niedersachsen
- Kontaktdaten:
Re: Fotoslider
der ist ja cool, wo hast Du den denn aufgegabelt!
Wer ist online?
Mitglieder in diesem Forum: 0 Mitglieder und 80 Gäste