dev.andreaseberhard.de

die Performance is hammer … sehr sehr schönes plugin, werds gleich mal testen

Hallo, habe (zunächst in der Theorie) hier endlich das gefunden, was wir bräuchten für obige Internetseite. Es soll im Hintergrund eine sehr, sehr, sehr langsame Slideshow ablaufen, ähnlich eines Films in Zeitlupenzeitlupe ;_) Dazu sollte der Vordergrund natürlich scrollbar bleiben – das alles scheint ja im Script enthalten zu sein (?!) und soll in einem CMS eingesetzt werden, das sollte ja kein Problem darstellen?

Gruss
Dietmar

@andreas
Hallo Andreas,
habe nun eine Beispielseite unter http://www.eignart.com/slide eingerichtet, das entspricht so ziemlich unseren Vorstellungen. Zwei Fragen/Anmerkungen noch dazu. Ist es möglich, das Einblenden des ersten Bildes zu unterdrücken, d.h. das erste Bild sollte “sofort” erscheinen, alle weiteren Bilder werden dann wie im Beispiel ineinander geblendet, das ist auch ok. so. Und ist es weiterhin möglich, die “Geisterbilder”, die entstehen, wenn man nun während der Überblendphase die Browserfenstergrösse ändert, zu minimieren bzw. zu vermeiden? Dann wäre es die perfekte Lösung!
Danke und Gruss
Dietmar Koch

… und noch etwas. Wir arbeiten mit Macs, haben die Beispielseite mit Safari und Firefox angeschaut und alles war prima. Auf PC-Seite aber eher nicht, denn das iQery-PlugIn scheint weder auf IE6 noch auf IE7 standardmäßig zu laufen. Wie sieht das denn mit der Verbreitung einer solchen Seite aus?
Dietmar

Ich habe das Problem, dass meine Beispielseite http://www.eignart.com/slide auf Safari und Firefox prima läuft, aber nicht unter IE6 + 7 … was mache ich eventuell falsch?

Hallo Andreas,
Danke für Deine schnelle Hilfe!
Gruss
Dietmar

@andreas
Hallo Andreas,
im IE läuft jetzt das Script nun prima – alles gut, Danke. Allerdings bin ich in Javascript nicht gerade beheimatet und daher meine Frage, was denn mit Deinem Vorschlag bezüglich //onshowcallback bezweckt werden soll? Und noch eine Kleinigkeit, kann ich das erste Bild der Animation ebenfalls auf “nicht einblenden” stellen? Es sollte möglichst direkt erscheinen … ?

@andreas
Danke für das script, leider klappts nicht so wie gewünscht. Es erscheint dann im Browser nur das Bilderverzeichnis wenn ich den Code in die html-Seite einsetze, leider kann ich ihn fachlich nicht auf Funktionalität überprüfen. Die Funktion war zwar von anderen gewünscht, ist aber auch nicht ganz so wichtig

Klappt soweit alles sehr gut, auch das das erste Bild sofort angezeigt wird.

Gibt es eine Möglichkeit per click() zu einem bestimmtem Slide zu kommen, ausser wie hier in den Beispielen die Links.

Hintergrund: ich möchte eine bestehende Navigation dazu nutzen das Bild zu ändern.
Impressum

dann z.B.:
$(‘.navigation a’).click(function(){
gotoslide(this.id);
return false;
});

denke ich habs, mit

