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!

Czytaj dalej »

jak korzystać cookies w javascript

Każdym razem, gdy odwiedzamy jakąkolwiek witrynę, pliki cookie mogą być przechowywane do "zapamiętania" rzeczy, które robimy w trakcie przeglądania strony. To może się zdarzyć, na przykład, gdy odwiedzamy gdzie mamy stronę do logowania z nazwą użytkownika i hasłem. W tym przypadku, po sprawdzeniu, że dane do logowania są poprawne, zwykle pliki cookies zapisują je na naszym komputerze.

Przykładem może być popularna strona Google. Ta wyszukiwarka pozwala użytkownikom wybrać jakie wyniki wyszukiwania chcesz zobaczyć na każdej stronie. Dzięki plikom cookie, konfiguracja ta pozostaje bez zmian dla każdego komputera, nawet po ponownym uruchomieniu kilku sesji w przeglądarce.

Pomimo tego, że jest to dobre rozwiązanie, można usunąć je od czasu do czasu, bo choć niektóre wygasną to są usuwane automatycznie po jakimś czasie, niektóre z nich nigdy nie wygasają. Podobnie jak wiele innych rzeczy, ciasteczka mogą okazać się słabe, a co za tym idzie mają złą reputację. Na przykład, niektóre strony mogą przechowywać i badać sposoby przeglądania stron przez użytkownika, bez ich wiedzy.
To dlatego większość przeglądarek używa systemu aby je filtrować i może zdecydować, czy będą one zapewnić trochę prywatności w sieci, czy też nie. Jeśli chcesz zobaczyć na żywo przykład jak działa plik cookie, odwiedź tę stronę i odśwież ją kilka razy. Powinieneś dostać powiadomienie w formie okna z informacją o tym, jak wiele razy odwiedziłeś tą stronę. (źródło skrypt: javascriptkit.com).
Poniżej mamy prosty skrypt, który może być używany tak często chcemy, nawet dla różnych celów. Przede wszystkim, ten skrypt tworzy trzy funkcje: pierwsza to ustawić plik cookie, drugi jest, aby ją przeczytać, a ostatni to aby go usunąć. Można go stosować w Bloggerze, korzystając z szablonu HTML i dodać go tuż przed </ head> tagu:

<script type='text/javascript'>
//<![CDATA[
// Set cookie function setCookie(name, value, expires, path, domain, secure) {
document.cookie = name + "=" + escape(value) +
((expires == null) ? "" : "; expires=" + expires.toGMTString()) +
((path == null) ? "" : "; path=" + path) +
((domain == null) ? "" : "; domain=" + domain) +
((secure == null) ? "" : "; secure");
}
// Read cookie function getCookie(name){
var cname = name + "=";
var dc = document.cookie;
if (dc.length > 0) {
begin = dc.indexOf(cname);
if (begin != -1) {
begin += cname.length;
end = dc.indexOf(";", begin);
if (end == -1) end = dc.length;
return unescape(dc.substring(begin, end));
}
}
return null;
}
//delete cookie function eraseCookie (name,path,domain) {
if (getCookie(name)) {
document.cookie = name + "=" +
((path == null) ? "" : "; path=" + path) +
((domain == null) ? "" : "; domain=" + domain) +
"; expires=Thu, 01-Jan-70 00:00:01 GMT";
}
}
//]]>
</script>

Gdy to zrobisz, wypadałoby ustawić ciasteczko, musimy tylko umieścić nazwę i wartość w cudzysłowie, gdy wywołujemy funkcję. Dodatkowo, będziemy ustawić datę wygaśnięcia poprzez uzyskanie aktualnego czasu (w milisekundach) i dodać wymaganą liczbę minut (w milisekundach):

 var expiration = new Date();
expiration.setTime(expiration.getTime() + 10000); //Expire after 10 seconds setCookie("cookiename","hello",expiration);
}

Powyższy kod ustawia plik cookie o nazwie cookiename, z wartością hello i ustawić aktualną datę ważności do 10 sekund po jego ustawienia (10000 milisekund = 10 sekund). Jeśli chcemy, aby przywrócić wartości tego pliku cookie, to powinniśmy użyć drugiej funkcji z nazwy ciasteczka:

var checkCookie = getCookie("cookiename");

Poprzez dodanie tego kodu poniżej wiersza <body>, stworzyliśmy ciasteczko z wartości 'hello', które może być wyświetlane na ekranie, jeśli chcemy. Zniknie po 10 sekundach.

<script type='text/javascript'>
var expiration = new Date();
expiration.setTime(expiration.getTime() + 10000);
setCookie("cookiename","hello",expiration);
var checkCookie = getCookie("cookiename");
document.write(checkCookie);
</script>

Funkcja usuwania jest wykorzystywana w taki sam sposób, jak ta do czytania poprzez kliknięcie na nazwę pliku cookie. Wartości SetCookie dla "domeny" i "bezpieczne" nie są wykorzystywane. Użyj "domeny" na ciasteczka Javascript jeśli używasz go na subdomenie, gdzie plik cookie jest ustawiony w subdomenie widgetów, lecz trzeba, go udostępnić w całej domenie twoja_strona.com.

Połączenie tych trzech funkcji pozwoli nam obsługiwać pliki cookie dla określonych celów, zobaczymy jak  w niedalekiej przyszłości.

Czytaj dalej »