• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Zufälliges Hintergrundbild laden

Senseless

Mitglied
Moin zusammen,

ich möchte gerne, dass das Hintergrundbild auf der Seite http://mini-labradoodle.de/ aus drei Möglichkeiten zufällig angezeigt wird. In diesem Beispiel habe ich drei Testbilder mit den Zahlen 1, 2 und 3 erstellt.
In der HTML habe ich folgenden JavaScript-Code eingefügt:
HTML:
<script type="text/javascript">
    //<![CDATA[
        function bg()
        {
            //Einstellungen
            var stamm = "http://mini-labradoodle.de/images/background_random/background"
            var endung = "jpg"
            var anzahl = 3
            /*
             * Bildname setzt sich zusammen aus [stamm]+[zahl]+[endung], z.B.
             * background3.jpg
             */

            //Zufallszahl zwischen 1 und der Bildanzahl
            var zahl = Math.floor( 1 + anzahl * Math.random() )

            //Bildnamen aus Zufallszahl bilden
            var img = stamm + zahl + "." + endung

            //Hintergrund setzen
            document.getElementsByTagName('body')[0].style.backgroundImage = "url(" + img + ")"
        }
    //]]>
</script>

Derzeit wird mir aber nur das Standardbild angezeigt, das in der CSS definiert ist:
Code:
#header{position:relative;background-image:url('../images/background.jpg');background-size:cover;background-position:center center;background-attachment:fixed;color:#fff;text-align:center;padding:2.5em 0 2em 0;cursor:default;}

Meine Frage ist jetzt, was ich anpassen muss, damit ein Zufallsbild geladen und auch angezeigt wird? Außerdem muss gewährleistet sein, dass bei einer browserseitigen Deaktivierung von JavaScript das Standardbild geladen wird.
Evtl. auch mit einer ganz anderen Lösung, wenn das hiermit nicht möglich sein sollte.

Ich hoffe, ihr könnt mir helfen.

Gruß,
Tobi
 
Werbung:
Dann mache es doch mit PHP.

Ein rand(1,3), dessen Ergebnis in einer Variablen gespeichert wird und abhängig davon CSS-Klassen zuweist.

ungetestet:
PHP:
$zahl = rand(1,3);

if($zahl === 1) {
  $class = "bg1";
} else if(...) {
.....
}

<body class="<?=$class ?>">
 
Ok, Versuch gestartet und Versuch gescheitert. Jetzt wird mir gar kein Bild mehr angezeigt.
Eingabe im Head-Bereich der HTML:
HTML:
<?php
    $zahl = rand(1,3);
  
    if ($zahl === 1) {
      $class = "background1.jpg";
    } else if($zahl === 2) {
      $class = "background2.jpg";
    } else if($zahl === 3) {
      $class = "background3.jpg";
    }
?>

Die CSS habe ich folgenderweise geändert:
Code:
#header{position:relative;background-image: <?=$class ?>);background-size:cover;background-position:center center;background-attachment:fixed;color:#fff;text-align:center;padding:2.5em 0 2em 0;cursor:default;}

Was ist mein Fehler? Den aktuellen Stand habe ich hochgeladen.
 
Werbung:
Da gibt er alles einwandtfrei aus. Alle 3 Varianten erscheinen zufällig.
Aber das Bild will sich leider nicht zeigen.
 
Wo hast du das jetzt drin, in einem CSS File, in einem Style-Container, als Inline-Style? Stimmen die Pfade, wird die Datei auch als PHP geparsed?
 
Werbung:
Viel einfacher:
Code:
background-image: url(<?php echo 'background' . rand(1,3) . '.jpg'; ?>)
 
Also irgendwas scheint bei meinem Code anscheinend nicht zu stimmen. Ich habe jetzt viel rumgespielt und auch die Lösung von Sempervivum versucht, aber es will nicht klappen.
Tronjer, was meinst du genau mit
wird die Datei auch als PHP geparsed?
Ich habe es in meiner CSS im header-Element drin.

Danke für eure Mühe bisher.
 
Meins funktioniert hundertprozentig, weil ich es vor dem Posten getestet habe. Dein Webspace muss PHP unterstützen und deine Datei muss die Endung php haben. Und dieses CSS muss inline sein und nicht in einer getrennten Datei.
 
