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:
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;
