SuperBGImage
jQuery-Plugin SuperBGImage
Skalierte Fullscreen-Hintergrundbilder und Slideshows mit jQuery
Inspiriert durch die Webseite GOTOCHINA und das jQuery-Plugin Supersized von Sam Dunn habe ich das jQuery-Plugin SuperBGImage erstellt.
Für ein aktuelles Projekt musste ich das Supersized-Plugin anpassen und in eine REDAXO-Seite integrieren. Da dabei nicht mehr viel von dem ursprünglichen Code übriggeblieben war und einige Probleme aufgetreten sind (Performance), hatte ich mich entschlossen hier gleich ein eigenes jQuery-Plugin zu basteln.
Features:
- skaliert Bilder automatisch auf die Browser-Größe unter Beachtung des ursprünglichen Seitenverhältnisses
- Slideshow möglich
- verschiedene Übergangseffekte
- Preload der Bilder
- unterschiedliche Bildauflösungen werden unterstützt (hoch/quer usw.)
- Darstellung auch inline in einem DIV-Container möglich
- Callbacks onShow, onHide, onClick, onMouseenter, onMousemove und onMouseleave
- Zufallsbilder, zufälliger Effekt
- usw.
Demos:
Demo mit einfachem Hintergrundbild und scrollbarem Inhalt
Demo mit minimalem Setup als Slideshow
Demo mit diversen Einstellungsmöglichkeiten
Inline-Demo mit diversen Einstellungsmöglichkeiten
Download:
Das Download-Archiv enthält alle benötigten Dateien (inkl. jQuery), Demos und Bilder.
Größe: ca. 9MB
Download jQuery-Plugin jquery.SuperBGImage.js
http://download.andreaseberhard.de/superbgimage/
Lizenz:
Creative Commons Namensnennung 3.0 Unported Lizenz
SuperBGImage einbinden
1. Scripte im Head-Bereich der Seite einbinden
Für die Effekte werden noch zusätzliche jQuery-Dateien (jquery.effects.*) benötigt. Mit jQuery allein ist nur der Effekt fadeIn möglich.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de"> <head> ... <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type="text/javascript" src="jquery.effects.core.min.js"></script> <script type="text/javascript" src="jquery.effects.slide.min.js"></script> <script type="text/javascript" src="jquery.effects.blind.min.js"></script> <script type="text/javascript" src="jquery.superbgimage.min.js"></script> ... </head>
2. CSS einfügen
Der Containter für die skalierten Bilder (Default-Id: superbgimage) sollte ausgeblendet werden.
Für scrollbaren Content über den Hintergrundbildern sollte ein z-index von mindestens 3 vergeben werden. Hierbei beachten dass position absolute/relative für den Content gesetzt ist.
<style type="text/css">
#superbgimage {
display: none;
}
#content {
position: relative;
z-index: 3;
}
</style>
3. SuperBGImage aktivieren
Das Plugin kann beim pageready-Ereignis initialisiert werden.
Hier können auch die gewünschten Optionen eingestellt werden.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
...
<script type="text/javascript">
$(function() {
// Options for SuperBGImage
$.fn.superbgimage.options = {
randomtransition: 1, // 0-none, 1-use random transition (0-7)
slideshow: 1, // 0-none, 1-autostart slideshow
slide_interval: 3000, // interval for the slideshow
randomimage: 1, // 0-none, 1-random image
speed: 'slow' // animation speed
};
// initialize SuperBGImage
$('#thumbs').superbgimage().hide();
});
</script>
...
</head>
4. Bilder hinzufügen
Die Bilder werden über einfache Links z.b. in einem DIV-Containter hinzugefügt.
... <div id="thumbs"> <a href="img/603001_65851823.jpg" title="roadside assistance required<br />http://www.sxc.hu/photo/603001">1</a> <a href="img/1066378_36549393.jpg" title="sydney spectrum<br />http://www.sxc.hu/photo/1066378">2</a> <a href="img/1179064_34608640.jpg" title="arches national park<br />http://www.sxc.hu/photo/1179064">3</a> ... </div> ...
SuperBGImage Standardoptionen:
// default options
jQuery.fn.superbgimage.defaults = {
id: 'superbgimage', // id for the containter
z_index: 0, // z-index for the container
inlineMode: 0, // 0-resize to browser size, 1-do not resize to browser-size
showimage: 1, // number of first image to display
vertical_center: 1, // 0-align top, 1-center vertical
transition: 1, // 0-none, 1-fade, 2-slide down, 3-slide left, 4-slide top, 5-slide right, 6-blind horizontal, 7-blind vertical, 90-slide right/left, 91-slide top/down
transitionout: 1, // 0-no transition for previous image, 1-transition for previous image
randomtransition: 0, // 0-none, 1-use random transition (0-7)
showtitle: 0, // 0-none, 1-show title
slideshow: 0, // 0-none, 1-autostart slideshow
slide_interval: 5000, // interval for the slideshow
randomimage: 0, // 0-none, 1-random image
speed: 'slow', // animation speed
preload: 1, // 0-none, 1-preload images
onShow: null, // function-callback show image
onClick: null, // function-callback click image
onHide: null, // function-callback hide image
onMouseenter: null, // function-callback mouseenter
onMouseleave: null, // function-callback mouseleave
onMousemove: null // function-callback mousemove
};
Für weitere Beispiele einfach im Quellcode der Demo-Dateien nachforschen.
Ich freue mich über Hinweise, Bugmeldungen oder auch einfach über Kommentare wie und wo Ihr dieses Script eingesetzt habt ;-)
Kommentare (183)
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
Hallo Dietmar,
korrekt, funktioniert einwandfrei auch in einem CMS mit scrollbarem Content.
Habe das bereits in 2 REDAXO-Seiten eingebaut.
Der Content muss position: relative/absolute haben und mindestens einen z-index von 3
Beste Grüße
Andreas
@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 Dietmar,
im JavaScript ist ein Fehler der sich nur beim IE auswirkt
Bei transitionout das letzte Komma gehört da nicht mehr hin!
$.fn.superbgimage.options = {
randomtransition: 2, // 0-none, 1-use random transition (0-7)
slideshow: 1, // 0-none, 1-autostart slideshow
slide_interval: 1000, // interval for the slideshow
randomimage: 0, // 0-none, 1-random image
speed: 7500, // animation speed
transitionout: 0, // 0-no transition for previous image, 1-transition for previous image
};
@Dietmar
Hallo Dietmar,
wg. den Geisterbildern werde ich mal bei Gelegenheit nachschauen.
Bei randomtransition hast Du einen falschen Wert, hier nur 0 oder 1.
Sollte wahrscheinlich zu transition?
Setze die transition auf 0 (none) und einen onshowcallback: superbgimage_show
Hier setzt du dann die transition wieder auf 1 für Fade
function superbgimage_show(img) {$('#superbgimage').css('background', 'none');
$.fn.superbgimage.options = {
transition: 1,
onShow: null
}
}
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 … ?
Hallo Dietmar,
so sollte dein JavaScript-code aussehen dann wird das 1. Bild sofort angezeigt und bei den folgenden
Bildern wird der Fade-Effekt angewendet.
$(function() {
// Options for SuperBGImage
$.fn.superbgimage.options = {
randomtransition: 0, // 0-none, 1-use random transition (0-7)
transition: 0, // 0-none, 1-fade, 2-slide down, 3-slide left, 4-slide top, 5-slide right, 6-blind horizontal, 7-blind vertical, 90-slide right/left, 91-slide top/down
slideshow: 1, // 0-none, 1-autostart slideshow
slide_interval: 1000, // interval for the slideshow
randomimage: 0, // 0-none, 1-random image
speed: 10000, // animation speed
transitionout: 0, // 0-no transition for previous image, 1-transition for previous image
onShow: superbgimage_show
};
// initialize SuperBGImage
$(‘#thumbs’).superbgimage().hide();
function superbgimage_show(img)
{
$.fn.superbgimage.options = {
transition: 1, // 0-none, 1-fade, 2-slide down, 3-slide left, 4-slide top, 5-slide right, 6-blind horizontal, 7-blind vertical, 90-slide right/left, 91-slide top/down
onShow: null
};
}
});
@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;
});
hi, kannst du das genauer beschreiben?? wo genau kommt dieser codesnipsel hin und wie hast du deine link-ids aufgebaut??
wofür ist das ‘t’ und das ‘d’? sry javascript ist bisher ein buch mit 7 siegeln für mich
Hallo Dantan.
Ja, das würde mich auch interessieren, da ich auch eine andere Navigation bevorzuge. Ich habe ein jquery-dropdown-Menü, über das ich die links setzen möchte.
Dein Ansatz scheint der richtige, es wäre schön, wenn du ihn näher erklären könntest, damit man die Variablen nachvollziehen kann.
Und wie rufe ich dann die Funktion auf?
Das ist mein Menülink, über den ich das Bild aufrufen möchte:
Bild_1
Vielen Dank
also hier der Menülink nochmal:
“Bild_1“
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 Vincent,
1. yes,
http://docs.jquery.com/Events/keypress or check http://docs.jquery.com/Events/keydown
2. yes
You should look in the code of the demo, there is all you need!
regards,
Andreas
Pingback: JES! - ? 3 Fullscreen Background/Slideshows für jQuery
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
Hi Vincent,
you must attach the Keypress to the document:
$(document).keypress() …
Andreas
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 Tobi,
mach doch einfach
preload: 0
in die Konfiguration rein dann werden die Bilder erst bei der Anzeige geladen und es sollte
keine Performance-Probleme geben.
Beste Grüße
Andreas
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!
@bland
Hi,
try it with the Inline-Version http://demo.andreaseberhard.de/superbgimage/demo_inline.html
and play with z-index
regards, Andreas
@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 :D
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
Pingback: » Immagini in fullscreen con jQuery | Ferrari Web Design
Pingback: United States of Design – Creative Direction & Design Archive » Showroom is ready
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
Hallo Maarten,
wenn Du die Demo verwendest findest Du die richtige Stelle in der demo.js
$(‘#showtitle’).hover(
function () {
$(this).fadeTo(‘fast’, 1.00);
},
function () {
$(this).fadeTo(‘fast’, 0.40);
}
);
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 Chris,
das ist absicht und so gewollt. Erst wenn die transition beendet ist wird wieder ein Click erlaubt.
Gruß
andreas
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
Hallo Daniel,
schau mal in der Demo, da wird z.B. die Sliedeshow bei mouseOver gestoppt.
Gruß
Andreas
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.
Hallo Daniel,
versuche es mal in etwa so:
jQuery.noConflict();
(function($) {
$(function() {
$.fn.superbgimage.options = {
randomtransition: 1, // 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);
Viele Grüße
Andreas
Pingback: Thomas Richartz jetzt online! | Presse | Dieses, Eberhard, Andreas, Script, Fullscreen-Hintergrundbilder, Features, Slideshows, SuperBGImage, jQuery-Plugin, Maler
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 Fisch,
hast Du das hier schon gesehen: http://demo.andreaseberhard.de/superbgimage/demo_inline.html
Viele Grüße
Andreas
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
Hallo Christian,
schau mal hier nach: http://demo.andreaseberhard.de/superbgimage/demo_minimal.html
Hier liegt in dem div mit der id superbgimage z.b. ein Overlay und das logo drin.
Genauso kannst Du hier auch z.b. einen div mit border drüberlegen der dann über dem bild liegt.
Einfach mal ausprobieren.
Viele Grüße
Andreas
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
@Joey
Just look in demo.js there is a part
// load image set 1
$(‘a.loadset1′).click(function(){
$(‘#thumbs1′).stopSlideShow();
$(‘#thumbs2′).stopSlideShow();
my_slideshowActive = false;
$(‘#showtitle’).hide();
$(‘#thumbs2′).hide().addClass(‘hidden’);
$(‘#thumbs1′).superbgimage({ reload: true }).show().removeClass(‘hidden’);
return false;
});
You must add some script like this for your thumbs.
regards,
Andreas
@Fisch
Wenn in deinem HTML bereits ein div mit der id=”superbgimage” existiert dann wird
der auch nicht in den Body eingefügt, also mach einen div ins HTML rein und den
rest musst Du selbst ausprobieren.
Gruß
Andreas
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
Hallo,
es ist kein MUSS einen Link in irgendeiner Form auf eine meiner Seiten zu setzen,
auch nicht im HTML-Quellcode (was aber eigentlich kein Problem sein sollte).
Die Copyright-Hinweise in den Scripten müssen erhalten bleiben und dürfen
nicht entfernt werden.
Beste Grüße
Andreas
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
Pingback: Full Page Background Image « Okaa
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
@Markus
Hallo Markus,
du kannst ja komplette DIV-Container für jedes Bild mit ausgeben und mit display:none; ausblenden. Über den Callback onShow kannst Du dann z.b. den entsprechenden DIV einblenden usw. Als Parameter bekommt der onShow-Callback die laufende Nummer des
Bildes.
In der Demo ist ja ein Beispiel drin. Und mit jQuery sollte das ganze dann kein allzu großes Problem sein ;-)
Viele Grüße
Andreas
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 Katrin,
ich denke dass es entweder am CSS liegt oder evtl. ein Fehler mit einem anderen JavaScript
im Firefox 2 dafür verantwortlich ist.
Die Demo läuft auch unter Firefox 1.5 und 2.0
Viele Grüße
Andreas
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
Hallo Daniel,
ja das ist möglich siehe z.B. http://traumtapeten.info/ oder http://greenwichdance.org.uk/
Danke dir, habs grade eben rausgefunden :D. Super Script! Vielen Dank.
Hallo Andreas,
habe eben dein Script in Verbindung mit Joomla! getestet. Nachdem ich dort die Mootools zugunsten JQuery getauscht und Deine JS-Files eingunden hatte, funktionierte alles.
Großartige Sache…
ABER: zumindest bei mir (Firefox 3.6) beschränkt sich das Hintergrundbild nicht auf den Anzeigebereich des Browsers, sondern auf die gesamte Bildschirmauflösung. Bedeutet: erst wenn ich im Firefox in den Vollbild-Modus wechsle (F11), erscheint mein komplettes Hintergrundbild. Gibt es da evtl. eine Alternative?
Vielen Dank schonmal!
Und noch ein Frägelchen: gibt es irgendeine sinnvolle Alternativdarstellungsmöglichkeit, wenn JavaScript deaktiviert ist?
Merci :)
Hallo und vielen Dank!
Super Script! Und auch für den Laien verständlich! Wirklich toll!
Natürlich hab ich auch noch eine Frage:
Ist es möglich das Script so zu verändern, dass Bilder nicht beschnitten werden?
Sprich, dass bei einem Querformat Bildschirm ein Hochformat Bild nicht auf die gesamte Breite skaliert wird, sondern nur auf die Höhe?
Auch toll wäre, wenn man den minimalen und maximalen Skalierungsfaktor angeben könnte!
Bin für jeden Tipp dankbar!
grüße
jonas
Hallo Andreas,
nutze Dein Script unter http://www.foto-ll.de/diashow.html und fände es auch, wie Jonas weiter oben anfragt, sehr nützlich, wenn man SuperBGImage anweisen könnte, die Bilder/Fotos aus einem Verzeichnis zu laden – bei mir werden mittlerweile fast 200 eingesetzt und es werden wöchentlich mehr und ich nutze es auf drei Seiten. Hast Du da schon eine Möglichkeit gefunden oder einen Tipp?
Zum zweiten, ich scheitere, wenn ich die Bildtitel benutzen will – das tue ich auch – daran, die Zeile “image x of y” komplett zu entfernen, momentan ist sie inhaltsleer, aber mit Zeilenumbruch noch vorhanden. Ich hätte aber gerne nur den Titel aus dem HTML-Tag, also einzeilig. Auch hier wäre ich Dir für einen Tipp dankbar.
Eine dritte Frage noch. Wenn ich meine Fotos sowohl in der Höhe als auch in der Breite komplett darstellen möchte, was muss ich ändern? Oder wäre die Inline-Darstellung der richtige Ansatz?
Ansonsten ist SuperBGImage ein echt tolles Script, das sogar auf iPad, iPhone etc. durchrollt, wenn man preload ausschaltet – zu mindest einige Ladezyklen ;-)
Viele Grüße und danke schon mal vorab
Christoph
Ok, den zweiten Punkt hab ich jetzt selbst gefunden … was ein paar Stunden Schlaf bewirken ;-)
Hi guys,
I used this fantastic plugin and use in css the overflow:hidden to resolve the problem with the scroll automatic in IE 6.
And choose for new version from jquery 1.4.2.
But in Safari have some bug problem and i can imagine what is.
Please help me on this.
Link:http://www.studiodpi.com.br/clientes/sofiasimoes/
Sorry, i forgot to say.
The bug happens when i try to resize the browser.
Zuerst mal vielen Dank für dieses klasse Skript. Ist wirklich n’e prima Sache.
Ein kleines Problem hätte ich aber noch. Ist es möglich, mittels einem Link ein Bild aufzurufen, welches vorher nicht in irgendeinem Container ist. Sprich, ich möchte einer Funktion einen Link/Pfad zu einem Bild mitgeben die dieses Bild dann im SuperBigImage anzeigt. Hab es mal so versucht, doch leider ohne Erfolgt;-(
function superbgimage_goto() {
t = $.fn.superbgShowImage(‘img/116960_1971.jpg’);
return false;
}
Gibt es dafür eine Lösung?
Beste Grüsse und besten Dank schon mal.
Thomas
Hallo Thomas,
nein das ist so leider nicht möglich.
Gruß
Andreas
Hallo Andreas!
ich muss sagen das Plugin ist wirklich gut. Leider stehe ich derzeit vor einem Problem das ich nicht lösen kann.
$(document).ready(function(){
$.getJSON(“getFiles.php?deviceID=”, function(data){
$.each(data, function(i,item){
$(““).attr(“href”, “./path/”+item.filename).appendTo(“#thumbs”).text(item.filename);
});
});
});
Sonst ist die Datei so wie demo_minimal.html aufgebaut. Das Problem ist das nichts angezeigt wird und ich habe keinerlei Idee wie ich das lesen kann. Kannst du mir helfen?
[Nachtrag]
lesen = lösen.
Kann man an das Plugin direkt die URL der Images senden?
Ich tippe einfach er kann die von mir erzeugten Links nicht verarbeiten. Wenn ich die URL’s direkt an das Plugin senden könnte oder das Plugin dazu bringen würde die von mir erzeugten Links zu verarbeiten wäre das Problem gelöst.
Hallo jonas,
ich denke mal es liegt daran $(““)
kontrolliere mal ob Du überhaupt korrekte Links erzeugst.
Gruß
Andreas
Hallo,
komme auch von supersized2 zu deinem Script. Ich habe 2 Probleme:
1.
Hochformat Bilder (höher als breit) werden nicht in kompletter Höhe dargestellt. Es wäre viel besser (und den Kommentaren entnehme ich, dass es andere auch so sehen), wenn Hoch-Bilder einen schwarzen Rand rechts und links hätten statt abgeschnitten zu werden.
2.
Wie Thomas geschrieben hat, möchte ich auch die Bilder nicht im Code erfassen, sondern durch ein PHP Script zur Verfügung stellen. (Dieses liest aus einem Verzeichnis ein zufälliges Bild und gibt es dann als Bild-Stream (über http-header) zurück. In Supersized wird kein Link, sondern ein BILD angezeigt. Dies ermöglicht, mit folgendem Code es nach einer bestimmten Zeit auszutauschen (dann ist zwar der Überblendeffekt hin – aber ich will nur einen “digitalen Bilderrahmen” – den zur Not eben ohne Effekte.
Es wäre super (und “wichtig” wenn man die Bilder quasi streamen könnte. Ein Bild kann ja durchaus mehrmals von Platte gelesen werden. Ich dachte das kann ich abschalten über “preload” – klappt aber nicht. Wenn ein Bild einmal gelesen wurde, wird es nicht mehr neu eingelesen :-(
Hier nun der Code den ich nutze um in Supersized2 die Bilder auszutauschen:
var zufallsbild;
var imgBase=”../dir-file-8.php?”
var c = 0;
function count()
{
zufallsbild.src=imgBase+(++c);
}
function init()
{
zufallsbild = document.getElementById(“zufallsbild”);
if( zufallsbild )
{
setInterval(“count()”,10000);
}
}
window.onload = init;
Gibt’s Lösungen?
Olaf
Hi,
mein Problem 2 habe ich nun wie folgt angegangen und bin eigentlich ganz zu frieden mit dem Ergebnis:
Im head der Slideshow Datei einfügen:
Damit wird die Seite einfach alle 15 Sekunden neu gelesen. Über ein php Script liefer ich ein zufälliges Bild als einzigen Link.
Es sieht mit dem folgenden CSS ein wenig schöner aus:
body{ background:#000; }
Olaf
Toll, HTML ist weg… Nochmal … im Head einfügen:
meta http-equiv=”refresh” content=”15″
(Natürlich mit den Tag-Zeichen vor und nachher)
Olaf
@andreas
$(document).ready(function(){
$.getJSON(“getFiles.php?deviceID=”, function(data){
$.each(data, function(i,item){
$(““).attr(“href”, “./files/images/”+item.filename).attr(“rel”, item.rel).appendTo(“#thumbs”).text(item.filename);
});
});
});
$(function() {
$.fn.superbgimage.options = {
transition: 5,
slideshow: 1,
slide_interval:4000,
speed: 4000
};
$(‘#thumbs’).superbgimage().hide();
})
Ich glaube $(““) hat das System hier verschluckt
Korrekte links werden erzeugt.
Quelltext laut Firebug:
1.jpg
2.jpg
@andreas
(der Vorherige Kommentar kann gelöscht werden da das System leider keinen Code erkennt.
In der Klammer steht dies:
[code] $("..")[/code]
Quelltext laut Firebug >>> Links werden erzeugt.
Ich denke diese müssten irgendwie noch mal initialisiert werden.
[code]
1.jpg
2.jpg
[/code]
@andreas
(der Vorherige Kommentar kann gelöscht werden da das System leider keinen Code erkennt.
In der Klammer steht dies:
[qoute] $(“..”)[/qoute]
Quelltext laut Firebug >>> Links werden erzeugt.
Ich denke diese müssten irgendwie noch mal initialisiert werden.
[qoute]
1.jpg
2.jpg
[/qoute]
@andreas
(der Vorherige Kommentar kann gelöscht werden da das System leider keinen Code erkennt.
In der Klammer steht dies:
$("..")Quelltext laut Firebug >>> Links werden erzeugt.
Ich denke diese müssten irgendwie noch mal initialisiert werden.
1.jpg
2.jpg
@andreas
(der Vorherige Kommentar kann gelöscht werden da das System leider keinen Code erkennt. – Sry für die vielen Kommentaren)
In der Klammer steht dies:
$("<a />")
Quelltext laut Firebug >>> Links werden erzeugt.
Ich denke diese müssten irgendwie noch mal initialisiert werden.
<div id="superbgimage" style="display: none; overflow: hidden; z-index: 0; position: fixed; width: 100%; height: 100%; top: 0px; left: 0px;"></div>
<fieldset style="display: none;" id="thumbs">
<a rel="1" href="./files/images/1.jpg">1.jpg</a>
<a rel="2" href="./files/images/2.jpg">2.jpg</a></fieldset>
This is a great script. It working great on the website I used it for, but not in IE7. I don’t care about IE6 but IE7 is still in heavy use.
I made a gist of the script I am running… Can someone help clear up why its not working in IE7
http://gist.github.com/561619
thanks so much for your help, and again great script
funzt das auch mit der jquery Library v1.3.2 ?
hier wären noch performance steigerungen möglich.
@dama
sorry ich meinte 1.4 !
Hallo,
super Script! Ich nutze es um lediglich ein Hintergrundbild anzuzeigen. Wenn ich in meinem Menü klicke und dadurch die Seite neu lade, blitzt es immer kurz auf. Gibt es eine Möglichkeit das zu unterdrücken? Also genauso wie bei einem normalen Body-Hintergrund per CSS?
Gruß,
Markus.
I have a webapp which I have turned off the auto-zoom that Apple uses. Because of this the images no longer scale properly to fit the device (iphone or ipad)
This feels a bit weird, and renders your script unusable.
You can see an example at: http://straathof.acadnet.ca/beta4.7
Hi Andreas,
I would like to switch between inline- and fullscreenmode. For example clicking on ‘load set 1′ would show the slideshow of set 1 in fullscreenmode and by clicking on ‘load set 2′ the set 2-slideshow would show in inline-mode.
As far as i can see this isn’t built-in like other options like ‘transition’ or ‘interval’, is it?
I could do it by having php flicking the switch, but then i have to reload the page. I rather do it the elegant javascript way. Can you point me in a direction?
Hello Albert,
i made an example demo_switch.html. You can check this on http://demo.andreaseberhard.de/superbgimage/
regards, Andreas
Inspired by this script and the Supersized script, I created a lightweight alternative that can easily be applied to any website: http://bit.ly/backgroundfade
Ich danke dich. Ich bin aus Slowakei. Meine Deutsch ist sehr schlecht.
In English:
I used your jQuery-Plugin SuperBGImage in my Personal Blog/Website. Its very usefull and fun. Great. Thank you.
http://www.vojtechs.eu.sk or http://www.youtube.com/watch?v=32AcH1IjbzY
I used your jQuery-Plugin SuperBGImage in my Personal Blog/Website.
Your plugin is very usefull and fun! Not my page. .-) Great. Thank you.
Hey Andreas,
ich schließe mich natürlich all den Glückwünschen zu SuperBGImage an!
Bin noch nicht der Held in Javascript, konnte mit Hilfe Deines Skriptes aber bisher alles erreichen was ich wollte… bis jetzt!
Wie bekomme ich einen Callback in Deinen Code, mit dem ich externe Funktionen steuern kann?
z.B.: “Erst wenn das Bild in SuperBGImage komplett geladen ist –> blende XY ein”
Ich möchte also aus SuperBG heraus Dinge antriggern, die nicht auf der SuperBG Ebene ablaufen sondern – konkret: Erst nach Abfrage der Ladung eines Bildes eine externe Funktion starten.
… Ich glaube nun hab ich mich blöd genug ausgedrückt, oder?! : )
Ist das mit nicht allzu großem Aufwand und vor allem mit meinen leicht beschränkten Javascript Möglichkeiten zu knacken?
Vielen Dank, Tim
Hallo Tim,
das was Du suchst ist eigentlich in der Demo mit enthalten.
Über Callbacks ist das möglich. Siehe http://demo.andreaseberhard.de/superbgimage/demo.html
Hier wird nach dem Laden eines Fotos ein kleines Beschreibungsfenster eingeblendet.
Viele Grüße
Andreas
Hey Andreas,
super, vielen Dank!
Das es eine Abfrage des Ladestatus geben muss ist mir dann auch noch aufgefallen ; )
Ich schaue mal ob ich das umgemodelt bekomme.
Lieben Dank noch mal für Deine super schnelle Antwort!
Tim
hi bro, nice script you have, i tested in ie7-8, the sliding method become very choppy, is there any solution to it you might suggest?
Thanks for your script and reply.
Hallo Andreas,
ich verwende ebenfalls dein supergeniales jQuery-Plugin in der Website http://www.hauzenberg-aktiv.de/.
Ich wollte kürzlich auf jQuery Version 1.4.4 hochgehen (bisher verwende ich Version 1.4.2). Dabei habe ich festgestellt, dass SuperBGImage nicht mehr funktioniert. Es tritt ein JavaScript-Fehler auf.
Jetzt wollte ich mal fragen, ob es demnächst eine neue Version dieses Plugins geben wird, die jQuery 1.4.3 bzw. 1.4.4 unterstützt.
Viele Grüße
Michael
Hallo, großartiges Plugin! Gibt es eine Möglichkeit am oberen Browserrand Platz für ein Menü zu erzeugen, so dass sich der Hintergrund aber Trotzdem noch an die übrigen Browserränder anpasst? (Das Menü soll den Hintergrund nicht einfach überlagern). Danke und viele Grüße!
Das musste ich auch gerade feststellen. Wäre schön wenn es einen Fix für 1.4.4 geben würde, ich denke 1.4.3 ist nicht ganz so wichtig.
hi andreas, ein wirklich großartiges plugin!!! vielen dank für deine arbeit!
ein paar fragen habe ich, da ich leider nicht so fit in javascript und jquery bin:
1. besteht die möglichkeit die bilder auch, ähnlich wie bei einem carousel, je nach referenzlink rechts und links sliden zu lassen? (z.b. das akutelle bild ist auf 5 und ich klicke auf 1 -> dann soll nach rechts geslidet werden, bin ich auf 1 und klicke auf 5 soll nach links geslidet werden…)
2. kann man das einstiegsbild/erste bild nur beim einstieg/laden der seite auch mit einer anderen animation versehen (oder auch ohne anim.) als den rest?
3. ist es möglich einzustellen, dass beim slider auch die dazwischenliegenden bilder mitgeslidet werden? (wie bei einem carousel sozusagen -> ich bin z.b. auf #2 und klicke auf #6 und dann werden die dazwischenliegenden bilder auch alle geslidet…?
hoffe ich hab mich verständlich ausgedrückt. bin leider, wie bereits gesagt, noch ein blutiger anfänger.
beste grüße
tobby
I really like superbgimage and it makes a great intro page for an art gallery application. Unfortunately, the first time the site is loaded, it takes 10 – 30 seconds to load the first image, depending on network speed. Once the site is stored in cache, it works great. I’ve tried a number of suggestions on how to install a preloader image so the viewer knows something is going on while the first image is loading but have not been able to get anything to work yet. Any suggestions?
Ich habe mal ein bisschen gegraben und nun läufts auch mit 1.4.4 (noch nicht ausgiebig getestet). Ich vermute mal, dass es nun auch mit 1.4.3 läuft, das hab ich nun aber noch gar nicht probiert.
Folgendes muss geändert werden (Zeilen 394-397 in der letzten Debug-Version (1.0, 29.08.2009)):
//original
$.superbg_imgActual = $(this).attr(‘rel’);
if (typeof img !== ‘undefined’) {
$.superbg_imgActual = img;
}
//fix
$.superbg_imgActual = img;
//if (typeof img !== ‘undefined’) {
// $.superbg_imgActual = img;
//}
Scheint mir auf die Schnelle, als hätte sich da irgendwie der scope geändert, habs mir aber noch nicht genauer angesehen. Auf jeden Fall enthält die Variable img jetzt den Wert des rel-Attributs.
Hoffe das hilft einigen weiter
For non-German speaking folks:
Fix for SuperBGImage with jQuery 1.4.4 (just a quick one, no extensive testing done yet) and possibly 1.4.3 (not tested at all):
Search (line 394-397 in latest debug release (1.0, 29.08.2009)) for
$.superbg_imgActual = $(this).attr(‘rel’);
if (typeof img !== ‘undefined’) {
$.superbg_imgActual = img;
}
and replace it with
$.superbg_imgActual = img;
//if (typeof img !== ‘undefined’) {
// $.superbg_imgActual = img;
//}
HTH
die lösung liegt hier:
suche in der jquery.superbgimage:
// show image, call callback onHide
jQuery.fn.superbgShowImage = function(img) {
var options = $.extend($.fn.superbgimage.defaults, $.fn.superbgimage.options);
// get image-index from rel-attribute of the link
$.superbg_imgActual = $(this).attr(‘rel’);
if (typeof img !== ‘undefined’) {
$.superbg_imgActual = img;
}
und ersetze mit:
// show image, call callback onHide
jQuery.fn.superbgShowImage = function(img) {
var options = $.extend($.fn.superbgimage.defaults, $.fn.superbgimage.options);
// get image-index from rel-attribute of the link
if (typeof img !== ‘undefined’) {
$.superbg_imgActual = img;
} else {
$.superbg_imgActual = $(this).attr(‘rel’);
}
nur so als ansatz.
Hallo
Gibt es eine Möglichkeit die Autostart-funktion nach x Bildern abzubrechen? Für eine Teaserseite suche eine Lösung wo ich nach z.B. 5 Bildern den Speed zum 6 Bildern verlängere und nachher eine komplett andere Seite aufrufe.
Wie mache ich sowas?
Danke für eure Hilfe.
Gruss
Thomas
Hi Andreas
ich würde gerne dein Super BGI einsetzen mit der Erweiterung, dass immer nur ein Bild angezeigt wird – das aber per Zufall aus einem Pool von mehreren Bildern bei jedem Reload gezogen wird. Siehst du da eine Möglichkeit?
Grüße
Uwe
@uwe
Das kannst Du am besten z.B. über PHP realisieren. Einfach einen Pool an Bildern verwenden und
per Zufall nur das eine ausgeben.
Hi,
das script ist echt super gelungen wie ich finde.
Aber gibt es eine Möglichkeit das der Fade-In im Fullscreen Modus nicht so ruckelt? Wenn man das Browserfenster klein macht ist es sehr smooth. Ich habe an am speed rumprobiert und es mit 100 – 6000 ms probiert aber so richtig flüssig ist es leider nicht. Ich denke das mein i7 prozessor das doch locker rechnen sollte.
Hat jemand ne Idee?
@von Lichtenfels
Tritt das denn bei der Demo auch auf?
Hi !
Firstly, Thank for this great script ! It works very well with jQuery 1.4.4 (thanks Jasper and Markus !)
I used it for my portfolio and I would like to know if it’s possible to add title in a simple “div” without the ‘title’ attribute. Because I’d like to had more informations in the title with more possibilities with CSS. Actually it’s good with the ‘title’ attribute for short informations, but not for long informations. Thanks for advance ;)
Sorry, I’m a French guy and I don’t speak English and German very well.
@Vincent
yes this is possible. You must use the Parameters
onHide: superbgimage_hideinfo,
onShow: superbgimage_showinfo
Add the following functions to your script
function superbgimage_hideinfo(img) {
$(‘#showtitle’+img).hide();
}
function superbgimage_showinfo(img) {
$(‘#showtitle’+img).fadeIn(‘slow’);
}
Output a extra div with the infos and display=none + id=showtitleX (X for the image-number)
regards, Andreas
First: great plugin.
Second: the 1.4.4 fix by Markus & Jasper doesnt really work, It loads the first image. But after that i cant use the buttons to make the next one appear, number buttons stopped working as well.
Any help?
Thanks Andreas !
It works fine, it’s perfect !!!
Regards, Vincent
hi andreas
gibt es eine möglichkeit links auch in ner lightbox zu öffnen? ich bin kein programmierer und hab mich bislang vergeblich in der integration von jquery-lightboxen versucht. hast du mir einen tipp? gerne auch per mail, wenns zu lang wird für hier…
würde mich sehr freuen. danke.
uwe
ich habs hinbekommen. funktioniert prima.
ist echt eine klasse tool das du da gebaut hast!
Hallo Andreas,
danke für das tolle Script. Ich versuche jedoch, ein Menü über die Hintergrundbilder zu legen, das seine Farbe in Abhängigkeit des Hintergrunds ändert (schwarz oder weiß) und welches sofort beim Klick aufs nächste Bild umschaltet und nicht wie showtitle erst am Ende der Animation eingeblendet wird.
Kannst du mir bitte einen Tipp geben?
Flo
Wow, das habe ich schon lange gesucht für mein kleines Photoblog. Super!!!
Hi Andreas,
Thanks for sharing SuperBGImage. I found a way to use it within my favorite photoblog app Pixelpost.
Best regards,
–Niels
hi niels,
i’ve installed pixelpost and i’m trying to set it up because it seems like a wicked one with it. How did you do it ?
thanks
Hallo Andreas,
Danke für das tolle Plugin. Bei einer Bildergalerie, die ich gerade anlege, soll der User über Thumbnails die Bilder anwählen können. Die Thumbnails selbst sind in einem horizontalen Slider, weil nicht alle Thumbs gleich sichtbar sein sollen. Leider bekomme ich dein Skript in diesem Fall nicht mehr zum Laufen. Als Beispiel: Ich habe eine Bildergruppe mit 4 Thumbs also ein li-Element mit den 4 Thumbs. Die meisten Slider basieren ja auf unordered lists. Vielleicht hast Du / habt Ihr mir ja einen Tipp, wie ich das bewerkstelligen kann.
Gruß,
Tim
Hallo,
ich wollte mich ganz herzlich für das geniale Skript bedanken – das funktioniert ja wirklich prima, selbst auf dem Internet Explorer! Ich bin sehr begeistert! Und habe es gleich mal beim Redesign meiner Website eingesetzt:
http://www.kieler-webdesign.de
Grüße aus Kiel,
Peter
Thanks for the wonderfull plugin.. I’ve been searching for a good one for hours and finally found this one! It does everything i’d like it to do so you made me happy! :)
Hallo,
Zuerst: Super Script!
Was mir allerdings aufgefallen ist, alle genannten Beispiele in den Comments und auch die Demo läuft auf dem IE8 nicht wirklich smooth. Woran liegt das?
Beste Grüße
Ich dreh fast durch. Also ich hab eine Webseite mit versteckten und sichtbaren divs. Erst wollte ich supersized benutzten doch damit konnte ich nur EINE slideshow auf der Seite haben anstatt mehrere:
http://sid.ethz.ch/.aiei/
Und jetzt wenn ich superbgimage so anschaue, dann hab ich das Problem, ich hab jetzt zwei slideshows, also eine slideshow (auf set 2) und ein einzelnes bild (set 1), bei set 1 soll die slideshow nicht autorun sein, bei set 2 aber schon. Wie geht das?
http://sid.ethz.ch/.aiei5/
Gruesse aus Zurich,
Gurkan
Hallo Andreas und Freunde des jQuery-Plugin SuperBGImage,
wie schaffe ich es einen Footer unter die Vollbild Slideshow zu setzen über dem die Slideshow 100% breit und 100% hoch ist?
Der Footer soll die Seite “nicht” überlagern sondern der Footer soll den verfügbaren Platz beschneiden und über ihm soll das Vollbild erst anfangen!
Super Script, bin total begeistert….
Evtl. hat noch jemand einen Tipp wie man das Script für die print Ausgabe css-mäßig ausblenden kann, bei mir bleibt der Hintergrund trotz aller display:none etc. hartnäckig erhalten.
Grüße aus dem Bayrischen Wald,
Martin
Hallo Martin,
versuch mal folgendes (evtl. musst du die ID ersetzen)
#superbgimage img {display: none !important;}
Beste Grüße
Andreas
Hi there, im having difficulties getting this to work with the latest release of Internet explorer 9. Any suggestions or help to get the plugin working would be of great help.
many thanks,
Paul
WOW Andreas,
so schnell habe ich kaum eine imposante Seite zusammengestellt. Perfekte Arbeit!
Wäre schön, wenn du mir bei einem ‘Traum’ hilfst:
onload: nur dein Logo ist sichtbar
mouseover: das Overlay entfaltet sich
mouseout: (kleine Verzögerung) das Overlay klappt wieder zusammen und das Logo bleibt sichtbar
Du hilfst mir doch bei meinem Traum … gell?!
Vielen Dank im voraus!
ralf
Hallo Andreas,
gibt es bereits ein Modul in Redaxo bei dem ich dem Skript einen Ordner zuweisen kann, den es für die Bildauswahl nutzen soll bzw. kann ich dem Script ansich einen Ordner zuweisen, anstatt jedes einzelnes Bild?
Viele Grüße,
Ronny
Hallo,
ich tüftle gerade mit dem Plugin rum. Wirklich gut, nur habe ich ein Problem.
Ich möchte die Thumbnails etwas aufwändiger gestalten, deshalb habe ich nun folgende Struktur:
…usw
Meine Frage: Ist es möglich, das Plugin auf diese Struktur anzupassen oder ist das nur als Linkliste möglich? Vielen Dank für die Hilfe.
Gruß,
b.
Ok, den letzten Kommentar bitte löschen. Pardon, aber das will einfach nicht richtig. Hier jetzt ohne spitze klammern:
section id=”thumbs”
div id=”thumb”
a href=”bild.jpg” /a
img src=”thumb.jpg”
/div
div id=”thumb”
a href=”bild.jpg” /a
img src=”thumb.jpg”
/div
/section
Pingback: Immagine di sfondo ridimensionabile automaticamente
Pingback: New pixelpost template: Superb « van-Sluis.nl
Hallo, kann man die Hintergrundbilder auch mit externen Zielen verlinken, so wie bei supersized? Gruß Torsten
Servus Andreas.
SZ 3.2.4 bringt weichere Übergäng hin. Woran liegts?
Gruß, Markus
Hallo,
sehr praktisches Plugin, vielen Dank für die Arbeit und das Zuverfügungstellen! Ich habe vor, es in seiner einfachsten Form, im “Standbildmodus”, mit einem “Nadelstreifenoverlay”, einzusetzen; das funktioniert auch mit Isotope und Masonry sehr gut.
Auf dem iPad usw. fällt mir allerdings auf, daß, wenn der Seiteninhalt dynamisch länger wird, das Bild nicht größer wird bzw. mitscrollt. Läßt sich diese Funktionalität mit etwas jQuery Programmiererei erreichen, oder sollte ich besser eine iPad-kompatible Zweit-Site bereitstellen?
Vielen Dank für einen Hinweis…
Hi Andreas,
erstmal großes Kompliment für das super Script!
Hab mich jetzt mit deiner Demo auseinander gesetzt und komm nicht dahinter wie die Klasse “activeslide” bei meinen Bildern hinzugefügt wird.
Ich hab es auch nirgendwo in deinem Beispiel gefunden wie es funktioniert.
Hoffe sehr du kannst es mir verraten :)
LG
Max
..ach ja und wenn wir gerade dabei sind. Können die Bilder auch links sein? ich habs irgendwie mit (#superimage).find(“a”).click probiert aber das hat leider überhauptnichts gebracht.
hi, tolles plugin. eine idee, warum es mit “jquery-1.4.4.min.js” nicht funktioniert?
Hi,
Fantastic plugin, I’ve adapted bits of it for one of my demo websites (in this case a furniture design site), I hope this is ok. I’ve also managed to combine it with browser history states, although that version isn’t up yet. Here’s the link to my design:
http://thisisstarshaped.com/portfolio/interiordesign/interiordesign.html
Thank you, this is the best full screen script I have seen as it allows you to implement thumbnails (I haven’t seen this anywhere else).
Hallo Andreas,
großartig aufgesetztes Script, klasse zu skalieren, Besten Dank!
Ich werde das Teil für eine Datenbankanbindung ausbauen.
Dazu eine Frage: Ich brauch immer Zugriff auf das aktuelle Objekt / Bild (z.B. title), und das ist ja mit dem DOM und Jquery etwas knifflig ($.live..)
Ich habe zwecks Test in der superbgimage.js ein Alert(imgtitle) gesetzt, nach diesem Abschnitt:
// load the image, do selected transition$('#' + options.id + ' img.activeslide').superbgLoadImage(imgsrc, imgtitle);
Den ersten Title erhalte ich, aber alle folgenden nicht mehr. Eine Zeile zuvor wird die Variable verarbeitet, und mein Alert gibt dann nichts mehr aus.
Kannst Du mir da weiterhelfen?
Ciao, Andre
Tolles Plugin – danke dafür! Eine Frage: Ich will gern die Slideshow – Funktion verwenden. Dabei soll sobald die slideshow gestartet wird gleich auf den nächsten Slide gesprungen werden und erst danach Rücksicht auf die Intervall-Zeit genommen werden. Hab schon diverses probiert, komme aber nicht zum Ziel. Wär cool wenn du helfen kannst :) DAAANKE :)
Cooles Plugin,
ich benötige allerdings eine Funktion: ich will nicht die Bildern einzeln verlinken (zu viele, ändern sich zu oft), sondern nur ein Verzeichnis angeben.
Kennt jemand eine Vollbildslideshow (braucht nicht viel zu können) die sowas bietet falls der Author das nicht einbauen will?
mfg Daniel Günzel
ja scho. ganz einfach mit php:
———————————-
$images = glob(‘dein/verzeichnis/{*.jpg,*.JPG,*.png,*.PNG}, GLOB_BRACE);
echo ”.”\n”;
foreach($images as $key => $image){
echo ‘‘.$key+1.’‘.”\n”;
}
echo ”.”\n”;
———————————–
mit n bissl string manipulation kannste auch den titel schöner machen, ltrim / rtrim z.b. oder was auch immer.
hm, doof hat html tags raus gekürzt …
ja… so isses halt net so toll, aber wenn du ahnung hast, weisste was ich gemeint hab
Hier hab ich noch ein Beispiel, falls du statt php mit ASP.NET arbeitest:
DirectoryInfo dirInfo = new DirectoryInfo(Server.MapPath(“~/output”));
FileInfo[] fileInfo = dirInfo.GetFiles(“*.*”, SearchOption.AllDirectories);
foreach (FileInfo info in fileInfo)
{
HyperLink link = new HyperLink();
link.NavigateUrl = “~/output/”+info.Name;
BgImages.Controls.Add(link);
}
Hallo,
erst einmal danke für dieses super geniale Plugin!
Es funktioniert alles wunderbar nur eine Funktion vermisse ich und finde dafür leider keine Lösung. Ist es möglich, die Slides auf Touchscreens (z.B. Ipad, Iphone) mit dem Finger zu “schieben” ohne dass man direkt auf den “next” Button drücken muss? Wahrscheinlich geht das mit der Funktion “ontouchstart “, nur wie binde ich diese richtig in das Script ein?
Grüße,
Christoph
Hi Andreas,
Thanks for the great script!!
I’m having a slight issue with some of my pages that only have 1 background image. The image just keeps appearing over and over again. Is there a way to make the image appear just once?
There also seems to be a knock on effect when you have only 1 image and randomimage set to 1. It produces a script running slow error in firefox and ie.
Thanks in advance.
Herzlichen Dank Andreas,
Dein Script funktioniert sehr gut für Photographen.
Ich wünsche Dir eine gute Zeit
Hallo Andreas!
Danke für diese sehr gut Script!
Ich brauche nur ein einziges sich skalierendes Hintergrundbild für eine Startseite. Klappt auch wunderbar.
Meine Frage: Ist es möglich die minimale Breite festzulegen bis zu der das Bild skaliert?
Danke,
Thomas
hallo,
besten dank fuer das plugin!
ein frage:
ich versuche bei einem click auf ein button gleichzeitig eine neue gallerie zu laden und diese zu stoppen [bzw zu starten]
so in der art:
button
jemand eine ahnung wie ich das hinkriege?
gruesse,
philippe
Hallo Andreas!
Eine Frage: gibts eine Möglichkeit z.bps. showtitle parallel mit dem einfaden der Bilder ausführen? Quasi nicht als Callback hinten dran sondern direkt reinzuhängen.
Danke für die Antwort und viele Grüsse!
Markus
Hallo Andreas!
Super Plugin, vielen Dank!
Hat jemand eine Lösung dafür superbgimage in einem vorhandenen div zu benutzen? Wenn ich den inlineMode einschalte und dann die ID angebe, wird ein neuer Div direkt nach dem Body-Element erstellt. Ich hätte aber gerne den bestehenden div-Container benutzt.
Grüße,
Matthias
Hallo,
wirklich toll das SuperBGImage!
Ich habe es bei mir eingebaut und es läuft prima, aber leider habe ich nun ein Problem. Ich verwende Typo3 und dort auch die Extension “rgtabs”. Wenn ich eine Seite mit diesen “rgtabs” erstelle und dann aufrufe, wird das Hintergrundbild nicht mehr angezeigt. Sobald ich wieder eine andere Seite aufrufe, ist es wieder da.
Woran kann das liegen?
Danke für deine Hilfe
Danke für das gute plugin!
Gibt es eine Möglichkeit mehrere Instanzen des Plugins auf der gleichen Seite zu laden?
Ich würde gerne zwei überlagernde DIVs die per hover dann verschoben werden instanzieren – wie könnte ich das bewerkstelligen?
Danke und Gruss!
Pingback: Mit CSS Background-Size zum Fullsize (Background-)Image – Codingpeople
Hi!
Ich teste gerade das Script und bin eigentlich begeistert.
Leider gibt es aber ein Problem, das hier scho mehrfach geschildert wurde, aber für das ich hier noch keine Lösung finden konnte.
Ich benutze die demo_minimal und möchte gerne, dass Hochkantbilder auch in der kompletten Höhe angezeigt werden.
Wie kann ich das realisieren?
Danke :)
Ich möchte nur ein Bild als Fullscreen-Hintergrund haben, aber mit einem Abstand rundherum. Wenn ich bei #superbgimage ein margin angebe, wirkt sich dies nur auf den Abstand links und oben aus.
Hallo Andreas,
tausend Dank für Ihre wundervolle Arbeit und dafür diese so großzügig zu teilen.
Ich appliziere superBGimage gerade für eine umfangreiche Bildpräsentation und dank Ihrer gut strukturierten scripte ist es mir trotz meiner eigenen nur geringfügigen html/css-Kenntnisse sogar gelungen, die ladbaren Sets (load set1 + 2) auf beliebig viele zu erweitern.
Der Übersichtlichkeit für den Nutzer halber wollte ich nun gerne das jeweils aktive bzw. den Namen/die Nummer des geladenen Sets durch eine andere Schriftfarbe makieren.
Da ich so (fast) gänzlich ohne java script-Kenntnisse daran aber vollkommen gescheitert bin, wollte ich gerne die Gelegenheit nutzen, hier um einen Tipp zu bitten, wie dies möglicher Weise zu bewerkstelligen sei.
Ich wäre sehr glücklich über eine Lösung. Vielen Dank.
Mit besten Grüßen aus Berlin, Doreen
Hallo,
gibt es schon eine Lösung für das Problem, daß auf iPads und anderen mobilen Endgeräten der Hintergrund beim Runterscrollen auf Fensterhöhe abgeschnitten ist? Beispiel: die Demo von oben http://demo.andreaseberhard.de/superbgimage/demo_background.html
Danke für einen Hinweis wie das zu lösen wäre…
hi, feines script!
aber gibt es einen workaround um den fadeeffekt des scripts im IE8 anzupassen? die übergänge sind leider sehr abgehackt. in allen anderen broswern läufts perfekt! würde mich über eine antwort freuen! danke
For anyone wondering, you can add this to create next/prev buttons:
jQuery(function($) {
$.fn.superbgimage.defaults = {
…put your options here…
};
//Add Next/Prev Buttons
$(‘a#prev’).click(function() {
return $(‘#thumbs’).prevSlide();
});
$(‘a#next’).click(function() {
return $(‘#thumbs’).nextSlide();
});
});