Zmienne tło branding_bg

[Frankenstein777]

Witam !

 

Jak pewnie wtajemniczonym wiadomo, za logiem społeczności na forum znajduje się grafika identyfikowana jako branding_bg. Domyślnie znajduje się w public/style_images/master/.

Chciałbym aby ten obrazek zmieniał się automatycznie w określonym odstępie czasu podczas gdy strona jest wyświetlana. Szukałem jak do tego dojść, jednak nieskutecznie. Znalazłem różne slidery, fajna sprawa ale nie wiem jak to wpleść w kod IPB.

 

CSS który to obsługuje wygląda tak:

#branding {
background: #0f3854 url({style_images_url}/branding_bg.png) repeat-x;
border-bottom: 1px solid #1b3759;
min-height: 64px;
}

Czy ktoś z infokoksów forumowych wie i miałby ochotę mi powiedzieć jak takie cudo wykonać ?

Z góry dziękuję za każdą odpowiedź.

Edytowane 27 Stycznia 2015 przez Frankenstein777

[tenechu]

Coś jak tu http://www.ipsfocus.com/premade/animate/index.php ?

[Frankenstein777]

Tak coś w podobie.

 

Tu widzę mamy <div id="branding" style="background-position: -413px 0px;"> wartość na niebiesko cały czas spada. Ja chciałbym zrobić, żeby nie zmieniała się pozycja div'a tylko jakby src obrazka który się w div'ie znajduje. Trzeba by wyciągnąć skrypt który zmienia te wartość, może dałoby się go przerobić, albo chociaż zobaczyć zasadę działania. Ale stylu po kawałek kodu nie będę kupował.. 

 

Hmm a może to zrobić zwyczajnie timerem w JavaScript i edytować zmienną źródła obrazka. 

 

Tylko musiałbym namierzyć plik który zawiera kod nagłówka strony..

[DawPi]

Zrób to jakimś skryptem podmieniającym background danej pozycji w CSS. Najprościej tak, a nie edytując te 'pliki' od nagłówka. Uwierz mi.

[Frankenstein777]

A nie ma czegoś w stylu <div id="branding" style="background-src: nowe_src;"> ?

[tenechu]

Sprawdź to rozwiązanie

 

http://www.forumweb.pl/poczatkujacy-webmaster/js-jquery-zmiana-tla-na-losowe-co-xx-sekund,88555

[Frankenstein777]

@tenechu dzięki, też się przyda

 

@topic działa: <div id='branding' style='background: #0f3854 url(..url..) repeat-x;'>

 

Teraz tylko pod to zrobię JS i powinno działać  

 

Dzięki za pomoc. 

[DawPi]

Daj znać jak coś wykluje się z tego pomysłu i najlepiej go tutaj wrzuć - będzie dla potomnych.

[Frankenstein777]

Siemka, skończyłem pisać. Wygląda to tak:

 

 

W "globalTemplate":

<!-- ::: BRANDING STRIP: Logo and search box ::: -->
<div id='branding' style='background: url(http://twoja_strona.pl/public/style_images/master/branding_bg.png) repeat-x'>
	<div class='main_width'>
		<div id='logo'>
			<if test="brandingBar:|:ipsRegistry::$applications[ $this->registry->getCurrentApplication() ]['hasCustomHeader']">
				{parse template="overwriteHeader" group="{current_app}_global" params=""}
			<else />
				{parse template="defaultHeader" group="global" params=""}
			</if>
		</div>
			<if test="canSearch:|:$this->memberData['g_use_search'] && $this->settings['allow_search']">
				{parse template="quickSearch" group="global" params=""}
			</if>
		</div>
	</div>
<script type="text/javascript">
	document.getElementById("branding").style.opacity = "1";
	var op = Number(document.getElementById("branding").style.opacity)
	var bg1 = 'url(http://twoja_strona.pl/public/style_images/master/branding_bg.png) repeat-x';
	var bg2 = 'url(http://twoja_strona.pl/public/style_images/master/branding_bg2.png) repeat-x';
	var bg3 = 'url(http://twoja_strona.pl/public/style_images/master/branding_bg3.png) repeat-x';
	var bg4 = 'url(http://twoja_strona.pl/public/style_images/master/branding_bg4.png) repeat-x';
	var bg5 = 'url(http://twoja_strona.pl/public/style_images/master/branding_bg5.png) repeat-x';
	setTimeout(onblur,60000);
	
	function onblur()
	{
		op = Number(document.getElementById("branding").style.opacity) - 0.05;
							
		if (op >= 0)
			{
			document.getElementById("branding").style.opacity = String(op);
			setTimeout(onblur,50);
			}
		else
			{
			if (document.getElementById("branding").style.background == bg1)
				{
				document.getElementById("branding").style.background = bg2;
				}
			else if (document.getElementById("branding").style.background == bg2)
				{
				document.getElementById("branding").style.background = bg3;
				}
			else if (document.getElementById("branding").style.background == bg3)
				{
				document.getElementById("branding").style.background = bg4;
				}
			else if (document.getElementById("branding").style.background == bg4)
				{
				document.getElementById("branding").style.background = bg5;
				}
			else if (document.getElementById("branding").style.background == bg5)
				{
				document.getElementById("branding").style.background = bg1;
				}
			setTimeout(offblur,50);
			}
	}		

	function offblur()
	{
		op = Number(document.getElementById("branding").style.opacity) + 0.05;
						
		if (op < 1.1)
			{
		document.getElementById("branding").style.opacity = String(op);
		setTimeout(offblur,50);
			}
		else
			{
			setTimeout(onblur,60000);
			}
	}

</script>
			<!-- ::: APPLICATION TABS ::: -->

 

Jest zdefiniowane 5 grafik, co minute dana grafika zmieniana jest na następną. Żeby jakoś to wyglądało dałem progresywne wygaszenie starego i przywrócenie nowego obrazka zmieniając przeźroczystość. DawPi pewnie mnie tu zruga, że można by to krócej napisać

 

Efekt jest nawet całkiem przystojny, wyszło względnie tak jak chciałem, jednak okazało się, że nie pasuje mi na stronie xD

Wstawiam więc i zezwalam na kopiowanie, edycje i użytkowanie. Może komuś się przyda : >

Zalecałbym jednak zrobić cookie który zapisuje bieżący obrazek, bo teraz po otwarciu innej podstrony czy tematu leci z powrotem pierwszy obrazek.

 

Jak się przydało komuś to może zostawić strzałeczkę w gorę

Ave !