Werbung:
Jetzt habe ich herausgefunden, wo der Fehler war.
Also folgend ist meine Ausgangssituation (gekürzt) in meiner index.php:
HTML:
<!DOCTYPE html>
<html lang="de-de">
    <head>
        <meta charset="utf-8">
        <title>Mini-Labradoodle-Zucht vom Meißetal</title>
        <meta name="description" content="">
        <meta name="keywords" content="">
        <!--[if lte IE8]><script src="js/html5shiv.js"></script><![endif]-->
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <!--[if lte IE 8]><link rel="stylesheet" href="css/ie8.css" /><![endif]-->
    </head>
    <body class="homepage">
        <div id="header">
            <div style="position: relative; background-image: url(<?php echo 'background' . rand(1,3) . '.jpg'; ?>); background-size: cover; background-position: center center; background-attachment: fixed; color: #fff; text-align: center; padding: 2.5em 0 2em 0; cursor: default;">
            </div>
        </div>
    </body>
</html>

Damit hat es nicht funktioniert. Nach einigen Versuchen habe ich die Zeile 9 entfernt und plötzlich wurden mir die Bilder zufällig angezeigt. So wie ich es mir vorgestellt habe. Leider geht mir durch das Entfernen der Codezeile die Optik flöten. Ich habe mal zum Vergleich zwei Bilder angehängt mit Soll- und Ist-Zustand.
Weiß einer wie ich das Problem des Entfernens umgehen kann, damit es funktioniert?

Gruß,
Tobi
 

Anhänge

  • Ist-Zustand.jpg
    Ist-Zustand.jpg
    317,6 KB · Aufrufe: 4
  • Soll-Zustand.jpg
    Soll-Zustand.jpg
    411,3 KB · Aufrufe: 4
Jetzt habe ich herausgefunden, wo der Fehler war.
Also folgend ist meine Ausgangssituation (gekürzt) in meiner index.php:
HTML:
<!DOCTYPE html>
<html lang="de-de">
    <head>
        <meta charset="utf-8">
        <title>Mini-Labradoodle-Zucht vom Meißetal</title>
        <meta name="description" content="">
        <meta name="keywords" content="">
        <!--[if lte IE8]><script src="js/html5shiv.js"></script><![endif]-->
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <!--[if lte IE 8]><link rel="stylesheet" href="css/ie8.css" /><![endif]-->
    </head>
    <body class="homepage">
        <div id="header">
            <div style="position: relative; background-image: url(<?php echo 'background' . rand(1,3) . '.jpg'; ?>); background-size: cover; background-position: center center; background-attachment: fixed; color: #fff; text-align: center; padding: 2.5em 0 2em 0; cursor: default;">
            </div>
        </div>
    </body>
</html>

Damit hat es nicht funktioniert. Nach einigen Versuchen habe ich die Zeile 9 entfernt und plötzlich wurden mir die Bilder zufällig angezeigt. So wie ich es mir vorgestellt habe. Leider geht mir durch das Entfernen der Codezeile die Optik flöten. Ich habe mal zum Vergleich zwei Bilder angehängt mit Soll- und Ist-Zustand.
Weiß einer wie ich das Problem des Entfernens umgehen kann, damit es funktioniert?

Gruß,
Tobi

Das hat keinerlei Zusammenhang.
jQuery musst du natürlich drin lassen, damit deine jQuery-basierte Seite funktioniert.
Außer natürlich du hast irgendwo ein Script welches etwas mit dem Bild macht. Dann liegt das aber nicht an "Zeile 9" sondern an besagtem Script.
 
Aber wie muss ich das verstehen, dass beim Entfernen von jQuery das Bild dann plötzlich angezeigt wird?
Wäre einer mal bitte so nett, sich die Sache mal genau anzusehen. Ich weiß langsam nicht mehr weiter mit meinem Halbwissen. Was muss ich wie ändern, damit es vernünftig funktionier?

Gruß,
Tobi
 
Werbung:
Aber wie muss ich das verstehen, dass beim Entfernen von jQuery das Bild dann plötzlich angezeigt wird?
Wäre einer mal bitte so nett, sich die Sache mal genau anzusehen. Ich weiß langsam nicht mehr weiter mit meinem Halbwissen. Was muss ich wie ändern, damit es vernünftig funktionier?

Gruß,
Tobi

