Posted by Aak
Aak-share.com Updated at: 5:05:00 PM

Cara Membuat Kategory Photo Preview Super Keren di Blog

No comments:
Cara Membuat Kategory Photo Preview ~ Gambar atau foto merupakan salah satu aspek penting dalam Blog , mengapa demikian karena gambar atau foto dapat menarik pengunjung untuk membuka halaman pada Blog Anda. Kita dapa membuat tampilan foto menjadi Gallery atau memiliki Effect menjadikan gambar tersebut memiliki daya tarik tersendiri .

Seperti pada yang akan kita ulas kali ini dengan konsep membuat Kategory Photo Preview, dengan menampilkan Fitur sangat menarik yaitu adanya fitur kategory dengan demikian Anda bisa mebuat beberapa kategory didalamnya , menampilkan gambar atau foto Full Scran dan dilengkapi tombol Close Seperti apa yang sudah saya ulas sebelumnya yaitu Image Lightbox Dengan Efek Transisi yang dilengkapi tombol close.



Bagi Anda yang memiliki konsep Blog banyak gambar cocok sekali jika memasang Kategory Photo Preview pada Blog Anda, bagi Anda yang tertarik ingin memasangnya berikut ini langkah-langkahnya:

Pertama-tama buka Editor template, kemudian Anda cari kode ]]></b:skin>, selanjutnya Anda salin kode dibawah ini dan pasangkan di atasnya atau sebelumnya.

/* Kategory Photo Preview*/
img{
  width:100%;
  display:block;
}
.thumbnails-filter {
    display: block;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}

#filter {
    min-width: 150px;
    border: 1px solid #DADADA;
    background: #EAEAEA;
    color: #7B7B7B;
    padding:0.5em 1em;
    font-size:17px;
    margin:1em;
}

