Slajder, pobieranie zdjęć po wczytaniu strony, problem z divem na slajder.

pytanie zadane 4 sierpnia 2015 w HTML i CSS przez Karwolo Użytkownik (500 p.)

Witam! Jak zrobić by obrazy pobierały się do pamięci ram przy wczytaniu strony? Robię stronę znajomemu http://stronastronastrona.pe.hu/ Drugie me pytanie to : jak widać, nawet jeśli wszytskie slajdy przelecą to i tak div się jakby kurczył choć ustawiłem jego minimalną wysokość na 500px tak jak w rozmiarze obrazu. Jak zrobić by to tak nie przeskakiwalo tylko czekało sobie aż zdj się wyświetli?

1 odpowiedź

odpowiedź 5 sierpnia 2015 przez chris Gaduła (3,680 p.)
wybrane 5 sierpnia 2015 przez Karwolo

Najlepsza

$(document).ready(zmienslajd) ~ na koncu skryptu. Powinno pomoc, wtedy onload powinien byc usuniety.
Możesz zrobić slajder samym CSS'em (przykład twój)
Tutaj przykład: http://codepen.io/antoniskamamis/pen/hjBrE

Wstaw całość może jeszcze w jednego diva, bo strona sie rozlatuje, przynajmniej u mnie 1600x900, mowa tu o slajderze.

komentarz 5 sierpnia 2015 przez Karwolo Użytkownik (500 p.)

@chris Nie bardzo wiem jak to działa, gdybyśmi mógł to wytłumaczyć byłbym bardzo wdzięczny :D

komentarz 5 sierpnia 2015 przez chris Gaduła (3,680 p.)

Jezeli dokument, bedzie gotowy, skrypt zacznie dzialac. W twoim przypadku cały slajder ruszy.

komentarz 5 sierpnia 2015 przez Karwolo Użytkownik (500 p.)

Wstawiłem to na końcu skryptu jak mówiłeś, lecz strona się ładuje minutę a potem zawiesza, co poszło nie tak? Całość masz na myśli całą stronę razem ze slajderem czy sam slajder?

komentarz 5 sierpnia 2015 przez chris Gaduła (3,680 p.)

Spróbuj na początku dać $(document).ready(function() {

cały skrpyt

})

komentarz 5 sierpnia 2015 przez Karwolo Użytkownik (500 p.)

Niestety nic

komentarz 5 sierpnia 2015 przez chris Gaduła (3,680 p.)

Usunałeś onload?
Propo slajdera: http://prntscr.com/80x9z2

komentarz 5 sierpnia 2015 przez Karwolo Użytkownik (500 p.)

Rzeczywiście, sorry za zabranie czasu. Dzięki wielkie. Teraz wczytywanie działa ale co zrobić, żeby div miał w czasie wczytywania wysokość jakby obrazek tam był?

komentarz 5 sierpnia 2015 przez chris Gaduła (3,680 p.)

HTML

<div class="slajder">
        <img class="slajd" src="xxx">
 </div>

CSS

.slajder {
	padding: 0;
	width: 100%;
height: 500px;
	background-color: #000;
	overflow: hidden;
	position: relative;
}

.slajd{
	position: absolute;
	top: 50%;
	min-height: 100%;
	display: block;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	min-width: 100%;
}

komentarz 5 sierpnia 2015 przez Karwolo Użytkownik (500 p.)

Pięknie wszytsko działa, wielkie dzięki za pomoc! :D

komentarz 5 sierpnia 2015 przez chris Gaduła (3,680 p.)

Polecam się :)

komentarz 8 sierpnia 2015 przez Karwolo Użytkownik (500 p.)

@ chris Jednak potrzebuję Twojej pomocy bo sam nie dam rady :D Ten slajder jak zauważyłeś się rozjeżdża, co proponujesz by z tym zrobić bo ja siedzę nad tym pare godzin ale nic nie skutkuje :D

komentarz 8 sierpnia 2015 przez chris Gaduła (3,680 p.)

Z tego co widze to twoja strona, a raczej jej dokument nie ma stałej szerokości co jest słabym rozwiązaniem, porponowałbym ustawić stałą szerokość 940px wszystkim div'om.

#box {
header,slajder,footer
}
#box wyrównac do środka i będzie śmigać.

Tak pozatym to cały ten slajder jest z internetu, jakiś gotowy skrypt?

komentarz 8 sierpnia 2015 przez Karwolo Użytkownik (500 p.)
edycja 9 sierpnia 2015 przez Karwolo

Nie dokońca bo robiłem go na bazie kursu Mirosława, a skrypt który pokazuje stan slajdów (te kropki ) jest już moim pomysłem :D

komentarz 9 sierpnia 2015 przez chris Gaduła (3,680 p.)

Chodzi o to:

<div class="header>
<div class="tresc headera">
</div>
</div>

A CSS:

.header {
 width: 100%;
background-color: red;
}

.tresc headera {
widtH: 940px;
height: 100px;
margin: 0 auto;
}

Analogicznie z resztą.

Najlepiej chyba będzie jak byś zrobił to od nowa, na czysto.

komentarz 9 sierpnia 2015 przez Karwolo Użytkownik (500 p.)

Masz rację, jutro na spokojnie zacznę od nowa, powiedz mi z czego się uczyłeś, jak nabierałeś doświadczenia żeby ogarniać to rozłożenie elementów na stronie bo dla mnie to od zawsze było problemem? :)

komentarz 9 sierpnia 2015 przez chris Gaduła (3,680 p.)

Ogólnie podstaw uczyłem się w szkole, tak mnie to zaciekawiło, że wyprzedzałem tematy do przodu, zawsze dodawałem coś od siebie (np. w pracach na lekcji). Szablony, strony itd.
Jeżeli Twoja wyobraźnia nie ogarnia tego co być chciał stworzyć, rozrysuj sobie to na kartce albo w paincie, Kwadrat w kwadracie, następny kwadrat w kwadracie. Jeżeli to ma ci ułatwić, to dlaczego nie?
Jak czegoś nie potrafiłem to zazwyczaj odpowiedź znajdywałem na anglojęzycznych portalach. Zazwyczaj stackoverflow.

komentarz 18 sierpnia 2015 przez Karwolo Użytkownik (500 p.)

Dzięi wielkie za pomoc, pomyślałem, że zanim się za to wezmę to pouczę się teorii( znalazłem dobego bloga o css). Nie ma sensu zajmowac Tobie czasu i innym bo ja i tak tego nie ogarnę jeśli tego nie zrozumie :D