Jak dodać galerię miniatur obrazów / zdjęć w Bloggerze

Dla tych, którzy chcieliby, zobaczyć zdjęcie w galerii, mam  galerię wykonaną w JavaScript i CSS. Ta galeria zdjęć wyświetla dostępne miniatury pionowo lub poziomo na górze wybranego obrazu, dzięki czemu łatwiej jest wybrać różne obrazy. 

Jak dodać galerię z miniaturami do Bloggera?

Krok 1. Zaloguj się na konto Bloggera, wybierz bloga i przejdź do edycji HTML szablon >

Krok 2. kliknij w dowolnym miejscu wewnątrz obszaru kodu i nacisnąć klawisze CTRL + F, aby otworzyć okno wyszukiwarki:

Krok 3. Wpisz następujące tag wewnątrz pola wyszukiwania i naciśnij Enter, aby go znaleźć:

</head>

Krok 4. Teraz wybierz jeden z poniższych stylów i skopiuj kod poniżej niego: 

Styl 1

<style type='text/css'>
#image-gallery {display: none;}
  #jquery-gallery {padding:0;margin:0;list-style: none; width: 500px;}
  #jquery-gallery li {width:84px; height: 80px;background-size: 100%;-webkit-background-size: cover;-moz-background-size: cover; -o-background-size: cover;background-size: cover;margin-right: 10px; border: 3px solid #fff; outline: 1px solid #E3E3E3; margin-bottom: 10px;opacity: .5; filter:alpha(opacity=50); float: left; display: block; }
#jquery-gallery li img { position: absolute; top: 100px; left: 0px; display: none;}
  #jquery-gallery li.active img { display: block; border: 3px solid #fff; outline: 1px solid #E3E3E3; width:490px; max-height: 375px;}
  #jquery-gallery li.active, #jquery-gallery li:hover { outline-color: #DFDFDF; opacity: .99;filter:alpha(opacity=99);}
#gallery-caption { position: absolute;color: #000;font-weight: bold;background: #FFFFFF; font-size: 16px; bottom: 0px;} </style>

Styl 2

<style type='text/css'>
#image-gallery { display: none; }
#jquery-gallery {padding:0;margin:0;list-style: none; width: 200px; }
#jquery-gallery li {background-size: 100%;-webkit-background-size: cover;-moz-background-size: cover; -o-background-size: cover;background-size: cover;margin-right: 10px; width: 80px; height: 80px; border: 3px solid #fff; outline: 1px solid #ddd; margin-right: 10px; margin-bottom: 10px; opacity: .5;filter:alpha(opacity=50); float: left; display: block; }
#jquery-gallery li img { position: absolute; top: 0px; left: 200px; display: none; }
#jquery-gallery li.active img { display: block; width:370px; border: 3px solid #fff; outline: 1px solid #E3E3E3; }
#jquery-gallery li.active, #jquery-gallery li:hover { outline-color: #bbb; opacity: .99;filter:alpha(opacity=99);}
#gallery-caption { position: absolute; right: 50px;color: #000;background: #FFFFFF;font-weight: bold; font-size: 16px; top: 0px;} </style>

