Połącz się z nami

Internet Maker

Galeria zdjęć z zoomem w CSS

Opublikowane

dnia

Dziś stworzymy galerię zdjęć z opcją zoom po kliknięciu. Dodamy także przycisk do zamknięcia grafiki po tym, jak zostanie ona powiększona. I najlepsze- wszystko to wykonamy tylko przy użyciu CSS.

  

Najlepiej, jeśli galeria pozostanie bez możliwości przewijania, ponieważ :target powoduje, że strona skacze do konkretnego obiektu. Taki stan rzeczy może być denerwujący przy długich, przewijanych stronach. Jeśli już jednak użycie scrolla stanie się nieuniknione, możemy napisać kilka linijek Javascript, które znajdziecie w pliku index.html.

Wsparcie

Nasza galeria używa pewnych elementów, w obsługę których nie zostały wyposażone jeszcze wszystkie przeglądarki. Dlatego też z pełnego dema korzystać będzie mogło koło 55% użytkowników Internetu, a bez przejść około 72%.

Zaczynamy!

Na początek spójrzmy na plik HTML. Zawiera dość sporo elementów, jak np. kilka ?holderów?. Każdy z nich jest osobnym zdjęciem. Wszystkie one posiadają różne cechy, jak przycisk do zamknięcia, czy link, który powoduje powiększenie grafiki.

X ziemia
X ziemia
X ziemia

 

CSS

CSS wbrew pozorom nie zawiera szczególnie skomplikowanych elementów. Zacznijmy od zdefiniowania kilku podstawowych rzeczy.

#images-box {
	/* Całowita szerokość okienka ze zdjęciami */
	width: 850px;
	margin: 0px auto;
	position: relative;
	top: 70px;
}

.image-lightbox img {
	/* Dziedziczenie szerokości i wysokości od głównego elementu */
	width: inherit;
	height: inherit;
	z-index: 3000;
}

.holder {
	/* wysokość i szerokość można zmienić */
	width: 250px;
	height: 166px;
	float: left;
	margin: 0 20px 0 0;
}

.image-lightbox {
	/* Dziedziczenie szerokości i wysokości z .holder */
	width: inherit;
	height: inherit;
	padding: 10px;
	box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
	background: #fff;
	border-radius: 5px;
	position: absolute;
	top: 0;
	font-family: Arial, sans-serif;
	/* Przejścia */
	-webkit-transition: all ease-in 0.5s;
	-moz-transition: all ease-in 0.5s;
	-ms-transition: all ease-in 0.5s;
	-o-transition: all ease-in 0.5s;
}

Następnie musimy zaprojektować elementy wewnętrzne. Wszystkie span’y zostały określone jako display: none. Dzięki temu guzik do zamknięcia zdjęcia pojawi się, gdy użytkownik kliknie na grafikę.

.image-lightbox span {
	display: none;
}

.image-lightbox .expand {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	z-index: 4000;
	background: rgba(0,0,0,0); /* naprawia błąd w IE */
	left: 0;
}

.image-lightbox .close {
	position: absolute;
	width: 20px; height: 20px;
	right: 20px; top: 20px;
}

.image-lightbox .close a {
	height: auto; width: auto;
	padding: 5px 10px;
	color: #fff;
	text-decoration: none;
	background: #22272c;
	box-shadow: inset 0px 24px 20px -15px rgba(255, 255, 255, 0.1), inset 0px 0px 10px rgba(0,0,0,0.4), 0px 0px 30px rgba(255,255,255,0.4);
	border-radius: 5px;
	font-weight: bold;
	float: right;
}

.image-lightbox .close a:hover {
	box-shadow: inset 0px -24px 20px -15px rgba(255, 255, 255, 0.01), inset 0px 0px 10px rgba(0,0,0,0.4), 0px 0px 20px rgba(255,255,255,0.4);
}

Zanim przejdziemy do kolejnych kroków, musimy wypozycjonować zdjęcia. Jeśli galeria będzie zawierała więcej grafik, niezbędnym będzie dodanie tutaj jeszcze kilku linijek kodu.

div#image-1 { left: 0; }
div#image-2 { left: 290px; }
div#image-3 { left: 580px; }

Generalnie rzecz biorąc, ?targetowanie? elementów nie jest trudne. Wystarczy, że odpowiednio ustawimy ich pozycję, z-index oraz w niektórych przypadkach zmienimy wartość display.

div[id^=image]:target {
    width: 450px;
    height: 300px;
    z-index: 5000;
    top: 50px;
    left: 200px;
}
div[id^=image]:target .close {
    display: block;
}
 
div[id^=image]:target .expand {
    display: none;
}
 
div#image-1:target, div#image-2:target, div#image-3:target { left: 200px; }

I to wszystko! Poniżej znajduje się pełny kod CSS. Zachęcam także do zobaczenia dema.

