Galeria - jak to zrobic

pytanie zadane 13 maja 2017 w JavaScript przez Bartlomiej Bywalec (2,480 p.)

Cześć mam pytanie jest jakieś gotowe rozwiazanie pod taka galerie:

Galeria zmienia zdjecie glowne po wyborze obrazka z dolnej galerii albo przy glownym zdjeciu po najechaniu na boki (klikniecie i zmienia sie zdjecie)

Ewentualnie ktoś by mnie odesłał do jakichś tutoriali gdzie coś takiego dowiem sie jak zrobic?

Dziekuje

3 odpowiedzi

odpowiedź 14 maja 2017 przez niezalogowany
wybrane 14 maja 2017 przez Bartlomiej

Najlepsza

Powinieneś znaleźć coś Cię interesującego tutaj:

http://kenwheeler.github.io/slick/

komentarz 14 maja 2017 przez Bartlomiej Bywalec (2,480 p.)

Dzieki !

odpowiedź 13 maja 2017 przez Chess Szeryf (76,710 p.)
edycja 14 maja 2017 przez Chess

Użyj tego: element.addEventListener + zmień adres obrazka na inny, który ma się wczytać, to tyle.

Pozwolę sobie wrzucić mały schemat:

<body style="background:darkgoldenrod">

 <span id="my_image_id">Clicked</span>
 <span id="my_image_id2">Clicked2</span>


<img src="obrazek.png" id="ddd"/>

<script>
function doSomething() {
   document.getElementById('ddd').src='obrazek.png';
}
function doSomething2() {
   document.getElementById('ddd').src='obrazek2.png';
}

var myImage = document.getElementById('my_image_id');
var myImage2 = document.getElementById('my_image_id2');

myImage.addEventListener('click', doSomething, false);
myImage2.addEventListener('click', doSomething2, false);

</script>

Oczywiście weź to zoptymalizuj, bo chyba da się tak zrobić, że zamiast w 2. funkcjach można to zrobić w 1..

komentarz 14 maja 2017 przez Bartlomiej Bywalec (2,480 p.)

Na pewno to dobrze ? bo ten przyklad sprawdzalem i nie dziala?

odpowiedź 13 maja 2017 przez Tomek Sochacki Ekspert (227,510 p.)