Uwaga: display: none; pierwszego ID (# image-gallery) jest zapobieganie by obrazy pojawiające się w ich rzeczywistej wielkości, zanim pójdą wewnątrz ramy galerii, podczas ładowania kodu. W # jquery-gallery ustalona jest szerokość  miniaturek (200px), tak, aby były one wyświetlane w dwóch rzędach i  musimy liczyć  się z szerokością miniatury (80px) plus margines między nimi.Opuścił deklaracja # jquery-galerii li img jest przeniesienie większej miniaturę, który pokazuje się poprzez kliknięcie myszy tak, że nie będzie się pokrywać z mniejszymi miniaturkami.

Krok 5. Wklej kod wybranego stylu tuż nad </ head> tag.

Krok 6. Teraz nad tym samym </ head>, dodać ten skrypt:

 <script type='text/javascript'>
//<![CDATA[
var gal = {
init : function() {
if (!document.getElementById || !document.createElement || !document.appendChild) return false;
if (document.getElementById('image-gallery')) document.getElementById('image-gallery').id = 'jquery-gallery';
var li = document.getElementById('jquery-gallery').getElementsByTagName('li');
li[0].className = 'active';
for (i=0; i<li.length; i++) {
li[i].style.backgroundImage = 'url(' + li[i].getElementsByTagName('img')[0].src + ')';
li[i].title = li[i].getElementsByTagName('img')[0].alt;
gal.addEvent(li[i],'click',function() {
var im = document.getElementById('jquery-gallery').getElementsByTagName('li');
for (j=0; j<im.length; j++) {
im[j].className = '';
}
this.className = 'active';
document.getElementById('gallery-caption').innerHTML = this.title; });
}
},
addEvent : function(obj, type, fn) {
if (obj.addEventListener) {
obj.addEventListener(type, fn, false);
}
else if (obj.attachEvent) {
obj["e"+type+fn] = fn;
obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
obj.attachEvent("on"+type, obj[type+fn]);
}
}
}
gal.addEvent(window,'load', function() {
gal.init();
});
//]]>
</script>

Przede wszystkim, co robi ten skrypt, czy istnieje identyfikator o nazwie "image-gallery" i jak uzyskać różne elementy listy, które mogą znajdować się w niej. Elementy te zostaną wyświetlone w formie miniatur, a funkcja będzie decydować, co zrobić, gdy są one aktywne. Tak, że za każdym razem klikając na miniaturkę, "aktywną" klasy zostaną przypisane i miniatur powinny być widoczne w większej ramce.

Krok 7. Wreszcie, zapisz zmiany klikając przycisk "Zapisz szablon". A oto kod HTML zapewnienie normalnego listę z galerii obrazu ID, zamknięty w DIV o względnej pozycji, tak, że będzie uniknąć skutków ubocznych innych już istniejących stanowisk.

Krok 8. wklej poniższy kod HTML, w którym chcesz, aby wyświetlić galerię przechodząc albo układ i dodanie nowego gadżetu (kliknij na układ > Dodaj gadżet i wybierz HTML / JavaScript), lub wklej wewnątrz postu / stronie w sekcji HTML poniższy kod.

 <div style="position:relative;">
<ul id="image-gallery">
<li><img src="IMAGE-URL1" /></li>
<li><img src="IMAGE-URL2" /></li>
<li><img src="IMAGE-URL3" /></li>
<li><img src="IMAGE-URL4" /></li>
<li><img src="IMAGE-URL5" /></li>
</ul>
</div>

Uwaga: jeśli elementy na stronie pokrywania się w galerii, może być konieczne, aby dodać deklarację wysokość po "position: relative;"

<div style="position:relative; height: 500px;"> 

Zmiana IMAGE-URL1 na adres URL obrazu.

W tym przypadku trzeba dodawać linki do zdjęć, aby dodać tę strukturę HTML:

 <div style="position:relative;">
<ul id="image-gallery">
<li><a href="page-URL"><img src="IMAGE-URL1" /></a></li>
<li><a href="page-URL"><img src="IMAGE-URL2" /></a></li>
<li><a href="page-URL"><img src="IMAGE-URL3" /></a></li>
<li><a href="page-URL"><img src="IMAGE-URL4" /></a></li>
<li><a href="page-URL"><img src="IMAGE-URL5" /></a></li>
</ul>
</div>

Ponownie, tutaj trzeba zastąpić tekst strona-URL z adresem URL strony / postu.

Aktualizacja: Aby dodać napisy, proszę pomarańczowe linie zastąpić "Caption" na tekst który ma się pojawić na wybranym zdjęciu :

<div style="position:relative;">
<ul id="image-gallery">
<li><a href="page-URL"><img alt="Caption" src="IMAGE-URL1" /></a></li>
<li><a href="page-URL"><img alt="Caption" src="IMAGE-URL2" /></a></li>
<li><a href="page-URL"><img alt="Caption" src="IMAGE-URL3" /></a></li>
<li><a href="page-URL"><img alt="Caption" src="IMAGE-URL4" /></a></li>
<li><a href="page-URL"><img alt="Caption" src="IMAGE-URL5" /></a></li>
</ul>
<div id="gallery-caption"></div> </div>

Zapisz widget lub opublikuj swoją stronę i gotowe!