@font-face {
    font-family: 'BebasRegular';
    src: url('../BEBAS___-webfont.eot');
    src: url('../BEBAS___-webfont.eot?#iefix') format('embedded-opentype'),
         url('../BEBAS___-webfont.woff') format('woff'),
         url('../BEBAS___-webfont.ttf') format('truetype'),
         url('../BEBAS___-webfont.svg#BebasRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

body {
	padding: 0;
	background: url('background.gif');
	margin: 0;
}

#images-box {
	/* Całowita szerokość okienka ze zdjęciami */
	width: 850px;
	margin: 0px auto;
	position: relative;
	top: 70px;
}

.image-lightbox img {
	/* Dziedziczenie szerokości i wysokości od głównego elementu */
	width: inherit;
	height: inherit;
	z-index: 3000;
}

.holder {
	/* wysokość i szerokość można zmienić */
	width: 250px;
	height: 166px;
	float: left;
	margin: 0 20px 0 0;
}

.image-lightbox {
	/* Dziedziczenie szerokości i wysokości z .holder */
	width: inherit;
	height: inherit;
	padding: 10px;
	box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
	background: #fff;
	border-radius: 5px;
	position: absolute;
	top: 0;
	font-family: Arial, sans-serif;
	/* Przejścia */
	-webkit-transition: all ease-in 0.5s;
	-moz-transition: all ease-in 0.5s;
	-ms-transition: all ease-in 0.5s;
	-o-transition: all ease-in 0.5s;
}

.image-lightbox span {
	display: none;
}

.image-lightbox .expand {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	z-index: 4000;
	background: rgba(0,0,0,0); /* naprawia błąd w IE */
	left: 0;
}

.image-lightbox .close {
	position: absolute;
	width: 20px; height: 20px;
	right: 20px; top: 20px;
}

.image-lightbox .close a {
	height: auto; width: auto;
	padding: 5px 10px;
	color: #fff;
	text-decoration: none;
	background: #22272c;
	box-shadow: inset 0px 24px 20px -15px rgba(255, 255, 255, 0.1), inset 0px 0px 10px rgba(0,0,0,0.4), 0px 0px 30px rgba(255,255,255,0.4);
	border-radius: 5px;
	font-weight: bold;
	float: right;
}

.image-lightbox .close a:hover {
	box-shadow: inset 0px -24px 20px -15px rgba(255, 255, 255, 0.01), inset 0px 0px 10px rgba(0,0,0,0.4), 0px 0px 20px rgba(255,255,255,0.4);
}

div[id^=image]:target {
	width: 450px;
	height: 300px;
	z-index: 5000;
	top: 50px;
	left: 200px;
}
div[id^=image]:target .close {
	display: block;
}

div[id^=image]:target .expand {
	display: none;
}

div#image-1:target, div#image-2:target, div#image-3:target { left: 200px; }

div#image-1 { left: 0; }
div#image-2 { left: 290px; }
div#image-3 { left: 580px; }




#header {
	width: 100%;
	margin: 0px auto;
}

#header #center {
	width: 350px;
	margin: 0px auto;	
}

#header a {
	font-family: 'BebasRegular', sans-serif;
	text-decoration: none;
	color: #000;
	font-size: 50px;
}

#header .head {
}
#header .sub-head {
	color: #909090;
	display: block;
	font-size: 18px;
	position: absolute;
	left: 20px;
	top: 25px;
	vertical-align: middle;
}

Student Informatyki i Ekonometrii na Politechnice Gdańskiej, zapalony fotograf i multiinstrumentalista.

Kontynuuj czytanie
Reklama
Kliknij, by skomentować

Zostaw komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Internet Maker

Pozycjonowanie strony internetowej a reklamy w Internecie – czym się różnią?

Nie masz cierpliwości do pozycjonowania? Skorzystaj z pomocy profesjonalistów!

Opublikowane

dnia

przez

Chcesz osiągnąć sukces w e-biznesie i zwiększyć widoczność swojej strony w sieci? Nie pozostaje Ci nic innego jak zająć się promocją witryny. Zacznij od inwestycji w pozycjonowanie, czyli zgodnej ze wskazówkami Google optymalizacji strony pod wyszukiwarkę internetową. Pamiętaj, że największa ilość wejść pochodzi właśnie z wyszukiwarek, dlatego zajmowanie wysokiej pozycji w rankingu Google szybko przełoży się na lepsze statystyki.

(więcej…)

Kontynuuj czytanie

Internet Maker

Jak szybko i łatwo stworzyć stronę mobilną

Opublikowane

dnia

W dzisiejszych czasach coraz bardziej popularne staje się przeglądanie stron internetowych na urządzeniach mobilnych. Ba! Samo surfowanie po sieci to w sumie już przeszłość – obecnie zakupy czy płatności mobilne to chleb powszedni dla polskich internautów. 

(więcej…)

Kontynuuj czytanie

Internet Maker

Strona na WordPressie? Grunt to dobry hosting

Opublikowane

dnia

WordPress jest powszechnie uważany za najlepszy system zarządzania treścią zarówno dla prostych blogów i stron, jak i większych serwisów internetowych oraz sklepów. Szacuje się, że już 23% witryn na świecie korzysta z WordPressa, a wśród nich takie marki jak BBC,  MTV czy Sony.

(więcej…)

Kontynuuj czytanie

Internet Maker

Jak zabezpieczyć swoje zdjęcia w chmurze

Opublikowane

dnia

Niedawny wyciek nagich zdjęć znanych osobistości wznowił dyskusje na temat bezpieczeństwa naszych prywatnych danych. Jako że część fotografii została wykradziona poprzez iCloud, prezentujemy dziś jak zabezpieczyć swoje dane w chmurze. (więcej…)

Kontynuuj czytanie

Internet Maker

Jak usunąć historię swojej aktywności z Facebooka?

Opublikowane

dnia

Usunięcie swojej aktywności z Facebooka nie jest takie proste, jakby się mogło wydawać. Portal społecznościowy daje możliwość zachowania kopii swoich postów oraz zamknięcia całego konta, jednak co w przypadku gdy chcemy usunąć tylko poszczególne wpisy? (więcej…)

Kontynuuj czytanie
Reklama

Popularne