Grid Accordion Portfolio Photo Gallery For Blogger ~ My Blogger Lab

What is GRID Accordion?

Grid accordion is the combination of thumbnails grids and accordion panel that allows you to display your portfolio in an eye catching method. This widget is so flexible that you can integrate it XML, HTML or any other platform.

>Features of Accordion GRID Image Gallery:

This accordion widget can have up to 20 images. However, you can optimize acceding to your needs.
Since only 2 Jquery files are used in this widget, so it will not going to harm your website speed.
Its API has the ability to take shape of any application.
It Supports caption with normal text of HTML Coding.
This widget supports almost every browser i.e. Google Chrome, Internet Explorer, and etc.

How To Install GRID Accordion Image Gallery in BlogSpot:

The steps are neither extremely complicated and nor you need to learn HTML to integrate this widget in Blogger. Just follow the steps and you will successfully integrate this widget in 10 minutes.

Go To Blogger.com >> Your Blog >> Template
Then press Edit HTML >> and Proceed.
Now Finally Search for ]]></b:skin> and just above it paste the following CSS Code.

/*---MyBloggerLab.com GRID Accordion Widget For Blogger ---*/ .mblaccordion { position:relative; overflow:hidden; } .mblaccordion .panel { background-color:#000; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0BZ0JRXILRlEy2leQX9nrp9yYgkXRBeY-fNXNI1nHowVmdGs8acyd7ImdIAWzdO-d_c9rFDaQfovEm2IuYtwVmEyDORW8TQMBeKeJPx0lb1dkQN4FZ8dewaZ0oBBQh_k4j06rKAiEZOYH/s1600/preloader.gif); background-repeat:no-repeat; background-position:center center; position:absolute; overflow:hidden; } .mblaccordion .shadow { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQQqOausUZawvZMQgOPiJc5AG_OJzNVZe-5JwhdStw2W2KNLTLVu58y22P0Cy5mDomPwN5mk2aYGvH-1NMCneSAeAH4wKN3DJNKocbeJLfsVgDIQq8QM0CjvyJL1JUxloQS4XHDJVOg27p/s1600/shadow.png) repeat-Y; position:absolute; right:0px; width:25px; height:100%; } .mblaccordion .preloader { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSl9MGI8d68_Uqz873PRYDkNPaAkrrcd0GhFUo9988fKo0l75VwSbzSRy5FkX2roiPlNmYJqO8k8gOddatka53YC8PRzSSaWivmKRNL5NfW0YIow1J6Hi1z_AiHUldIJSWlzb_ZoM3cRTU/s1600/preloader2.gif) no-repeat; width:62px; height:14px; position:absolute; z-index:15; } .mblaccordion .caption { overflow:hidden; position:absolute; z-index:20; } .mblaccordion .caption-background { background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG_XPaEF59J-qAgEIo0itoTLt3QLunksiqyWTmvuSp79S-cystOuBjpNbdzIEXtKCeYncBuQWoDOng4Tcitr-bja1LWQS_2wHoEHwgLg0PltiUuVWSW_tKTuP14OsGJJo50bshRtDAcLnf/s1600/captionBg.png); background:rgba(0,0,0,0.5); position:absolute; width:100%; height:100%; } .mblaccordion .caption p { color:#FFF; margin:0px; padding:10px; } .mblaccordion .caption p a { color:#FFF; } .mblaccordion { background-color:#FFF; border:4px solid #FFF; } .mblaccordion .panel { background-color:#EEE; } .mblaccordion { width:1200px; margin:0px auto; list-style:none; padding:0px; } .mblaccordion img, .mblaccordion .caption { position:absolute; left:-9999px; } #navigation { width:200px; height:25px; margin:60px auto 0px; } #navigation a { background-color:#F1F1F1; text-decoration:none; color:#999; padding:5px 10px; margin:0px 4px; border:#FFF solid 2px; }

Now Search For </head> and above it paste the following JavaScript code.

<script type="text/javascript" src="http://mbl-flipper-google-blogger.googlecode.com/files/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="http://mbl-flipper-google-blogger.googlecode.com/files/jquery.gridAccordion.min.js"></script> <script type="text/javascript"> jQuery(document).ready(function($){ $('.mblaccordion').gridAccordion({width:940, height:680, columns:5, distance:2, closedPanelWidth:10, closedPanelHeight:10, alignType:'centerCenter', slideshow:true, panelProperties:{ 0:{captionWidth:200, captionHeight:35, captionTop:30, captionLeft:30}, 4:{captionWidth:150, captionHeight:100, captionTop:30, captionLeft:650}, 7:{captionWidth:310, captionHeight:35, captionTop:350, captionLeft:40}, 8:{captionWidth:300, captionHeight:40, captionTop:150, captionLeft:35}, 11:{captionWidth:150, captionHeight:120, captionTop:300, captionLeft:30}, 14:{captionWidth:300, captionHeight:40, captionTop:30, captionLeft:50}, 16:{captionWidth:150, captionHeight:120, captionTop:150, captionLeft:10}, 18:{captionWidth:300, captionHeight:40, captionTop:130, captionLeft:50} }}); }); </script>

Now paste the following HTML Code according to your need. i.e. Posts or Layout.

For Layout: Go to Add a Gadget >> HTML/JavaScript and paste the Following Code.
For Posts: Go to Add new Post >> Select HTML Tab >> And paste the following code.

<ul class="mblaccordion"> <li> <img src="Image-Here" alt="ALT"/> <div class="caption">Text</div> </li> <li> <img src="Image-Here" alt="ALT"/> <div class="caption">Text</div> </li> <li> <img src="Image-Here" alt="ALT"/> <div class="caption">Text</div> </li> <li> <img src="Image-Here" alt="ALT"/> <div class="caption">Text</div> </li> <li> <img src="mage-Here" alt="ALT"/> <div class="caption"> Text </div> </li> <li> <img src="Image-Here" alt="ALT"/> <div class="caption">Text</div> </li> <li> <img src="Image-Here" alt="ALT"/> <div class="caption">Text</div> </li> <li> <img src="Image-Here" alt="ALT"/> <div class="caption">Text</div> </li> <li> <img src="Image-Here" alt="ALT"/> <div class="caption">Text</div> </li> <li> <img src="Image-Here" alt="ALT"/> <div class="caption">Text</div> </li> <li> <img src="Image-Here" alt="ALT"/> <div class="caption"> Text</div> </li> <li> <img src="Image-Here" alt="ALT"/> <div class="caption"> Text </div> </li> <li> <img src="Image-Here" alt="ALT"/> <div class="caption">Text</div> </li> <li> <img src="Image-Here" alt="ALT"/> <div class="caption">Text</div> </li> <li> <img src=" Image-Here " alt="ALT"/> <div class="caption">Text</div> </li> <li> <img src="Image-Here" alt="ALT"/> <div class="caption">Text</div> </li> <li> <img src="Image-Here" alt="ALT"/> <div class="caption">Text</div> </li> <li> <img src="Image-Here" alt="ALT"/> <div class="caption">Text</div> </li> <li> <img src="Image-Here " alt="ALT"/> <div class="caption">Text</div> </li> <li> <img src="Image-Here" alt="ALT"/> <div class="caption">Text</div> </li> </ul>

Customization:

Replace Image-Here with the images of your photo gallery.
Replace Text with the sentence that you want to show on your image.
Replace 940 if you want to adjust the width of the photo gallery.
Replace 680 if you like to change the height.
You can even increase the number of columns by changing columns:5. according to your need.

All Done: Now after customizing save it and that't it. If you got stuck in middle then don't forgot to leave a comment. till then, peace, blessings and happy blogging.

Credits: Since this widget is created by MyBloggerLab.com its strictly prohabitated to reproduce it without giving proper credits. Please do give credits to keep the environment clean.

Acknowledgment: Special Thanks to bqworks.com for all their support and frequent help.