RESPONSIVE CSS FRAMEWORK

Photo gallery

How to use

Jumpeye framework includes a responsive jQuery-based photo gallery component. The component works exclusively with Jumpeye framework and it is compatible with all major web browsers including IE8. The component can be used to create photo galleries, image slideshows or portfolios.
1. Download the latest version of Jumpeye framework from the Free version page or from your account (My account -> My downloads).
2. Extract the content of the package. It is recommended to preserve the structure of the framework in your project, but it is not mandatory.
3. The photo gallery is easy to use, the component can be configured in a few minutes. The component works ONLY with the main JS file of the framework JFCore.js. In the <head> tag you need to include the main JS file of the framework, the JS file of the gallery and the CSS file of the grid. To work properly on mobile devices, include the viewport meta tag in the <head> tag.
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0;" />
    <link rel="stylesheet" href="/css/JFGrid.css" />
    <script type="text/javascript" src="/js/JFCore.js"></script>
    <script type="text/javascript" src="/components/imageGallery/JFDarkGallery.js"></script>
</head>
4. After the necessary files are included in the HTML code, in the <body> tag create a container element for the grid using the "container" CSS class. Create a row element and inside this row create a container element for the gallery. The gallery always adapts to the size of its parent.
<body>
    <div class="container">
        ...
        <div class="row">
            <div class="grid_12 columns">
                <div id="photoGallery"></div>
                <script type="text/javascript">
                    (function() {
                        var err;
                        try{
                            JFBase.JFDarkGallery.init({
                                appendToID: 'photoGallery',
                                source:'source.xml',
                                maxWidth:940,
                                maxHeight:470,
                                infoButton: true,
                                folderButton: true,
                                thumbnailButton: true,
                                playButton: true,
                                navigationButtons: true,
                                arrowButtons: true,
                                shareButtons: true,
                                showIndex: true,
                                showTimer: true,
                                fullscreenButton: true,
                                backgroundVisible: true,
                                backgroundAlpha: 1,
                                autoSlideshow: true,
                                slideshowSpeed: 6,
                                textColor: '#FFFFFF',
                                timerColor: '#FFFFFF',
                                controlHoverColor: '#1355b6',
                                folderLabel: 'Folder'
                            });
                        }catch(err){}
                    })();
                </script>
            </div>
        </div>
        ...
    </div>
</body>
5. If you open the HTML document in a browser, you should be able to see the image gallery and interact with it.