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.

superbgimage

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
Creative Commons

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 ;-)

  1. Jürgen
    25. September 2009, 11:19 | #1

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

  2. 28. September 2009, 12:28 | #2

    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

  3. 28. September 2009, 13:34 | #3

    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

  4. 30. September 2009, 12:41 | #4

    @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

  5. 30. September 2009, 13:15 | #5

    … 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

  6. 30. September 2009, 16:10 | #6

    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?

  7. 30. September 2009, 16:17 | #7

    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
    };

  8. 30. September 2009, 16:26 | #8

    @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
    }
    }

  9. 30. September 2009, 19:03 | #9

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

  10. 1. Oktober 2009, 09:54 | #10

    @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 … ?

  11. 1. Oktober 2009, 13:21 | #11

    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
    };
    }

    });

  12. 2. Oktober 2009, 10:40 | #12

    @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 ;-)

  13. dantan
    11. Oktober 2009, 18:29 | #13

    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;
    });

  14. dantan
    11. Oktober 2009, 19:00 | #14

    denke ich habs, mit

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

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

    return false;
    });

  15. 14. Oktober 2009, 15:58 | #15

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

  16. Vincent
    16. Oktober 2009, 11:33 | #16

    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

  17. 17. Oktober 2009, 12:00 | #17

    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

  18. Vincent
    17. Oktober 2009, 14:43 | #18

    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

  19. 17. Oktober 2009, 15:52 | #19

    Hi Vincent,

    you must attach the Keypress to the document:
    $(document).keypress() …

    Andreas

  20. Vincent
    17. Oktober 2009, 16:40 | #20

    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

  21. Vincent
    17. Oktober 2009, 17:10 | #21

    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

  22. tobi
    5. November 2009, 00:03 | #22

    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

  23. tobi
    5. November 2009, 00:05 | #23

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

  24. 5. November 2009, 00:10 | #24

    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

  25. tobi
    9. November 2009, 22:05 | #25

    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!

  26. 12. November 2009, 03:20 | #26

    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

  27. 16. November 2009, 15:18 | #27

    Danke!

    -> http://newyorkstories.de/

    LG
    Oliver

  28. bland
    6. Dezember 2009, 17:01 | #28

    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!

  29. 10. Dezember 2009, 22:32 | #29

    @bland
    Hi,

    try it with the Inline-Version http://demo.andreaseberhard.de/superbgimage/demo_inline.html

    and play with z-index

    regards, Andreas

  30. Fna
    15. Dezember 2009, 02:46 | #30

    @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

  31. 18. Dezember 2009, 11:51 | #31

    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

  32. thomas
    19. Januar 2010, 20:01 | #32

    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

  33. Maarten
    18. Februar 2010, 01:30 | #33

    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?

  34. Maarten
    20. Februar 2010, 21:42 | #34

    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

  35. 23. Februar 2010, 10:26 | #35

    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

  36. chris
    1. März 2010, 16:28 | #36

    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

  37. 2. März 2010, 14:06 | #37

    Hallo Chris,

    das ist absicht und so gewollt. Erst wenn die transition beendet ist wird wieder ein Click erlaubt.

    Gruß
    andreas

  38. 2. März 2010, 14:15 | #38

    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);
    }
    );

  39. Daniel
    3. März 2010, 07:38 | #39

    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

  40. Daniel
    5. März 2010, 15:17 | #40

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

  41. Daniel
    6. März 2010, 22:25 | #41

    Hallo,

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

  42. 6. März 2010, 23:23 | #42

    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

  43. 6. März 2010, 23:24 | #43

    Hallo Daniel,

    schau mal in der Demo, da wird z.B. die Sliedeshow bei mouseOver gestoppt.

    Gruß
    Andreas

  44. Daniel
    8. März 2010, 10:07 | #44

    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);

  45. bastian
    16. März 2010, 10:46 | #45

    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

  46. Lars
    21. März 2010, 19:45 | #46

    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.

  47. Edwin
    22. März 2010, 04:32 | #47

    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.

  48. Ron
    25. März 2010, 20:27 | #48

    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

  49. Fisch
    27. März 2010, 15:51 | #49

    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

  50. 28. März 2010, 17:48 | #50

    Hallo Fisch,

    hast Du das hier schon gesehen: http://demo.andreaseberhard.de/superbgimage/demo_inline.html

    Viele Grüße
    Andreas

  51. Christian
    6. April 2010, 11:56 | #51

    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

  52. 7. April 2010, 12:16 | #52

    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

  53. 10. April 2010, 06:15 | #53

    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?

  54. pascal
    13. April 2010, 00:03 | #54

    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

  55. Fisch
    15. April 2010, 16:25 | #55

    @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 …

  56. Fisch
    16. April 2010, 17:51 | #56

    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

  57. Seb
    16. April 2010, 18:07 | #57

    Hallo Christian,

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

    Viele Grüße

    Seb

  58. 16. April 2010, 20:55 | #58

    @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

  59. 16. April 2010, 20:59 | #59

    @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

  60. Jasper
    26. April 2010, 19:40 | #60

    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

  61. 26. April 2010, 23:27 | #61

    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

  62. 28. Mai 2010, 15:14 | #62

    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

  63. Markus
    22. Juni 2010, 16:31 | #63

    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

  64. 29. Juni 2010, 16:20 | #64

    @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

  65. Chris
    30. Juni 2010, 17:25 | #65

    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

  66. Katrin
    1. Juli 2010, 17:02 | #66

    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

  67. Katrin
    1. Juli 2010, 17:55 | #67

    Entschuldigung, ich meinte 2.0…

  68. 1. Juli 2010, 22:41 | #68

    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

  69. Sylvia
    3. Juli 2010, 12:55 | #69

    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

  70. 6. Juli 2010, 16:35 | #70

    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 ;)

  71. Gerie
    8. Juli 2010, 17:06 | #71

    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

  72. 13. Juli 2010, 08:57 | #72

    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!

  73. 13. Juli 2010, 09:17 | #73

    @Daniel
    sorry ich meine steiermark.com

  74. 13. Juli 2010, 09:27 | #74

    Hallo Daniel,

    ja das ist möglich siehe z.B. http://traumtapeten.info/ oder http://greenwichdance.org.uk/

  1. 17. Oktober 2009, 01:18 | #1
  2. 26. Januar 2010, 14:20 | #2

    [...] date uno sguardo a questi due indirizzi: http://www.buildinternet.com/project/supersized/ http://dev.andreaseberhard.de/jquery/superbgimage/ Anche questi script si appoggiano alle librerie jQuery e proprio per questo non richiedono grande [...]

    http://www.ferrariwebdesign.it/articoli/immagini-fullscreen-con-jquery/ » Immagini in fullscreen con jQuery | Ferrari Web Design
  3. 5. Februar 2010, 14:07 | #3

    [...] to Andreas Eberhard and his topnotch superbgimage slideshow script. i implemented it into wordpress. it really works [...]

    http://unitedstatesofdesign.com/showroom-is-ready/ United States of Design – Creative Direction & Design Archive » Showroom is ready
  4. 6. März 2010, 23:08 | #4

    [...] Gallerie wurde mit dem jQuery-Plugin SuperBGImage umgesetzt, dass von Andreas Eberhard geschrieben wurde. Dieses Script unterstützt skalierte Fullscreen-Hintergrundbilder und [...]

    http://blog.floriancaspar.de/2010/02/thomas-richartz-jetzt-online/ Thomas Richartz jetzt online! | Presse | Dieses, Eberhard, Andreas, Script, Fullscreen-Hintergrundbilder, Features, Slideshows, SuperBGImage, jQuery-Plugin, Maler
  5. 21. Juni 2010, 08:12 | #5