How to create Mega Photo gallery in Drupal 7

If you want to create mega Photo gallery in drupal 7 looks like below....

then follow some simple steps ..

1. First off all create a content type Gallery.

2. And add a image field configure it Number of value : Unlimited

3. Save it and add some content in Gallery content type.

4.  Add this line to default theme`s template.php

function bartik_process_page(&$variables) {
drupal_add_js(drupal_get_path('theme', 'bartik') . '/js/jquery.mousewheel-3.0.6.pack.js');
drupal_add_js(drupal_get_path('theme', 'bartik') . '/js/fancybox/jquery.fancybox.pack.js');
drupal_add_css(drupal_get_path('theme', 'bartik') . '/js/fancybox/jquery.fancybox.css');
$fancybox = "jQuery(document).ready(function() {
    jQuery('.fancybox').fancybox();
});";
drupal_add_js($fancybox, 'inline');
}

If this function already present in templete.php, then only add this line in between this function.


drupal_add_js(drupal_get_path('theme', 'bartik') . '/js/jquery.mousewheel-3.0.6.pack.js');
drupal_add_js(drupal_get_path('theme', 'bartik') . '/js/fancybox/jquery.fancybox.pack.js');
drupal_add_css(drupal_get_path('theme', 'bartik') . '/js/fancybox/jquery.fancybox.css');
$fancybox = "jQuery(document).ready(function() {
    jQuery('.fancybox').fancybox();
});";
drupal_add_js($fancybox, 'inline');


5. After that add custom template in template folder.Just like node--gallery.tpl.php
In this file that code are....


<div id="node-<?php print $node->nid; ?>" class="node-gallery">
<?php print render($title_prefix); ?>
  <?php if (!$page): ?>
    <h2  style="text-align:center;" <?php print $title_attributes; ?>>
      <?php print $title; ?>
    </h2>
  <?php endif; ?>
  <?php print render($title_suffix); ?>
    <?php
        $imgcount = count($node->field_image['und']);
        for ($i = 0; $i < $imgcount; $i++) {
        $image_uri = $node->field_image['und'][$i]['uri'];
            // url
            $masthead_raw = image_style_url('gallery', $image_uri);
    ?>
      <a href="<?php print file_create_url($node->field_image['und'][$i]['uri']); ?>" rel="group-<?php print $node->nid; ?>" class="fancybox">
        <img class="image<?php print ($i + 1);?>" src="<?php print $masthead_raw; ?>" />
      </a>
    <?php } ?>
</div>


6. Add a view its name gallery.

After that look my gallery its looks like...