Responsive gallery with Awesome Design using Photobox.js

Here i'm going to give you one of the beautiful plugin for gallery style with responsive design, here i'm going to use the photobox jquery for this gallery design. this is really nice one for gallery design. view the demo, lets see the code for that design.

DOWNLOAD                  LIVE DEMO

HTML CODE

<div id="wrapper">
<div class="gallerycontainer">

<div class="gallery_wrapper">
        <a class="photobox_a" href="images/large/1.gif">
            <img src="images/small/1.gif" class="small-img" alt="girl with flowers" />
        </a>
</div>

<div class="gallery_wrapper">
        <a class="photobox_a" href="images/large/2.gif">
            <img src="images/small/2.gif" class="small-img" alt="Beautiful girl" />
        </a>
</div>

<div class="gallery_wrapper">
        <a class="photobox_a" href="images/large/3.gif">
            <img src="images/small/3.gif" class="small-img" alt="So cute" />
        </a>
</div>

<div class="gallery_wrapper">
        <a class="photobox_a" href="images/large/4.gif">
            <img src="images/small/4.gif" class="small-img" alt="Cute baby" />
        </a>
</div>

<div class="gallery_wrapper">
        <a class="photobox_a" href="images/large/5.gif">
            <img src="images/small/5.gif" class="small-img" alt="Colorful kid" />
        </a>
</div>

<div class="gallery_wrapper">
        <a class="photobox_a" href="images/large/6.gif">
            <img src="images/small/6.gif" class="small-img" alt="Angel" />
        </a>
</div>

<div class="gallery_wrapper">
        <a class="photobox_a" href="images/large/7.gif">
            <img src="images/small/7.gif" class="small-img" alt="Cutenesss overloaded" />
        </a>
</div>

<div class="gallery_wrapper">
        <a class="photobox_a" href="images/large/8.gif">
            <img src="images/small/8.gif" class="small-img" alt="Looking at you" />
        </a>
</div>

<div class="gallery_wrapper">
        <a class="photobox_a" href="images/large/9.gif">
            <img src="images/small/9.gif" class="small-img" alt="Impressed" />
        </a>
</div>

<div class="gallery_wrapper">
        <a class="photobox_a" href="images/large/10.gif">
            <img src="images/small/10.gif" class="small-img" alt="Waiting for you" />
        </a>
</div>

<div class="gallery_wrapper">
        <a class="photobox_a" href="images/large/11.gif">
            <img src="images/small/11.gif" class="small-img" alt="Still for you" />
        </a>
</div>

<div class="gallery_wrapper">
        <a class="photobox_a" href="images/large/12.gif">
            <img src="images/small/12.gif" class="small-img" alt="With Angry" />
        </a>
</div>

</div>
</div>

In the script we have add all the css and jquery and script to call the gallery div, for that i have added all the photobox.css and photobox.js and jquery file and script to call the gallery div.
SCRIPT & CSS

<link rel='stylesheet' id='photobox-css'  href='css/photobox.css' type='text/css' media='all' />
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script type='text/javascript' src='js/jquery.photobox.js'></script>

<script type='text/javascript'>
jQuery('.gallerycontainer').photobox('.photobox_a');
jQuery('.gallerycontainer').photobox('.photobox_a:first', { thumbs:false, time:0 }, imageLoaded);
    function imageLoaded(){
        console.log('image has been loaded...');
    }
</script>

I hope this code is really simple and very useful to all designers. this code will be more useful to college and school site for gallery design. make this code more effective to your site. thanks for visiting. keep in touch with in social media. thanks.

RELATED POSTS :

Image gallery with lightbox effect using Jquery
Full screen API using JQuery
Animated scroll to top by using Jquery
Image slider with random animation effects using Jquery
Drag and Drop Concept using Jquery
Accordion toggle using Jquery with Bootstrap
Onload Fancy box Using Jquery
Simple blinking effect using css3 and Jquery
Peeling style on top corner of browser using peelback jquery
Gird and List style view onclick by using Jquery