Cara Menciptakan Kategory Photo Preview Super Keren Di Blog

Cara Menciptakan Kategory Photo Preview Super Keren Di Blog

Cara Menciptakan Kategory Photo Preview Super Keren Di Blog

Cara Membuat Kategory Photo Preview Gambar atau foto merupakan salah satu aspek penting dalam Blog , mengapa demikian alasannya ialah gambar atau foto sanggup menarik pengunjung untuk membuka halaman pada Blog Anda. Kita dapa menciptakan tampilan foto menjadi Gallery atau memiliki Effect mengakibatkan gambar tersebut mempunyai 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 sanggup mebuat beberapa kategory didalamnya , menampilkan gambar atau foto Full Scran dan dilengkapi tombol Close Seperti apa yang sudah aku ulas sebelumnya yaitu Image Lightbox Dengan Efek Transisi yang dilengkapi tombol close.



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

Pertama-tama buka Editor template, lalu Anda cari kode ]]></b:skin>, selanjutnya Anda salin arahan 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 arahan </body> , lalu copy arahan 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 arahan diatas, maka Anda lewati langkah tersebut .

Masih pada arahan </body> , selanjutnya Anda salin arahan dibawah ini dan pasangkan diatasnya atau dibawah arahan 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 gres lalu salin arahan dibawh ini dan pasangkan pada Mode HTML atau juga Anda sanggup 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=" Gambar atau foto merupakan salah satu aspek penting dalam Blog Cara Membuat Kategory Photo Preview Super Keren di Blog" 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=" Gambar atau foto merupakan salah satu aspek penting dalam Blog Cara Membuat Kategory Photo Preview Super Keren di Blog" 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=" Gambar atau foto merupakan salah satu aspek penting dalam Blog Cara Membuat Kategory Photo Preview Super Keren di Blog" style="opacity: 1;"></a>

<a href="#" class="tumb stairs">
    <img data-src="" src="http://37.media.tumblr.com/88cbce9265c55a70a753beb0d6ecc2cd/tumblr_n8gxzn78qH1st5lhmo1_1280.jpg" alt=" Gambar atau foto merupakan salah satu aspek penting dalam Blog Cara Membuat Kategory Photo Preview Super Keren di Blog" 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=" Gambar atau foto merupakan salah satu aspek penting dalam Blog Cara Membuat Kategory Photo Preview Super Keren di Blog" 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=" Gambar atau foto merupakan salah satu aspek penting dalam Blog Cara Membuat Kategory Photo Preview Super Keren di Blog" 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=" Gambar atau foto merupakan salah satu aspek penting dalam Blog Cara Membuat Kategory Photo Preview Super Keren di Blog" 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=" Gambar atau foto merupakan salah satu aspek penting dalam Blog Cara Membuat Kategory Photo Preview Super Keren di Blog" 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=" Gambar atau foto merupakan salah satu aspek penting dalam Blog Cara Membuat Kategory Photo Preview Super Keren di Blog" 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!




Sumber http://www.websiteedukasi.com/
Blogger
Disqus
Pilih Sistem Komentar

No comments

Advertiser