#1 Hintergrundwechsler für body und header von Wolfgang 29.12.2015 06:01

avatar

Hallo Florian,
ist es möglich über das folgende Script "Hintergrund 1" (id="bgimagesswitch1") beim ersten Seitenaufruf gleich einzuspielen?
Habe die Hintergrundbilder aus "Bilder & Hintergründe" herausgenommen, weil sie immer kurz eingeblendet werden!
Somit ist beim ersten Starten der Hintergrund weiß!

Wenn man das Script testen will, muss man den Cache löschen und den Browser neu starten!!!


+ Zum Testen habe ich die CSS in "Eigener CSS Code " eingefügt.
+ Das Script in die Fusszeile.
+ Die DIV-Container unter "<div class="wrap" id="obere_leiste">" in "Obere Leiste".

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 

/*Hintergrundwechsler*/
.bgtopnavi {position:absolute !important;float:left !important;z-index:90000 !important;top:0px}
.bgimagepalette {display:inline-block;z-index:90000 !important;margin:5px !important;height:15px !important;width:20px !important;border:1px solid #eeeeee !important;cursor:pointer;}
 
.bgimagesswitch1 {background:url(http://addpics.com/resize/1920x1920/files/o-e-f85f.jpg);}
.bgimagesswitch2 {background:url(http://www.bilder-hochladen.net/files/big/kr03-46-a5e0.jpg);}
.bgimagesswitch3 {background:url(http://www.bilder-hochladen.net/files/big/kr03-47-8d5e.jpg);}
.bgimagesswitch4 {background:url(http://www.bilder-hochladen.net/files/big/kr03-49-f221.jpg);}
.bgimagesswitch5 {background:url(http://www.bilder-hochladen.net/files/big/kr03-4a-7ef6.jpg);}
/*.bgimagesswitch6 {background:url(http://www.bilder-hochladen.net/files/big/kr03-3g-4c56.jpg);}*/
.bgimagesswitch6 {background: #223376;}
 
/*Hintergrundbild der Kopfzeile*/
.header{background-size: 370px;}
 


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
 

<script type="text/javascript">
//Hintergrundwechsler
 
$('div.topnavigation_wrap').prepend($('div.bgtopnavi'));
 
var getColour = localStorage.background;
$("body,.header").addClass(getColour);
$(document).ready(function () {
 
//Vorschau
$('.bgimagepalette').hover(function() {
 
$("body").removeClass(getColour);
var getColour = $(this).attr("id");
$("body").addClass(getColour);
$('.flagcounter,.heade,.container,.background_hidden,.footer,.imageslider,.transl').attr('style','visibility:hidden !important;');
$('#fb_like,#blog-sidebar').attr('style','display:none !important;');
 
}, function() {
 
$("body").removeClass(getColour);
var getColour = localStorage.background;
$("body").addClass(getColour);
$('#blog-sidebar,#fb_like,.flagcounter,.heade,.container,.background_hidden,.footer,.imageslider,.transl').attr('style','visibility:visible !important;');
});
 
//Hintergrundbild festlegen
$('.bgimagepalette').click(function () {
//$("body").removeClass(getColour);
//localStorage.removeItem('background');
 
var getColour = $(this).attr("id");
localStorage.setItem("background", getColour);
location.reload(); //für den Headerhintergrund
});
});
 
</script>
 


1
2
3
4
5
6
7
8
9
10
11
12
 

<!-- Hintergrundwechsler -->
<div class="bgtopnavi" title="Hintergrundbild durch einen Mausklick ändern!">

<div id="bgimagesswitch1" class="bgimagepalette bgimagesswitch1"></div>
<div id="bgimagesswitch2" class="bgimagepalette bgimagesswitch2"></div>
<div id="bgimagesswitch3" class="bgimagepalette bgimagesswitch3"></div>
<div id="bgimagesswitch4" class="bgimagepalette bgimagesswitch4"></div>
<div id="bgimagesswitch5" class="bgimagepalette bgimagesswitch5"></div>
<div id="bgimagesswitch6" class="bgimagepalette bgimagesswitch6"></div>

</div>
 




Wolfgang

#2 RE: Hintergrundwechsler für body und header von Wolfgang 30.12.2015 06:54

avatar

Hallo Florian,
habe eine Lösung gefunden!

Ich habe die CSS-Angaben für die Hintergründe in unmittelbarer Nähe des Scriptes gebracht.
Jetzt geht es. Die Voreingestellten Hintergrundbilder erscheinen nicht mehr beim Wechsel!


Nachtrag:
Habe eine gute Lösung, denke ich, gefunden!
bei jedem Wechsel und Browser wird nur kurz die Hintergrundfarbe angezeigt und kein voreingestelltes Bild!!!



Ich habe es mit einer if-Anweisung und Laden der Hintergrundbilder über das Script geschafft.
Zusätzlich mussten die Bg's noch mit einem "!important" ausgestattet werden!
Die Standard-Hintergrundbilder werden jetzt nur geladen, wenn noch kein Hintergrundbild über den Wechsler ausgesucht wurde!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<script type="text/javascript">
//Hintergrundwechsler
if (localStorage.background == null) {
$('body').css({'background-image':'url(http://addpics.com/resize/1920x1920/files/o-e-f85f.jpg)'});
$('.header').css({'background-image':'url(http://addpics.com/files/o-f-0e64.jpg)'});
$('.header').css({'background-size':'370px'});
}
 
*
*
*
.bgimagesswitch2 {background:url(http://www.bilder-hochladen.net/files/big/kr03-46-a5e0.jpg) !important;}
*
 
 






Xobor Forum Software von Xobor
Einfach ein eigenes Forum erstellen
Datenschutz