Galerie zdjęć są szczególnie przydatne do fotoblogów, ale mogą również służyć tym, którym od czasu do czasu potrzeba takiego gadżetu.
Jak widzieliśmy w poprzednim poradniku na wierzchu bloku mieliśmy małe miniaturki, które zostały rozszerzone na dole każdorazowo, gdy obraz został wybrany.
Różnica polega na tym, że nie trzeba było kliknąć na miniaturę, aby pokazać większą wersję i że zostało nabyte z JavaScript. Tym razem będzie używać tylko, hover i CSS. DEMO
.jpg)
Jak dodać suwak miniatur obrazów CSS na Bloggera
Krok 1. Zaloguj się na pulpicie nawigacyjnym Bloggera i przejdź do szablonu> Edytuj kod HTML
Krok 2. Kliknij w dowolnym miejscu wewnątrz obszaru kodu i nacisnąć klawisze CTRL + F, aby otworzyć okno wyszukiwarki Bloggera
Krok 3. Wklej </ head> wewnątrz pola wyszukiwania i naciśnij Enter.
Krok 4. Tuż nad </ head> dodaj ten kod:
<style type='text/css'>
.image-container {
position: relative;
width: 640px;
height: 530px;
margin: 0 auto;
text-align:center;
overflow: hidden;
}
.image-container a {
display: inline;
text-decoration: none;
}
/* Mini-thumbnails style */ .mini-thumbnail {
width: 18%; /* mini-thumbnails width */ margin:1px;
opacity: 1;
-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.5);
box-shadow: 0px 0px 3px rgba(0,0,0,0.5);
}
/* Style for the main thumbnail */ .large-thumbnail {
position: absolute;
width: 100%;
top: 800px;
margin:0 auto;
text-align: center;
display: block;
-webkit-transition: top 1s ease;
-moz-transition: top 1s ease;
-o-transition: top 1s ease;
-ms-transition: top 1s ease;
transition: top 1s ease;
}
.feature {
top: 110px;
width: 100%;
opacity: .3;
}
/* style for the selected mini-thumbnail */ a:hover .mini-thumbnail {
opacity: .5;
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
}
/* transition effects for the selected image */ a:hover .large-thumbnail {
top: 110px;
width: 100%;
z-index:3;
opacity: 1;
-webkit-transition: top 1s ease;
-moz-transition: top 1s ease;
-o-transition: top 1s ease;
-ms-transition: top 1s ease;
transition: top 1s ease;
}
</style>
Tutaj możemy ustawić określoną wysokość ( height 530px ) i szerokości ( wight 640px ), tak, że możemy przesuwać obraz na granicach ramki i czy mają być ukryte (overflow: hidden);
Pozycjonowanie bezwzględne na większe miniatury ( .large-thumbnail ) ściąga je i umieszcza je w miejscu, które wybrałeś przy użyciu wartości 800px na najwyższym rozmiarze.
Mini-miniaturki, które są w rzeczywistości drugim obrazem pozostają cały czas powyżej w pozycji statycznej i są zmieniane tylko nieznacznie pod względem stylu do rozróżnienia aktywnego (: hover .mini-miniatur), po najechaniu myszką.
Krok 5. Zapisz zmiany klikając na przycisk Zapisz szablon. I wreszcie, musimy dodać kod.
Krok 6. Wklej poniżej strukturę HTML, w której chcesz, wyświetlić galerię przechodząc albo w układ i dodać nowy gadżet (kliknij Dodaj link gadżetu i wybierz HTML / JavaScript ), lub wewnątrz postu lub strony w sekcji HTML.
i wklej ten kod:
<div class="image-container">
<a href="javascript:void(0);">
<img class="mini-thumbnail" src="MINI-THUMB-URL1" />
<img class="large-thumbnail" src="LARGE-THUMB-URL1" />
</a>
<a href="javascript:void(0);">
<img class="mini-thumbnail" src="MINI-THUMB-URL2" />
<img class="large-thumbnail" src="LARGE-THUMB-URL2" />
</a>
<a href="javascript:void(0);">
<img class="mini-thumbnail" src="MINI-THUMB-URL3" />
<img class="large-thumbnail" src="LARGE-THUMB-URL3" />
</a>
<a href="javascript:void(0);">
<img class="mini-thumbnail" src="MINI-THUMB-URL4" />
<img class="large-thumbnail" src="LARGE-THUMB-URL4" />
</a>
<a href="javascript:void(0);">
<img class="mini-thumbnail" src="MINI-THUMB-URL5" />
<img class="large-thumbnail" src="LARGE-THUMB-URL5" />
</a>
<a href="javascript:void(0);">
<img class="large-thumbnail feature" src="LARGE-THUMB-URL1" />
</a>
</div>
