Membuat Jquey Pretty Photo Tanpa Plugin

Jquery prettyPhoto Lightbox CloneMembuat atau mengaktifkan atau bisa pula menancapkan Jquery Pretty Photo tanpa Plugin. Maksudnya bagaimana?
begini, ungkin sahabat pernah memakai sebuah plugin yang bernama Jquery Lightbox , Jquery ColorBox , Jquery PrettyPhoto dll. Fungsi dari plugin tersebut adalah memberikan sebuah efek kepada gambar / image yang kita tampilkan di Website saat di klik akan muncul sebuah pop up dimana Gambar tersebut akan meng Overide/ paling depan sendiri menutupi website. pokoknya seperti itu lah 😀

Salah satu contoh adalah berada di Blog sederhana ini, saat gambar yang mempunyai link yang langsung mengarah ke Link gambar maka akan muncul Pop Up dimana untuk Menampilkan gambar yang di klik posisinya berada di depan sendiri 😀 hihihih ( bingung ).

saya disini menggunakan Script milik : no-margin-for-errors.com
yang dimana projectnya beralamat di :
http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

Download dulu scriptnya , klik Link diatas. download yang development Version ya 🙂 , biar komplit.
akan tetapi pada javascript saya sedikit rubah , karena di Javascript bawaannya tidak dapat menampilkan description, atau ALT image pada Lightboxnya :).

Langsung ke langkahnya:

  1. Masuk ke folder Tema yang sahabat pakai, dan buat folder :
    • images ,  js dan css

    Kalau sudah ada ya gak usah bikin lagi 😛 . tujuannya membuat folder disini hanyalah untuk sebagai mempermudah dan tidak banyak editing

  2. lalu ekstrak Paket dari Jquery yang telah sahabat download tadi.
    • Copy Folder “prettyPhoto” yang ada di dalam folder images paket Jquery prettyPhoto tadi , ke dalam folder “images” tema sahabat.
    • Copy juga prettyPhoto.css yang ada di folder css  , ke folder css tema sahabat.

    Download dulu script dibawah ini :

    prettypack.js

  3. dan masukkan javascript prettypack.js tersebut ke folder js tema sahabat.
  4. Langkah selanjutnya adalah buka functions.php tema sahabat , lalu tambahkan code berikut :
    /* add css to blog */ 
    function inforiatifstyle(){
            wp_enqueue_style( 'prettystyle', get_template_directory_uri() . '/css/prettyPhoto.css', false, null );
            wp_enqueue_style ('prettystyle');
    }
    add_action( 'wp_enqueue_scripts', 'inforiatifstyle' );
    
    /* add js to blog */
    function inforiatifjs() {
        wp_enqueue_script ('prettypack', get_template_directory_uri() . '/js/prettypack.js', false, NULL);
        wp_enqueue_script ('prettypack');
        }
    add_action( 'wp_head', 'inforiatifjs' );
    /* add rel=prettyPhoto to image linking 
    * Code by Neon Web Media Team
    * License is under : GPL v2 later
    */
    add_filter('the_content', 'prettyPhotorel_insert', 12);
    add_filter('get_comment_text', 'prettyPhotorel_insert');
    function prettyPhotorel_insert ($konten)
    {   global $post;
        $definisi = "/<a(.*?)href=('|\")([^>]*).(bmp|gif|jpeg|jpg|png|avi|mov|mp4|m4v)('|\")(.*?)>(.*?)<\/a>/i";
        $replace = '<a$1href=$2$3.$4$5 rel="prettyPhoto['.$post->ID.']"$6>$7</a>';
        $konten = preg_replace($definisi, $replace, $konten);
        return $konten;
    }
  5. Save , Lalu buka footer.php , dan letakkan code berikut ini tepat dibawah code <?php wp_footer(); ?>,
    <script type="text/javascript"> 
    /* calling pretty photo */
    jQuery(document).ready(function($) { 
     $("a[rel^='prettyPhoto']") .prettyPhoto({
    animation_speed: 'fast', /* fast/slow/normal */ 
    theme: 'pp_default', /* theme is : pp_default / facebook / light_square / dark_square / light_rounded / dark_rounded */
     padding: 35, /* padding for each side of the picture */
    opacity: 0.6, /* Value between 0 and 1 */
    show_title: true, /* true/false show tiitle on above image */
    hideflash: true, /* hide Flash Object or no true/false */ 
    autoplay_slideshow: true /* true/false */ }); })
    </script>

 

lalu save , dan lihat site sahabat , klik salah satu gambar yang langsung link ke url gambar. dan inti dari pretty photo adalah meng-catching url gambar.

