Spacegallery

Spacegallery: Galeria zdjęć / pokaz wykonany z jQuery

Istnieje wiele rodzajów galerii zdjęć, które można znaleźć w internecie, ale rzadko można znaleźć jeden z wyświetlaniem obrazów w tak różny jak ten. Osoby korzystające z systemu Mac OS X z pewnością odczują wiele podobieństw z Time Machine, a tych, którzy tego nie znają, na pewno będą korzystać z tego typu efektu do przeglądania obrazów. SpaceGallery jest oparte na jQuery galeria obrazu, który wykonuje nakładanie się w atrakcyjny wizualny sposób i zapewnia płynne zanikanie przechodzące na obrazy. Ta 3D galeria zdjęć pozwala z łatwością zainteresować odwiedzających, zdjęcia powiększają się jak w animacji. Aby zobaczyć pokaz slajdów SpaceGallery w akcji, prosimy odwiedzić ten blog demo i kliknij na pierwszym obrazie:

DEMO

Jak dodać Spacegallery pokaz slajdów zdjęć na Blogger

W celu realizacji tej galerii jest bardzo proste. Po prostu wykonaj następujące czynności:

Krok 1. Zaloguj się na konto Blogger i wybierz swój blog. Następnie przejdź do szablonu i kliknij przycisk Edytuj HTML:

Krok 2. Kliknij w dowolnym miejscu na obszarze kodu i wyszukiwanie za pomocą klawiszy CTRL + F tego tagu

</ Head>

Krok 3. Tuż przed / nad </ head>, wklej następujący skrypt:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/> <script src='http://helplogger.googlecode.com/svn/trunk/SpaceGallery/eye.js' type='text/javascript'/>
<script src='http://helplogger.googlecode.com/svn/trunk/SpaceGallery/utils.js' type='text/javascript'/>
<script src='http://helplogger.googlecode.com/svn/trunk/SpaceGallery/spacegallery.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
(function($){
var initLayout = function() {
var hash = window.location.hash.replace('#', '');
var currentTab = $('ul.navigationTabs a')
.bind('click', showTab)
.filter('a[rel=' + hash + ']');
if (currentTab.size() == 0) {
currentTab = $('ul.navigationTabs a:first');
}
showTab.apply(currentTab.get(0));
$('#myGallery').spacegallery({loadingClass: 'loading'});
};
var showTab = function(e) {
var tabIndex = $('ul.navigationTabs a')
.removeClass('active')
.index(this);
$(this)
.addClass('active')
.blur();
$('div.tab')
.hide()
.eq(tabIndex)
.show();
};
EYE.register(initLayout, 'init');
})(jQuery)
//]]>
</script>

Uwaga: jeśli masz już jQuery w szablonie, należy usunąć linię w kolorze czerwonym.

Krok 4. Następnie wyszukiwania (Ctrl + F) dla tego tagu:

]]></b:skin>

Krok 5. Przed tagiem  ]]> </ b: skin> , wklej następujący styl CSS:

#myGallery {
width: 100%;
height: 400px;
}
#myGallery img {
border: 2px solid #52697E;
}
a.loading {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEMvVbwKK4_mFDth0HsNR54d-Lb-n-ScUL6mnyQwaW1cfFReH7Af-BpWAawp8EvmUTwoLNN1e2bE6l_J0XMw9YBx2SwJ1gpti1luqB2zetmpRI6m4Za7y0QDauS8p2TJS2jPYjmGw1bD1j/s1600/ajax_small.gif) no-repeat center;
}
.spacegallery {
position: relative;
overflow: hidden;
}
.spacegallery img {
position: absolute;
left: 50%;
}
.spacegallery a {
position: absolute;
z-index: 1000;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Krok 6. Kliknij na przycisk Zapisz, aby zapisać szablon.

Krok 7. Wreszcie zmiany. Teraz przejdź do układu > Dodaj gadżet HTML / Javascript > skopiuj i wklei w okno poniższy kod:

<div class="spacegallery" id="myGallery">
<img src="Image URL"/>
<img src="Image URL"/>
<img src="Image URL"/>
<img src="Image URL"/>
<img src="Image URL"/>
</div>

Zastąp tekst Image URL na adresy grafik, które mają pojawić się w galerii, biorąc pod uwagę, że ostatni obraz jest pierwszym, który zostanie wyświetlony. Jeśli chcesz dodać ten pokaz slajdów wewnątrz słupka, przejdź do panelu i utworzyć nową wiadomość, a następnie wklei kod w sekcji HTML. To jest to! Teraz możesz cieszyć się tą prostą galerię zdjęć na swoim blogu i mimo, że nie ma opcji lub ustawienia ekranu, to jest bez wątpienia galerię, która będzie zwrócić uwagę czytelników. 

rada:  jeśli masz problem z grafiką to zmień te dwie wartości w punkcie piątym ( Krok 5 ) na odpowiednie dla rozmiarów twoich zdjęć/obrazów. width: 100% - będzie równe wartości height: 400px. czyli obrazka 400x400pikseli

width: 100%;
height: 400px;

możesz dopasować rozmiary następująco, np. 

width: 750px;
height: 400px;

i tak dalej...