Poszukaj na hasła gallery javascript, plugins jquery itp. W necie jest dużo gotowych rozwiązań (np. https://1stwebdesigner.com/jquery-gallery/).

Ale tak na marginesie to tak prostą galerię możesz napisać samodzielnie w JS z odpowiednim CSS. Jak chcesz to spróbuj pokombinować najpierw sam i wrzuć kod to najwyżej pomożemy Ci doprowadzić go do końca.

Pozdrawiam

komentarz 14 maja 2017 przez Bartlomiej Bywalec (2,480 p.)

Wiem bede starał sie sam robic ale na dzien dzisiejszy potrzebuje gotowe rozwiazanie, mam pytanie wybrałem powiedzmy ten slajder:

8. Slideshow 2 (Free)

A w nim strasznie duzo kodu jest nie bd mialo to jakos wplywu negatywnego jesli to wszystko podepne pod projekt moj maly? Chodzi mi o szybkosc i wykorzystanie tego np co jak ten projekt pozniej wrzuce na serwer? Nie bedzie problemu z tym ze nie jestem jego autorem?

komentarz 14 maja 2017 przez Tomek Sochacki Ekspert (227,510 p.)

Co do licencji to musiałbyś przeczytać jej warunki, które powinny być zawarte w dokumentacji albo readme na git. Szczerze to nie analizowałem tych galerii tylko po prostu wpisałem w google javascript gallery i wrzuciłem Ci pierwszy spotkany link z większą ilościa "gotowców". Z tego co widzę ten kod jest na licencji MIT, więc możesz go użyć, ale powinieneś pozostawić informację o jego autorze.

Natomiast jeśli chodzi o ilość kodu i wydajność to wszystko zależy od tego ile go faktycznie jest. Myślę, że samodzielnie możesz stworzyć znacznie krótszy kod gdyż masz większą pewność co do poszczególnych danych i elementów kodu (mniej sprawdzeń, walidacji itp.). Ponad to korzystanie z "gotowców", szczególnie bez dobrej dokumentacji (bo niestety takich jest sporo w sieci) wiąże się z tym, że często nie masz świadomości co do obsługiwanych środowisk (przeglądarek).

W przypadku galerii mniej bym się obawiał wielkości kodu JS, a bardziej wielkości wczytywanych obrazków... Szczególnie jeśli użytkownik będzie miał swobodę ich dodawania (klient). Wiem z doświadczenia w pracy nad systemami CRM, że wielu użytkowników w ogóle nie kontroluje wielkości ładowanych danych (np. przeznaczonych do archiwizacji czy jak u Ciebie do galerii). Pomyśl więc może o jakimś narzędziu na poziomie serwerka, które odpowiednio modyfikowałoby obrazki zapisywane na dysku, albo odpowiednio obsłuż ten problem w JS i w razie potrzeby nakaż klientowi wrzucenie mniejszej grafiki (tylko pytanie... czy klient umie zmniejszyć/skompresować zdjęcie...).

komentarz 14 maja 2017 przez Bartlomiej Bywalec (2,480 p.)

	<div class="row">
		<div class="col-md-12">
			<div class="carousel slide" id="carousel-925739">
				<ol class="carousel-indicators">
					<li data-slide-to="0" data-target="#carousel-925739">
					</li>
					<li data-slide-to="1" data-target="#carousel-925739">
					</li>
					<li data-slide-to="2" data-target="#carousel-925739" class="active">
					</li>
				</ol>
				<div class="carousel-inner">
					<div class="item">
						<img alt="Carousel Bootstrap First" src="slider/1.jpg">
						<div class="carousel-caption">
							<h4>
								Zróżnicuj swoją wycieczke o dodatkowe lokalizacje!
							</h4>
							<p>
								Jestesmy tutaj, aby pomóc Ci zaskoczyć swoich znajomych wspaniałymi zdjęciami z miejsc o których prawodopodobnie nie mieli pojęcia.
							</p>
						</div>
					</div>
					<div class="item">
						<img alt="Carousel Bootstrap Second" src="slider/2.jpg">
						<div class="carousel-caption">
							<h4>
								Oferujemy więcej!
							</h4>
							<p>
								Wyróżnia nas to, że mamy przewagę nad biurami podróży bo to Ty personalizujesz swoją wycieczke. Czuj swobodę!
							</p>
						</div>
					</div>
					<div class="item active">
						<img alt="Carousel Bootstrap Third" src="slider/3.jpg">
						<div class="carousel-caption">
							<h4>
								Zapomniane zabytki? Nie ma sprawy!
							</h4>
							<p>
								Jesteś bardziej wymagającyh podóżnikiem? Z naszą pomocą znajdziesz zabytki, które znają tylko wtajemniczeni!
							</p>
						</div>
					</div>
				</div> <a class="left carousel-control" href="#carousel-925739" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> <a class="right carousel-control" href="#carousel-925739" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
			</div>
		</div>
	</div>

Mam pytanie a jesli zrobie tak ze dodam karuzele pod nia wrzuce obrazki zdjec i dodam element.addEventListener da rade i bedzie dobrze? Ze klikajac w zdjecie z pod karuzeli bedzie sie zmienialo jego zdjecie?

komentarz 14 maja 2017 przez Tomek Sochacki Ekspert (227,510 p.)

teoretycznie wydaje mi się, że tak, ale z bootstrapem pracowałem dawno dawno temu (jeszcze w wersji 3) i akurat karuzelki nie robiłem (potrzebowałem na szybko tylko grid do projektu "na wczoraj").

Z tego co pamiętam to bootstrap chyba podpinał nie tylko CSS ale i JS, więc trzeba by po prostu sprawdzić, a jeśli by to nie pracowało to może przyczyny szukać właśnie w tym JS bootstrapa. Ale lepiej niech wypowiedzą się osoby, które więcej pracują z bootstrapkiem :)

komentarz 14 maja 2017 przez Bartlomiej Bywalec (2,480 p.)

To uzywasz cos innego do RWD czy przestales?

komentarz 14 maja 2017 przez Tomek Sochacki Ekspert (227,510 p.)

..czy przestales?

Myślę, że dzisiaj w czasach gdy 5 letnie dzieci wymiatają na smartfonach nie powinno się nawet myśleć o porzuceniu RWD :)

Do RWD podchodzę jednak zawsze indywidualnie. W większości przypadków prostych aplikacji nawet nie potrzeba żadnego grida, a jedynie odpowiednie @media dla 2-3 szerokości ekranów. Jeśli potrzebuję grida to szybko można sobie zrobić małego, własnego np. z użyciem SASS i pętli. W tej chwili zaczynam pomału wchodzić w "flex" ale niestety z braku czasu ciężko mi się w to porządnie wgryźć...

Ale z żadnym wypadku nie polecam porzucania RDW :) Ponad to w wielu "wizytówkach" w ogólne panuje (albo mi się tak wydaje...) trend na obowiązkowe podpinanie jQuery + bootstrap... mimo, że używane jest z nich nawet nie 5% możliwości... (wiem, bo kiedyś sam tak robiłem i teraz, gdy pracuję w czystym JS widzę jak wiele kodu podpinałem kompletnie bez sensu...).