jQuery Gridder

A jQuery plugin that displays a thumbnail grid expanding preview similar to the effect seen on Google Images.

Brought to you by www.oriongunning.com

Markup

                        
                            <!-- Gridder navigation -->
                            <ul class="gridder">

                                 <!-- You can load specify which content is loaded by specifying the #ID of the div where the content is  -->
                                <li class="gridder-list" data-griddercontent="#content1">
                                    <img src="https://placehold.it/600x400" />
                                </li>
                                <li class="gridder-list" data-griddercontent="#content2">
                                    <img src="https://placehold.it/600x400" />
                                </li>
                                <li class="gridder-list" data-griddercontent="#content3">
                                    <img src="https://placehold.it/600x400" />
                                </li>

                                <!-- You can also load html/ajax pages by replacing the #ID with a URL -->
                                <li class="gridder-list" data-griddercontent="/content.html">
                                    <img src="https://placehold.it/600x400" />
                                </li>
                            </ul>

                            <!-- Gridder content -->
                            <div id="content1" class="gridder-content"> Content goes here... </div>
                            <div id="content2" class="gridder-content"> Content goes here... </div>
                            <div id="content3" class="gridder-content"> Content goes here... </div>
                        
                    

Options Available

                        
                            // Call Gridder
                            $('.gridder').gridderExpander({
                                scroll: true,
                                scrollOffset: 30,
                                scrollTo: "panel", // panel or listitem
                                animationSpeed: 400,
                                animationEasing: "easeInOutExpo",
                                showNav: true, // Show Navigation
                                nextText: "", // Next button text
                                prevText: "", // Previous button text
                                closeText: "", // Close button text
                                onStart: function () {
                                    //Gridder Inititialized
                                    console.log('On Gridder Initialized...');
                                },
                                onContent: function () {
                                    //Gridder Content Loaded
                                    console.log('On Gridder Expand...');
                                },
                                onClosed: function () {
                                    //Gridder Closed
                                    console.log('On Gridder Closed...');
                                }
                            });