/* photos */
.thumbnails{
  display:block;
  width:90%;
  margin:20px auto;
}
.tumb {
  position:relative;
  display: inline-block;
  width: 32.6%;
  height: 150px;
  overflow: hidden;
  background: url(https://dl.dropboxusercontent.com/u/23834858/fotos/loader.gif) no-repeat center center rgba(255, 255, 255, 1);
  padding: 0;
  margin: 0.1em;
  -webkit-transition:all 1s ease;
  transition:all 1s ease;
}
.tumb img {
  display: block;
  width: 100%;
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
  -webkit-transition: -webkit-transform 0.5s ease;
          transition: transform 0.5s ease;
}
.tumb span{
  display:none;
  visibility:hidden;
}

.tumb:hover img {
  -webkit-transform: scale(1.5);
      -ms-transform: scale(1.5);
          transform: scale(1.5);
  -webkit-transition: -webkit-transform 0.5s ease;
          transition: transform 0.5s ease;
}

.thumbnails-preview {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.8s ease;
          transition: all 0.8s ease;
}

.thumbnails-preview  .thumbnail-content {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
}
.thumbnails-preview  .thumbnail-title {
  font-family: sans-serif;
  font-weight: 300;
  color: #777;
  font-size: 20px;
  margin: 0;
  padding: 0;
  margin-top: 2em;
  text-align: center;
}
.thumbnails-preview  .thumbnail-close {
  position: absolute;
  top: 0.2em;
  right: 0.2em;
  border: none;
  font-size: 3em;
  line-height: 1;
  font-family: serif;
  color: #464646;
  text-decoration: none;
}
.thumbnails-preview  .thumbnail-inner .thumbnail-close:hover {
  color: #f55;
}
.thumbnails-preview .thumbnail-content{
  display: block;
  margin: 0 auto;
  width: 100vw;
  max-height: 90vh;
   padding: 0.5em;
  overflow: hidden;
}
.show-thumbnail {
  opacity: 1;
  visibility: visible;
  -webkit-transition: all 0.8s ease;
          transition: all 0.8s ease;
}

.hidden-me{
  opacity:0.1;
  -webkit-transition:all 1s ease;
          transition:all 1s ease;
}

.hidden-me-full{
  display:none;
}

@media screen and (min-width:320px){
  .tumb{width:100%;height:auto;}
  #filter{width:calc(100% - 2em);}
}
@media screen and (min-width:480px){
  .tumb{width:100%;height:auto;}
  #filter{width:calc(100% - 2em);}
}
@media screen and (min-width:700px){
  .tumb{width:calc(100% / 2 - 0.5em);height:160px;}
  #filter{width:150px;}
}
@media screen and (min-width:1024px){
  .tumb{width: calc(100% / 4 - 0.5em);height: 130px;}
  #filter{width:150px;}
}

Selanjutnya Anda cari kode </body> , kemudian copy kode dibawah ini dan pasangkan diatasnya.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" />

Catatan : Apabila pada Template Anda sudah terinstall kode diatas, maka Anda lewati langkah tersebut .

Masih pada kode </body> , selanjutnya Anda salin kode dibawah ini dan pasangkan diatasnya atau dibawah kode diatas.

<script type="text/javascript">
var filter_link = $('#filter'), gallery_item = $('.tumb'), gallery_img = $('.tumb > img');
filter_link.on('change', function () {
    var filterVal = $(this).val();
    console.log(filterVal);
    if (filterVal == 'all') {
        gallery_item.each(function () {
            var self = $(this);
            self.removeClass('hidden-me-full');
            var wait = setTimeout(function () {
                self.removeClass('hidden-me');
                clearTimeout(wait);
            }, 500);
        });
    } else {
        gallery_item.each(function () {
            var self = $(this);
            if (!self.hasClass(filterVal)) {
                self.addClass('hidden-me');
                var wait = setTimeout(function () {
                    console.log('and now');
                    self.addClass('hidden-me-full');
                    clearTimeout(wait);
                }, 500);
            } else {
                self.removeClass('hidden-me-full');
                var wait = setTimeout(function () {
                    self.removeClass('hidden-me');
                    clearTimeout(wait);
                }, 500);
            }
        });
    }
    return false;
});
gallery_img.each(function () {
    $(this).css({ opacity: 0 }).load(function () {
        $(this).animate({ opacity: 1 }, 1000);
    }).attr('src', $(this).data('src')).delay(100).attr('data-src', '');
});
gallery_item.each(function () {
    $(this).on('click', function (e) {
        e.preventDefault();
        $('.thumbnails-preview').addClass('show-thumbnail');
        $('body').css('overflow', 'hidden');
        $('.thumbnail-title').append($(this).find('img').attr('alt'));
        $('.thumbnail-content').append('<img src="' + $(this).find('img').attr('src') + '">');
    });
    $('.thumbnail-close').on('click', function (e) {
        e.preventDefault();
        $('body').css('overflow', '');
        $('.thumbnails-preview').removeClass('show-thumbnail');
        $('.thumbnail-title').html('');
        $('.thumbnail-content').html('');
    });
});
</script>

Berikutnya pemasangan HTML, Anda buka Entri baru kemudian salin kode dibawh ini dan pasangkan pada Mode HTML atau juga Anda bisa memasangknya sesuai dengan yang Anda kehendai .

<div class="thumbnails-filter">
  <select id="filter">
  <option value="all"> Filter By:</option>
  <option value="all">All</option>
  <option value="bridge">Bridge</option>
  <option value="beach">Beach</option>
  <option value="stairs">Stairs</option>
  <option value="city">City</option>
  <option value="clouds">Clouds</option>
</select>
</div>

<div class="thumbnails">
<a href="#" class="tumb bridge hidden-me hidden-me-full">
    <img data-src="" src="http://38.media.tumblr.com/222f39f4520d55100feff7237861b373/tumblr_n8gxs0oWZ21st5lhmo1_1280.jpg" alt="Chris Brignola" style="opacity: 1;"></a>

<a href="#" class="tumb montain hidden-me hidden-me-full">
    <img data-src="" src="http://38.media.tumblr.com/9cca3d64c075b55c0a96303174d66b19/tumblr_na0l33ez3W1st5lhmo1_1280.jpg" alt="Lukasz Szmigiel" style="opacity: 1;"></a>

<a href="#" class="tumb montain hidden-me hidden-me-full">
    <span></span>
    <img data-src="" src="http://37.media.tumblr.com/a8ddf2ecff64b82a903872c6480b13cc/tumblr_na0kiqZ2XU1st5lhmo1_1280.jpg" alt="Gabriel Santiago" style="opacity: 1;"></a>

<a href="#" class="tumb stairs">
    <img data-src="" src="http://37.media.tumblr.com/88cbce9265c55a70a753beb0d6ecc2cd/tumblr_n8gxzn78qH1st5lhmo1_1280.jpg" alt="Jake Hills" style="opacity: 1;"></a>

<a href="#" class="tumb beach hidden-me hidden-me-full">
    <img data-src="" src="http://37.media.tumblr.com/d77e21ed167c2125627b210b48e23f81/tumblr_na0kw25OtD1st5lhmo1_1280.jpg" alt="Ruxandra Mateiu" style="opacity: 1;"></a>

<a href="#" class="tumb city hidden-me hidden-me-full">
    <img data-src="" src="http://38.media.tumblr.com/0ce0bc9816f51963af73c7fdf7757d23/tumblr_na0k70npJI1st5lhmo1_1280.jpg" alt="Siddharth Kothari" style="opacity: 1;"></a>

<a href="#" class="tumb city hidden-me hidden-me-full">
    <img data-src="" src="http://38.media.tumblr.com/2741d3e79ea3782f87c65c1e44b5f9fa/tumblr_na0kb0BLqR1st5lhmo1_1280.jpg" alt="Siddharth Kothari" style="opacity: 1;"></a>

<a href="#" class="tumb beach hidden-me hidden-me-full">
    <img data-src="" src="http://31.media.tumblr.com/e7ac48834604ac8e9aaf4a3c106c4e86/tumblr_n9hxd1c4Y81st5lhmo1_1280.jpg" alt="Cole Patrick" style="opacity: 1;"></a>

<a href="#" class="tumb clouds hidden-me hidden-me-full">
    <img data-src="" src="http://37.media.tumblr.com/bddaeb8fe12eda6bb40cf6a0a18d9efa/tumblr_n8zm8ndGiY1st5lhmo1_1280.jpg" alt="Austin Ban" style="opacity: 1;"></a>
</div>
<div class="thumbnails-preview">
  <a href="#" class="thumbnail-close">×</a>
  <div class="thumbnail-title"></div>
  <div class="thumbnail-content"></div>
</div>

Semoga bermanfaat!



Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments