Spacegallery: Galeri Foto / Slide Dibuat Dengan JQuery

Ada banyak jenis galeri untuk gambar yang kita temukan di internet, tapi kita jarang melihat satu gambar yang menunjukkan begitu berbeda seperti ini. 

Mereka yang menggunakan Mac OS X pasti akan menemukan banyak kesamaan dengan TimeMachine dan mereka yang tidak, aku yakin akan menikmati jenis efek untuk menampilkan gambar. 

Aku sedang berbicara tentang Spacegallery, galeri gambar dilakukan dengan jQuery di mana gambar yang ditampilkan satu demi satu ketika Anda mengklik pada mereka. Anda dapat melihat pada contoh di bawah. 

Untuk menggunakan galeri ini ikuti langkah-langkah di bawah ini: 

Langkah 1. Login ke Anda Blogger Dashboard , klik pada blog Anda dan kemudian pergi ke Template dan klikpada tombol Edit HTML. 

Langkah 2. Cari menggunakan tombol CTRL + F untuk </ head> tag dan sebelum paste berikut: 

 <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 ('klik', showTab)
. Menyaring ('a [rel =' + hash + ']');
if (currentTab.size () == 0) {
currentTab = $ ('ul.navigationTabs a: pertama');
}
showTab.apply (currentTab.get (0));
. $ ('# Mygallery') spacegallery ({loadingClass: 'memuat'});
};

var showTab = function (e) {
var tabindex = $ ('ul.navigationTabs a')
. RemoveClass ('aktif')
. Index (ini);
$ (Ini)
. AddClass ('aktif')
. Blur ();
$ ('Div.tab')
. Hide ()
. Eq (tabindex)
. Show ();
};

EYE.register (initLayout, 'init');
}) (JQuery)
/ /]]>
</ Script>

Screenshot

Catatan: Jika Anda telah menambahkan jQuery di template anda, kemudian hapus garis merah. 

Langkah 3. Mencari]]> </ b: skin> (CTRL + F) dan ketika Anda menemukannya, klik tanda panah di sebelah itu: 

Paste tepat di atas]]> </ b: skin> gaya CSS berikut: 

 # Mygallery {
width: 100%;
height: 400px;
}
# Mygallery img {
border: 2px solid # 52697E;
}
a.loading {
background: url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk8csz__bXvFlqxONPvJ8GZUq8V6OM0wLxBXa4eOB9aZD4sn9q4YRJoS590y6G2shWO6ZW8jIa9qz6pr8JZIgu49mIA9YfLER4cDN3jDUllF1pzrUzKWPwMeB2QyV0Ji_qBMEPIYR1W2kO/s1600/ajax_small.gif) pusat tidak mengulang-;
}
. Spacegallery {
position: relative;
overflow: hidden;
}
. Spacegallery img {
position: absolute;
kiri: 50%;
}
. Spacegallery a {
position: absolute;
z-index: 1000;
display: block;
top: 0;
kiri: 0;
width: 100%;
height: 100%;
}

Langkah 4. Klik tombol Simpan Template 

Langkah 5. Akhirnya pergi ke Layout> Tambah Gadget> HTML / Javascript dan copy-paste kode di bawah: 

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

Catatan: Jika anda ingin menambahkan slide ini di dalam posting, kemudian membuat posting baru dan paste kode di bagian HTML 

Ganti teks URL gambar dengan URL gambar dari galeri Anda, dengan mengingat bahwa gambar terakhir adalah yang pertama yang akan ditampilkan. 

Dan sehingga Anda dapat menikmati galeri gambar sederhana di blog Anda, dan meskipun tidak memiliki opsi atau pengaturan tampilan, tanpa diragukan lagi galeri yang akan menarik perhatian pembaca Anda.