Wie sieht denn der Stand der Dinge aus? Die von dir geposteten Links haben weder zufällige Bilder noch jQuery deaktiviert (wobei das auch garantiert der falsche Weg ist).
Also erstmal Version mit Zufallsbildern hochladen und aktiviertem jQuery.
 
Jetzt habe ich folgendes hochgeladen:
Zufällige Bilder sind drin und werden auch im Quelltext als solche dargestellt und jQuery ist aktiviert.
 
Hm, in dem was jetzt gerade hochgeladen ist, finde ich den PHP-Code für das zufällige Einbinden der Hintegrundbilder nicht, das BG-Bild ist statisch eingebunden.
Was für ein jQuery-Plugin benutzt Du denn? Ich vermute, dass dieses ebenfalls auf den Hintergrund einwirkt, denn das Einbinden von jQuery allein hat IMO keinen Einfluss auf das BG-Bild.
 
Werbung:
Habe es mir jetzt etwas genauer angesehen: Das Hintergrundbild ist zu sehen, wenn man das Einbinden von init.js deaktiviert. Daraufhin habe ich dieses Skript durch einen Beautifier laufen lassen:
var helios_settings = {
header: {
fullScreen: true,
fadeIn: false, // hier geaendert
fadeDelay: 500
},
carousels: {
speed: 4,
fadeIn: true,
fadeDelay: 250
},
dropotron: {
mode: 'fade',
speed: 350,
noOpenerFade: true,
alignment: 'center',
offsetX: -1,
offsetY: -16
},
skelJS: {
prefix: 'css/style',
resetCSS: true,
boxModel: 'border',
grid: {
gutters: 48
},
breakpoints: {
'widest': {
range: '1680-',
hasStyleSheet: false,
containers: 1400
},
'wide': {
range: '-1680',
containers: 1200
},
'normal': {
range: '-1280',
containers: 'fluid',
grid: {
gutters: 36
},
viewportWidth: 1140
},
'narrow': {
range: '-960',
containers: 'fluid',
grid: {
gutters: 32
}
},
'narrower': {
range: '-840',
containers: 'fluid',
grid: {
gutters: 32,
collapse: true
}
},
'mobile': {
range: '-640',
containers: 'fluid',
grid: {
gutters: 32,
collapse: true
},
lockViewport: true
}
}
},
skelJSPlugins: {
panels: {
transformBreakpoints: 'mobile',
panels: {
navPanel: {
breakpoints: 'mobile',
position: 'top',
size: '75%',
html: '<div data-action="navList" data-args="nav"></div>'
}
},
overlays: {
navButton: {
breakpoints: 'mobile',
position: 'top-center',
width: 100,
height: 50,
html: '<div class="toggle" data-action="togglePanel" data-args="navPanel"></div>'
}
}
}
}
}
skel.init(helios_settings.skelJS, helios_settings.skelJSPlugins);
jQuery.fn.n33_scrolly = function () {
jQuery(this).click(function (e) {
var h = jQuery(this).attr('href'),
target;
if (h.charAt(0) == '#' && h.length > 1 && (target = jQuery(h)).length > 0) {
var pos = Math.max(target.offset().top, 0);
e.preventDefault();
jQuery('body,html').animate({
scrollTop: pos
}, 'slow', 'swing');
}
});
};
jQuery.n33_preloadImage = function (url, onload) {
var $img = $('<img />'),
_IEVersion = (navigator.userAgent.match(/MSIE ([0-9]+)\./) ? parseInt(RegExp.$1) : 99);
$img.attr('src', url);
if ($img.get(0).complete || _IEVersion < 9)(onload)();
else
$img.load(onload);
};
jQuery.fn.n33_formerize = function () {
var _fakes = new Array(),
_form = jQuery(this);
_form.find('input[type=text],textarea').each(function () {
var e = jQuery(this);
if (e.val() == '' || e.val() == e.attr('placeholder')) {
e.addClass('formerize-placeholder');
e.val(e.attr('placeholder'));
}
}).blur(function () {
var e = jQuery(this);
if (e.attr('name').match(/_fakeformerizefield$/)) return;
if (e.val() == '') {
e.addClass('formerize-placeholder');
e.val(e.attr('placeholder'));
}
}).focus(function () {
var e = jQuery(this);
if (e.attr('name').match(/_fakeformerizefield$/)) return;
if (e.val() == e.attr('placeholder')) {
e.removeClass('formerize-placeholder');
e.val('');
}
});
_form.find('input[type=password]').each(function () {
var e = jQuery(this);
var x = jQuery(jQuery('<div>').append(e.clone()).remove().html().replace(/type="password"/i, 'type="text"').replace(/type=password/i, 'type=text'));
if (e.attr('id') != '') x.attr('id', e.attr('id') + '_fakeformerizefield');
if (e.attr('name') != '') x.attr('name', e.attr('name') + '_fakeformerizefield');
x.addClass('formerize-placeholder').val(x.attr('placeholder')).insertAfter(e);
if (e.val() == '') e.hide();
else x.hide();
e.blur(function (event) {
event.preventDefault();
var e = jQuery(this);
var x = e.parent().find('input[name=' + e.attr('name') + '_fakeformerizefield]');
if (e.val() == '') {
e.hide();
x.show();
}
});
x.focus(function (event) {
event.preventDefault();
var x = jQuery(this);
var e = x.parent().find('input[name=' + x.attr('name').replace('_fakeformerizefield', '') + ']');
x.hide();
e.show().focus();
});
x.keypress(function (event) {
event.preventDefault();
x.val('');
});
});
_form.submit(function () {
jQuery(this).find('input[type=text],input[type=password],textarea').each(function (event) {
var e = jQuery(this);
if (e.attr('name').match(/_fakeformerizefield$/)) e.attr('name', '');
if (e.val() == e.attr('placeholder')) {
e.removeClass('formerize-placeholder');
e.val('');
}
});
}).bind("reset", function (event) {
event.preventDefault();
jQuery(this).find('select').val(jQuery('option:first').val());
jQuery(this).find('input,textarea').each(function () {
var e = jQuery(this);
var x;
e.removeClass('formerize-placeholder');
switch (this.type) {
case 'submit':
case 'reset':
break;
case 'password':
e.val(e.attr('defaultValue'));
x = e.parent().find('input[name=' + e.attr('name') + '_fakeformerizefield]');
if (e.val() == '') {
e.hide();
x.show();
} else {
e.show();
x.hide();
}
break;
case 'checkbox':
case 'radio':
e.attr('checked', e.attr('defaultValue'));
break;
case 'text':
case 'textarea':
e.val(e.attr('defaultValue'));
if (e.val() == '') {
e.addClass('formerize-placeholder');
e.val(e.attr('placeholder'));
}
break;
default:
e.val(e.attr('defaultValue'));
break;
}
});
window.setTimeout(function () {
for (x in _fakes) _fakes[x].trigger('formerize_sync');
}, 10);
});
return _form;
};
(function () {
var $window = jQuery(window),
elements = [],
delay = 10,
pad = 0,
timerId, poll = function () {
var l = elements.length,
x = $window.scrollTop() + $window.height(),
i, e;
for (i = 0; i < l; i++) {
e = elements;
if (!e.state && x - e.pad > e.o.offset().top) {
e.state = true;
(e.fn)();
}
}
};
$window.load(function () {
$window.on('scroll resize', function () {
window.clearTimeout(timerId);
timerId = window.setTimeout(function () {
(poll)();
}, delay);
}).trigger('resize');
});
jQuery.fn.n33_onVisible = function (fn, p) {
elements.push({
o: jQuery(this),
fn: fn,
pad: (p ? p : pad),
state: false
});
};
})();
jQuery(function () {
var $window = $(window),
$body = $('body'),
$header = $('#header'),
_IEVersion = (navigator.userAgent.match(/MSIE ([0-9]+)\./) ? parseInt(RegExp.$1) : 99),
_isTouch = !!('ontouchstart' in window),
_isMobile = !!(navigator.userAgent.match(/(iPod|iPhone|iPad|Android|IEMobile)/));
$body.addClass('paused');
$window.load(function () {
$body.removeClass('paused');
});
if (_IEVersion < 10)
$('form').n33_formerize();
$('.scrolly').n33_scrolly();
$('#nav > ul').dropotron(helios_settings.dropotron);
$('.carousel').each(function () {
var $t = $(this),
$forward = $('<span class="forward"></span>'),
$backward = $('<span class="backward"></span>'),
$reel = $t.children('.reel'),
$items = $reel.children('article');
var pos = 0,
leftLimit, rightLimit, itemWidth, reelWidth, timerId;
if (helios_settings.carousels.fadeIn) {
$items.addClass('loading');
$t.n33_onVisible(function () {
var timerId, limit = $items.length - Math.ceil($window.width() / itemWidth);
timerId = window.setInterval(function () {
var x = $items.filter('.loading'),
xf = x.first();
if (x.length <= limit) {
window.clearInterval(timerId);
$items.removeClass('loading');
return;
}
if (_IEVersion < 10) {
xf.fadeTo(750, 1.0);
window.setTimeout(function () {
xf.removeClass('loading');
}, 50);
} else
xf.removeClass('loading');
}, helios_settings.carousels.fadeDelay);
}, 50);
}
$t._update = function () {
pos = 0;
rightLimit = (-1 * reelWidth) + $window.width();
leftLimit = 0;
$t._updatePos();
};
if (_IEVersion < 9)
$t._updatePos = function () {
$reel.css('left', pos);
};
else
$t._updatePos = function () {
$reel.css('transform', 'translate(' + pos + 'px, 0)');
};
$forward.appendTo($t).hide().mouseenter(function (e) {
timerId = window.setInterval(function () {
pos -= helios_settings.carousels.speed;
if (pos <= rightLimit) {
window.clearInterval(timerId);
pos = rightLimit;
}
$t._updatePos();
}, 10);
}).mouseleave(function (e) {
window.clearInterval(timerId);
});
$backward.appendTo($t).hide().mouseenter(function (e) {
timerId = window.setInterval(function () {
pos += helios_settings.carousels.speed;
if (pos >= leftLimit) {
window.clearInterval(timerId);
pos = leftLimit;
}
$t._updatePos();
}, 10);
}).mouseleave(function (e) {
window.clearInterval(timerId);
});
$window.load(function () {
reelWidth = $reel[0].scrollWidth;
skel.onStateChange(function () {
if (_isTouch) {
$reel.css('overflow-y', 'hidden').css('overflow-x', 'scroll').scrollLeft(0);
$forward.hide();
$backward.hide();
} else {
$reel.css('overflow', 'visible').scrollLeft(0);
$forward.show();
$backward.show();
}
$t._update();
});
$window.resize(function () {
reelWidth = $reel[0].scrollWidth;
$t._update();
}).trigger('resize');
});
});
if (_isMobile) {
$header.css('background-attachment', 'scroll');
helios_settings.header.fullScreen = false;
}
if ($body.hasClass('homepage')) {
if (helios_settings.header.fullScreen) {
$window.bind('resize.helios', function () {
window.setTimeout(function () {
var s = $header.children('.inner');
var sh = s.outerHeight(),
hh = $window.height(),
h = Math.ceil((hh - sh) / 2) + 1;
$header.css('padding-top', h).css('padding-bottom', h);
}, 0);
}).trigger('resize');
}
if (helios_settings.header.fadeIn) {
$('<div class="overlay" />').appendTo($header); // hier wird das Hintergrundbild unsichtbar
$window.load(function () {
var imageURL = $header.css('background-image').replace(/"/g, "").replace(/url\(|\)$/ig, "");
$.n33_preloadImage(imageURL, function () {
if (_IEVersion < 10)
$header.children('.overlay').fadeOut(2000);
else
window.setTimeout(function () {
$header.addClass('ready');
}, helios_settings.header.fadeDelay);
});
});
}
}
});
(Leider macht dieses Forum die Einrückungen des Beautifiers wieder zunichte)
Mit dem Debugger stellte ich fest, dass das Hintergrundbild durch diese Anweisung unsichtbar wird:
Code:
$('<div class="overlay" />').appendTo($header);
Daraufhin habe ich das fadeIn beim Header auf false gesetzt
Code:
header: {
fullScreen: true,
fadeIn: false, // hier geaendert
fadeDelay: 500
},
und dadurch wurde das Hintergrundbild sichtbar.
Ich hoffe, dies hat keine negativen Auswirkungen und Du kannst auf das Fadein verzichten.
 
Zuletzt bearbeitet von einem Moderator:
Hey das war die Lösung. Ja, auf das Fade-In kann ich verzichten. War zwar immer ein ganz netter Effekt aber wenn beides zusammen nicht möglich ist, ist mir das Wechseln des BG wichtiger.
Auf die Idee wäre ich nie gekommen.
Ich danke euch allen für eure Hilfe und Geduld und besonders dir Sempervivum für deine Lösung ;)

Gruß,
Tobi
 
Zurück
Oben