berikut saya perjelas satu persatu fungsi dari diatas.
1. Fungsi dari :

 

 function inforiatifstyle(){
        wp_enqueue_style( 'prettystyle', get_template_directory_uri() . '/css/prettyPhoto.css', false, null );
        wp_enqueue_style ('prettystyle');
}
add_action( 'wp_enqueue_scripts', 'inforiatifstyle' );

adalah untuk menambahkan CSS style dari prettyPhoto.css ke barisan code sebelum</head> pemanggilannya oleh

<?php wp_head(); ?>

2. Fungsi dari :

function inforiatifjs() {
    wp_enqueue_script ('prettypack', get_template_directory_uri() . '/js/prettypack.js', false, NULL);
    wp_enqueue_script ('prettypack');
    }
add_action( 'wp_head', 'inforiatifjs' );

 

adalah untuk menambahkan Javascript yang bernama : prettypack.js , di folder js , ke website sahabat , tepat berada di footer , atau pemanggilannya berada di <?php wp_footer(); ?>

3.  Fungsi :

add_filter('the_content', 'prettyPhotorel_insert', 12);
add_filter('get_comment_text', 'prettyPhotorel_insert');
function prettyPhotorel_insert ($konten)
{   global $post;
    $definisi = "/<a(.*?)href=('|\")([^>]*).(bmp|gif|jpeg|jpg|png|avi|mov|mp4|m4v)('|\")(.*?)>(.*?)<\/a>/i";
    $replace = '<a$1href=$2$3.$4$5 rel="prettyPhoto['.$post->ID.']"$6>$7</a>';
    $konten = preg_replace($definisi, $replace, $konten);
    return $konten;
}

adalah untuk menambahkan rel=prettyPhoto , secara otomatis ke alamat url gambar.

4. Fungsi dari :

<script type="text/javascript"> 
/* calling pretty photo */
jQuery(document).ready(function($) { 
 $("a[rel^='prettyPhoto']") .prettyPhoto({
animation_speed: 'fast', /* fast/slow/normal */ 
theme: 'pp_default', /* theme is : pp_default / facebook / light_square / dark_square / light_rounded / dark_rounded */
padding: 35, /* padding for each side of the picture */
opacity: 0.6, /* Value between 0 and 1 */
show_title: true, /* true/false show title on above image */
hideflash: true, /* hide Flash Object or no true/false */ 
autoplay_slideshow: true /* true/false */
 });
 })
</script>

adalah untuk mengapresiasikan atau menjalankan pretty Photo dengan custom Function atau mereplace script bawaan dari prettyPhoto Javascript.

 

dan berikut untuk mengubah atau kustomisasi tampilan dan kerja dari pretty photo , dan sahabat dapat mengeditnya di Inline javascript diatas .

animation_speed: 'fast', /* fast/slow/normal */

fast dapat diganti dengan :  slow atau normal

theme: 'pp_default', /* theme is : pp_default / facebook / light_square / dark_square / light_rounded / dark_rounded */

pp_default dapat diganti dengan : facebook, light_square, dark_square, light_rounded atau  dark_rounded,

 padding: 35, /* padding for each side of the picture */

adalah untuk menentukan padding atau jarak antara gambar dengan sisi luar. besarnya bisa diganti sesuai sahabat kehendaki, besar adalah berukuran px, tapiisi angka / nominal tanpa embel embel px ya 🙂

opacity: 0.6, /* Value between 0 and 1 */

opacity atau transparency dari latar belakang dan popup image yang tampil, value antara 0 – 1 . Semakin besar valuenya maka akan semakin gelap,

show_title: true, /* true/false show title on above image */

Menampilkan Title darei gambar yang sahabat berikan , disini akan menampilkan judul gambar ( title=”judul” )

hideflash: true, /* hide Flash Object or no true/false */

Value untuk hideflash adalah : true atau false, disini sahabat dapat mengatur apakah flash object akan di overide oleh popup image pretty photo atau tidak, dan sangat disarankan untuk disetting true.

autoplay_slideshow: true /* true/false */

ini adalah setting dimana akan memberikan autoplay image slideshow , saat popup prettyphoto muncul , kalau di satu halaman terdapat lebih dari 1 gambar yang di link ke URL gambar tersebut.

untuk versi compressed javascript pretty photo pack bisa di download disini :

http://neonwebmedia.googlecode.com/files/prettypack.min.js

Nah cukup sekian sedikit oprek oprek saya terhadap script php dan editing javascript, maklum newbie dalam hal beginian , jadi untuk yang master bisa minta sarannya, apabila ada kesulitan bisa hubungi syaa 😀