$(‘.navigation a’).click(function(){
id = this.id.split(‘-’);

t = $.fn.superbgShowImage(id[1],’d');

return false;
});

Performance-wise this is a massive improvement over the original script. Awesome work!
(sorry this is in English. my German is non-existent )

It’s a very excellent script !

I’ve two questions :

1/ It’s possible to add a keynav navigation to this script ?

2/ And it’s possible to add a arrow next ?

“function callback onmousemove, show and move pause-indicator” I would like to show prev and next indicator. When you move your mouse

(sorry i’m french)

thanks

Hi Andreas,

Thanks for answer.

Actually, I try to add the keyboard navigation, but it’s really difficult for me

I try this, but that does not function :

// next slide
$(‘a.next’).click(function().keypress(function(e) {
switch(e.keyCode) {
// User pressed “right” arrow
case 39:
return $(‘#thumbs’).nextSlide();
});

I’ll continued to find a solution,

thank you !

Vincent

Thank you

You have just to add to the original script (for key navigation) :

$(document).keypress(function(e) {
switch(e.keyCode) {
// User pressed “right” arrow
case 39:
return $(‘#thumbs’).nextSlide();
break;
// User pressed “LEFT” arrow
case 37:
return $(‘#thumbs’).prevSlide();
break;

}
});

I think key navigation is a good thing for accessibility !

regards,
Vincent

One thing important for key nav navigation,

You have just to replace “keypress” by “keydown”, because it doesn’t work with ie and safari.

Sorry

regards,
Vincent

Hi Andreas,

super Script, ich würde das gerne für ein Kunstprojekt einsetzen. Da ich dort sehr viele Bilder anzeigen möchte, muss ich jedes Bild per Ajax nachladen.

Mein Ansatz ist bisher folgender (funktioniert nur im FF, nicht im IE):

…
onHide: loadNextImage,
reload: 0
…

function loadNextImage() {

$.ajax({
type: “GET”,
url: “image.php”,
success: function(imageNo){

$(‘#thumbs’).html(‘‘+imageNo+’‘);
$(‘#thumbs’).stopSlideShow();
$(‘#thumbs’).superbgimage({ reload: true });

},
error: function() {}
});
}

Im IE verschwindet das komplette superbgimage-div, im FF wird das aktuelle Bild ausgeblendet, dann das neue eingeblendet. Ist das überhaupt der richtige Ansatz oder würdest du das komplett anders machen? Ich habe noch mit startSlideShow() experimentiert, das führte aber zu komischen Ergebnissen

Danke!

tobi

Nachtrag: das HTML in der ersten success-Zeile wurde verschluckt, dort steht natürlich der Link zum Bild < a href…

Hallo,

ein paar Anführungszeichen wurden bei mir bei $(‘#thumbs’).html(…) nicht richtig geschlossen, den IE hat das gestört. Jetzt läuft alles, vielen Dank!

Hallo, wirklich ein tolles Script!
Da kommt Supersized 2.0 nicht mit.

Eine Frage haett ich doch, wie koennte man die thumbnail buttons von vornherein verstecken so das man sie erst sieht wenn man auf das thumbs-fieldset klickt?

Danke im Voraus

Julian

Danke!

-> http://newyorkstories.de/

LG
Oliver

Hi, good tips
i try to use this but i’ve a problem:
i’ve a image in the bg not fullscreen: width 100% but not resize (image finish to border overflow:hidden) and height 500px always …
it’s possible to change default setting, for to have this?

can you help me?

Thanks!

@andreas

hi andreas,
spitzenscript! habe auch das “überarbeitete script” mit dem 1. sofort geladenen bild übernommen frage mich aber gerade wie ich die title sowohl für das erste und alle weiteren bekomme? komme da leider nicht weiter und bin für jede hilfe dankbar!

best,
fna

hallo andreas.

super teil, haben dank dir auf flash verzichten können und nun funktioniert unser portfolio von ie6 bis iphone
hier die seite: http://www.designbue.ro

Hi,

Can I use only the thumb’s feature with the Supersize plugin as long as I include this plugin? I’ve already got my website set up using the original plugin but I need to add the thumbnail image click feature this plugin provides, (I don’t know German, sorry)

Thanks!
thomas

Hi Andreas,

Can you tell me where to modify the transparancy of the title box and the change on mouseover?
Can I use another element to activate the mouseover?

Hallo Andreas,

Mit DOM inspector köntte ich Sehen das die klasse “showTitle” eine ‘opacity’ von 0.4 hat. Wo kann ich das ändern?

Mit freunliche gruss,
Maarten

hi andreas, das script ist einfach spitzenmäßig und total flexibel. ich habe es für eine künstler-bilder-gallerie verwendet: http://www.thomas-richartz.de.
vielen dank
grüße

Hallo Andreas!

Ich verwende das plugin für Hintergrundbilder je nach Menü-click.
wird jedoch superbgShowImage mehrmals hintereinander aufgerufen, schneller als z.B. die transition (speed) dauert, wird das hg-Bild nicht gewechselt.
Gibt es dafür eine Lösung?

chhy

Hallo,

tolles Script.
Gibt es eine Möglichkeit, bei Aufruf einer Lightbox die Slideshow zu stoppen, und nachdem schließen sie weiterzuführen?

Gruß

Daniel

Ich hab noch eine andere Frage. Wie kann man das Plugin mit der NoConflict-Methode aufrufen?

Hallo,

wie kann ich das Plugin mit noconflict() anwenden?
Ich verwende mootools auf der Seite, und würde es
gern kombinieren.

Mein Code sieht jetzt so aus:

jQuery.noConflict();

(function($){
$(function(){
$.fn.superbgimage.options = {
randomtransition: 0, // 0-none, 1-use random transition (0-7)
slideshow: 1, // 0-none, 1-autostart slideshow
slide_interval: 4000, // interval for the slideshow
randomimage: 1, // 0-none, 1-random image
speed: ’slow’ // animation speed
};
$(‘#thumbs’).superbgimage().hide();
});
})(jQuery);

Aber wenn ich die Seite aufrufe, erscheint die Fehlermeldung:

$(this).nextSlide is not a function // start slideshow
$(this).superbgimagePreload is not a function $(‘#’ + options.id).prepend(this);

Hallo Andreas,
tolles Script… ich bin begeistert…!
Ich benutze deine Slideshow in Verbindung mit PHP/MySql.
Dabei lasse ich mir in den “thumbs” statt den Zahlen als Links Thumbnails ausgeben. Funktioniert super…
Trotzdem habe ich eine Frage:
hast du vielleicht einen tip für mich, wie ich es hinbekomme, bei benutzung der Transition 90 (left/right), die Index des aktuellen Slides zu ermitteln und dann dementsprechend, von da aus, die Slideanimation nach links oder Rechts auszuführen…
müsste ja möglich sein, klappt ja bei prev/next auch. Hab mir da den code auch angeschaut allerdings habe ich noch nicht verstanden welche Funktion überhaupt angesprochen wird wenn ich direkt auf ein thumb clicke.
Meine java script Kenntnisse sind leider noch äußerst schwach.
Für code Schnipsel oder Denkanstöße wäre ich dir sehr dankbar…
Beste Grüße,
Bastian

Hi Andreas.

Can you tell me how to modify the script so that the image title can be a link in stead of just a plain title. What I am trying to make is a portfolio where you can click a link corresponding to the image currently displayed for more info etc. I really hope It’s possible to do that.

Hello Andreas I am very new to Jquery, and I was wondering how do I change the script so that I can use it for more than 2 sets of slides.

Thanks,
Edwin

sorry, I don’t speak German.

Hi Daniel,

Is there any way to avoid the background resizing when:

a) the reload button in the browser is pushed and
b) when via the navbar another page is selected on the same website?

Many thanks
Ron

Hallo Andreas,
super Script. Ich hatte mit SuperSized herumprobiert und bin nicht glücklich geworden. Vielen Dank für Dein Engagement.

Eine Frage: Ich würde gerne das Bild nicht “fullscreen” sondern in einem eigenen unter dem “header-” anzeigen. Leider habe ich keine Kontrolle über das “superbgimage”.

Wäre diese Option möglich, was muss ich ändern?

Danke und Gruss
Fisch

Hallo Andreas,

tolles Script. Ich habe mir gerade mal die Demo Background angesehen. Gibt es eine Möglichkeit, um das Background Image einen Border zu legen und dieses wieder horizontal und vertikal zu zentrieren?

Vielen Dank.

Gruß Christian

Sorry for the English – how do I add more categories? Ie. thumbs 3, thumbs 4?
I have added them in the html, but they do not function or call the images. Where else to I need to edit the js?

Guten Tag,
Auch ich bin begeistert von den vielen Möglichkeiten, das dieses Script bietet.
Nun habe ich doch noch eine Frage:
Ist es möglich, auf eine einfache Art und Weise die Slideshow nur einmal abspielen zu lassen, so dass das letzte Bild “stehen” bleibt?
Für einen Tipp wäre ich dankbar.

Beste Grüsse

@andreas
Hallo Andreas,
ja, habe ich. Ich verwende ein Fluid-layout. Setze ich die positionierung des superbgimage-div-containers auf “relative” (da es unter dem Header dargestellt werden soll) wird es leicht chaotisch. Vielleicht bin ich ja auch einfach zu dumm …

Hallo Andreas,
ich habe die Ursache gefunden. In meinem “fluid”-layout kann sich die Höhe des Headers ändern, daher kann ich das SuperBgImage nicht absolut positionieren, sondern relativ! In Deinem Skript fügst Du das Element ganz vorn im body ein.

//prepend new/existing div with id from options to body
if ($(‘#’ + options.id).length === 0) {
$(‘body’).prepend(”);
} else {
$(‘body’).prepend($(‘#’ + options.id));
}

Desweiteren soll sich das SuperBgImage automatisch nach der Größe des relative postinonierten Containers “superbgimage” mit 100% Breite und 100% Höhe richten. Vergibt man keine initiale “min-width” oder “min-height”, funktioniert die Größen-und Positionsberechnung nicht. Beim “Supersized” war das bisher kein Problem. Leider habe ich die Ursache noch nicht gefunden.

Gruss
Fisch

Hallo Christian,

Just want to thank you for brilliant work.
Entschuldige mich aber mein Deutsch ist schrecklich.

Viele Grüße

Seb

Hallo Andreas,

in welcher Weise soll denn der Verweis auf die Lizenz in der Seite untergebracht werden?
Reicht ein deutlicher hinweis im HTML-Quellcode (bspw. innerhalb des script-Tags mit dem die superbgimage.js eingebunden wird oder muss es ein Link im Impressum sein?

Ich weiß nämlich noch nicht wie mein Kunde dazu steht.

Mit besten Grüßen

Hi Andreas,
Plugin looks very nice! I was wondering if you’ve planned an update for the plugin in the future? One of the things I would like is the possibility to let the script load all the images out of a folder. So it wouldn’t be necessary to implement all the names and titles…
Something like: http://www.alistapart.com/d/randomizer/rotate.txt
I’m looking for something that combines the two. I’m not a hero with jquery and php so I can’t build something like that myself.
I’m going to try to implement you’re plugin to my website: http://www.jonassmets.net
I hope I get it to work from the first time…

Thnx
Jonas

Hallo Andreas!

Dein jQuery-Plugin ist wirklich klasse. 1A – ganz grosses Kino. Eine Frage hab ich jedoch. Ich will gern den title anzeigen und formatieren (mit h1 und p usw. usf.) was jedoch nicht valide ist da im title solche Formatierungen nicht zulässig sind. Könnte man da ganze so umbauen, das nicht der title sondern zbps. ein span innerhalb des linkes genutzt wird. Hast du eine Idee wie man das machen könnte?

Ansonsten vielen Dank nochmal!
Herzliche Grüsse! Markus

Hallo!

Das ist ein wirklich tolle Slideshow, die meine Arbeit einen riesen Schritt weiter gebracht hat. Aber ein Frage, lässt sich ein Button einbauen, mit dem man das aktuelle Bild speichern kann? Ich stehe da gerade ganz groß auf dem Schlauch.

Ich würde mich riesig über eine Antwort freuen!
Chris

Hallo Andreas,

Erstmal: Vielen Dank fuer dein super plug-in, war echt ein Lebensretter fuer unser letztes Projekt (http://greenwichdance.org.uk/).

Jedoch wurden wir heute darauf aufmerksam gemacht dass Firefox 3.2 die Bilder nicht im Hintergrund zeigt. Ich kann sehen dass es dich richtigen Bilder aufruft, aber sie erscheinen nicht.

Weisst du von diesem Problem? Waere fuer jeglichen Hinweis oder Rat sehr dankbar.

Viele Gruesse von der Insel,
Katrin

Entschuldigung, ich meinte 2.0…

Hallo Andreas,

vielen dank für dein script, es ist super!
Mit das Script habe ich meine erste Webseite mit jQuery gemacht: http://www.chang.nl

Grüß Sylvia

Hey

Klasse Plugin. Ich brauch nur die Möglichkeit, dass bei dem letzten Bild automatisch angehalten wird oder, dass man wenn man irgendwann auf ein Bild klickt direkt zum letzten springt und dann angehalten wird.

Bekomms nicht hin!?
Danke dir schon mal für die Hilfe

Hi Andreas,
ich finde Dein Script super und ich habe es auch gut zum laufen gebracht.
Nun möchte ich die Thumbnails mit dem jcarousel Plugin (http://sorgalla.com/jcarousel/) weiterschalten. Leider bringe ich das nicht zum laufen, da superbgimage kein Bild mehr anzeigt sobald innerhalb des containers eine ul – Liste (oder auch Div) enthalten ist. Für das jcarousel müssen die Thumbnails alle in ein Tag gepackt werden.

Kennst Du eine Möglichkeit diese beiden PlugIns zu kombinieren?

Herzlichen Dank

Hallo Andreas,

leider hatte ich noch nicht die Zeit mir dein Plugin genau anzusehen, sehe aber schon das es mir eine große hilfe sein kann.
Meine generell Frage ist: Ist es möglich “SuperBGImage” so zu verwenden, dass das script lediglich bei einem Webdesign zb den Hintergrund scrollt, das eigentliche design aber nicht beeinflusst wird wie z.b bei http://www.steiermark.at ? Ich würde nur sehr ungern Flash benutzen. Vielen dank schonmal für die Mühe!

@Daniel
sorry ich meine steiermark.com