HTMLy : Image Pop up menggunakan FancyBox

Mungkin saat ini belum bisa di bilang plugin untuk HTMLy :) -- Berikut hasil untuk image popup setelah lama muter-muter mencari pilihan plugin yang cocok :

Htmly Keren

The Code :

  • Load Jquery
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script>
  • Membuatkan A Href di atas IMG (saya mengambil class POST-BODY)
$(document).ready(function() {
    $('.post-body p img').each(function() {
        var currentImage = $(this);
        currentImage.wrap("<a href='" + currentImage.attr("src") + "'></a>");
    });
});
  • Download FancyBox dan Load
<link href="<?php echo site_url() ?>themes/YourTheme/fancy/jquery.fancybox.css" rel="stylesheet" />
<script src='<?php echo site_url() ?>themes/YourTheme/fancy/jquery.fancybox.pack.js'></script>
  • Final (Membuatkan class di dalam a href dan eksekusi class setelah window load)
$(window).bind('load', function(){
  $("img").parent().addClass("this-image")
  $(".this-image").fancybox({
    beforeShow : function() {
    var alt = this.element.find('img').attr('alt');
    this.inner.find('img').attr('alt', alt);
    this.title = alt;
  }
  });
});

Demo Disini http://www.anakseo.com/2014/02/belajar-blog-htmly

Semoga Bermanfaat :)


Author: Mohamad Fahmi

Saya adalah seorang part-time blogger, co-founder DroidLime.com, saya besar dan tinggal di Jakarta. Menyukai hal-hal yang berkaitan dengan Web, Desain, Musik, Internet dan SEO.

Ikuti saya di Github.

Comments on “HTMLy : Image Pop up menggunakan FancyBox”