How to use Shadowbox.js on Wordpress Front End

Thickbox is older one now to use at front end of your WordPress site. Be a new one Shadowbox.js is useful to attract your visitors. Here i will guide you to get a shadowbox on your site.

1.  first we need to download the Shadowbox.js script. form their site and unpack the zip file.  Upload the folder within your themes directory.

2. add the following code into your theme file "functions.php" this will help you to add your shadowbox.js into wordpress settings. 

function my_scripts_method() {

    wp_enqueue_script( 'shadowbox', get_template_directory_uri()  . '/includes/shadowbox/shadowbox.js');

}

add_action( 'wp_enqueue_scripts', 'my_scripts_method' ); 

function kv_enqueue_style () {

 wp_register_style( 'shadow-style', get_template_directory_uri() . '/includes/shadowbox/shadowbox.css');

  wp_enqueue_style( 'shadow-style' );

}

 3.  add a tiny line of code to your theme directory javascript file. Create a file with extension of "js". add the following code into it. 

<script type="text/javascript">

Shadowbox.init();

</script>

4. Here is a function and sample code to direct you to add a post images to show it on shadowbox window.

<?php $args = array(

'post_type'   => 'attachment',

'numberposts' => -1,

'post_parent' => $post->ID,

'post_mime_type' => 'image'

);

$attachments = get_posts( $args );

if ( $attachments )

{

foreach ( $attachments as $attachment )

{

$image_attributes = wp_get_attachment_image_src( $attachment->ID, full, false );

$small_img = wp_get_attachment_image_src( $attachment->ID, array(120,120)); ?>

<?php //add_thickbox(); ?>

<a href="<?php echo $image_attributes[0] ; ?>" rel="shadowbox[Mixed];" > <img src="<?php echo $small_img[0] ; ?>" alt="Plant 1"/> </a>

<?php }

}

?>

try this to add your post files on front end of your WordPress site or blog. I am not familiar with english.  So use it and comment below.

and my next post  i will guide you to use shadowbox to show div  alert window on front end.