Witam,
Na forum jest dostępny Background Selector, tj. opcja, gdzie można wybrać sobie tło (każdy może użyć (opcja z Duende v2)).
Chciałbym tę opcję usunąć i zamiast tego. I czy jest możliwe ustawienie by tło samo się zmieniało, np. co kilka sekund?
Powiedzmy, że jest ok. 5 obrazów i płynnie się zmieniają. Zależy mi na tej płynności, niż jeżeli miałby być to pokaz slajdów.
Pozdrawiam
Ok, dzięki za odpowiedź.
Wiedza jest znikoma, raczej szukam odpowiedzi w internecie i jakoś tam powoli robię.
Ten efekt z drugiego linku - o takie coś mi chodziło. Postaram się go wstawić, jakbym miał jakieś problemy to będę pisać.
Jednak łatwiejszy będzie dla mnie do wykonania tej sposób:
https://codepen.io/dudleystorey/pen/ehKpi
Po stawieniu tych kodów, mam pewien problem. Zdjęcia wyświetlają się "nad forum".
Mam obraz na całą stronę, który zmienia się co chwile na inny, a scrollując w dół mam reszte forum.
W global.css mam usunąć
body {
background: url...
Czy kod CSS tam wstawić?
Wystarczy, że dodasz do szablonu
headerinclude (niezgrupowane szablony):
Kod:
<script>
$(document).ready(function() {
$(function() {
var body = $('body');
var backgrounds = new Array(
'url("http://www.planwallpaper.com/static/images/recycled_texture_background_by_sandeep_m-d6aeau9_PZ9chud.jpg")',
'url("http://www.hdbloggers.net/wp-content/uploads/2016/09/Download-Background-Pictures.jpg")'
);
var current = 0;
function nextBackground() {
body.css(
'background',
backgrounds[current = ++current % backgrounds.length]
);
setTimeout(nextBackground, 5000);
}
setTimeout(nextBackground, 5000);
body.css('background', backgrounds[0]);
});
});
</script>
Tutaj zmienisz ścieżki do plików obrazków:
Kod:
var backgrounds = new Array(
'url("http://www.planwallpaper.com/static/images/recycled_texture_background_by_sandeep_m-d6aeau9_PZ9chud.jpg")',
'url("http://www.hdbloggers.net/wp-content/uploads/2016/09/Download-Background-Pictures.jpg")'
);
a w funkcji
setTimeout() wartość 5000 to 5 sekund. Jak chcesz to sobie zmień.
Źródło: https://css-tricks.com/forums/topic/chan...ry-10-sec/
Dzięki za odpowiedź.
Zrobiłem tak jak napisałeś, ale tła nie zmieniają się.
Kod:
<script>
$(document).ready(function() {
$(function() {
var body = $('body');
var backgrounds = new Array(
'url("http://forum.ragesyndrome.net/images/duende2/bg/bg1.png")',
'url("http://forum.ragesyndrome.net/images/duende2/bg/bg2.jpg")',
'url("http://forum.ragesyndrome.net/images/duende2/bg/bg3.jpg")',
'url("http://forum.ragesyndrome.net/images/duende2/bg/bg4.png")',
'url("http://forum.ragesyndrome.net/images/duende2/bg/bg5.png")',
'url("http://forum.ragesyndrome.net/images/duende2/bg/bg6.png")'
);
var current = 0;
function nextBackground() {
body.css(
'background',
backgrounds[current = ++current % backgrounds.length]
);
setTimeout(nextBackground, 3000);
}
setTimeout(nextBackground, 3000);
body.css('background', backgrounds[0]);
});
});
</script>
W sumie do obrazków wystarczy adres względny.
Ponadto, kod dodałeś do headerinclude na początku, przed zaincludowaną biblioteką jQuery. Dodaj kod na koniec pliku (po prostu go przenieś) i daj znać.
Dalej bez zmian, nie zmieniają się tła.
Ok, pozmieniałem trochę w kodzie. Link: /images/duende...
I usunąłem przecinek za ostatnim adresem.
Działa, chociaż czy jest możliwe, żeby tło nie przewijało się? Tło w miejscu, całe forum się przewija - o takie coś mi chodzi.
A jeszcze lepiej, jakby te przejścia były płynne. Tutaj jest coś na rodzaj pokazu slajdów.
Możesz użyć
background-attachment do tego. Aby było płynne możesz dodać fadeIn lub użyć dodatkowo biblioteki jQuery UI.
Tutaj masz przykład z fadeIn:
https://jsfiddle.net/1a31okyz/
Z fadeln wygląda przyzwoicie.
Kod z tego linku wkleić do headerinclude i nic więcej?
Bo tak zrobiłem i nie zmieniają się. Chyba, że coś przeoczyłem.
Ok, widzę, że muszą też być tamte kody.
Mógłbyś powiedzieć, gdzie je wkleić? Ten z HTML i CSS
section w okienku javascript zamień na body po prostu.
Super, działa w najlepsze teraz.
Dziękuję Wam za pomoc.
Mam jeszcze pytanie co do tego zmieniania się.
Poprzez zmienianie się, robi się coś na rodzaj "odświeżania strony". Niby w niczym to nie przeszkadza, oprócz tego, że podczas pisania wskaźnik przeskakuje na początek przez to odświeżenie. Podejrzewam, że będzie to dość irytujące.
Jest możliwość uniknięcia tego?
Co do cofania się wskaźnika - w shoutboxie nie zmienia się po odświeżeniu. Wskaźnik reaguje tylko w edytorze, np. podczas pisania postu.
Ja na JSie specjalnie się nie znam, ale bez .hide() płynniej się zmienia. Jakby ktoś ogarnięty w temacie mógłby się wypowiedzieć to fajnie byłoby.
Na jakiej zasadzie ten wskaźnik przeskakuje? Możesz jakoś to przedstawić (gif / konto testowe / etc.)?
Pisząc jakieś zdanie, przez zmianę tła, wskaźnik przeskakuje na początek linijki. Jakbym wcisnął Home.
Przy dłuższych tekstach, na parę linijek, wskaźnik wraca na początek pierwszej linijki. Tak jakbym miał zacząć pisać od nowa.
Jeśli chcesz sprawdzić w praktyce, to na PW podsyłam Ci dane do testowego konta.
Dopiero znalazłem chwilę czasu, aby tu posiedzieć, lecz chyba zrezygnowałeś ze skryptu.
Ponadto mogła być to wina Twojego edytora tekstu, bo na domyślnym sprawdziłem u siebie i błędu nie zaobserwowałem.