Creating a lightbox with SimpleCatalog plugin

Erstellt am: Sunday 14 May 2017  |  Letzte Änderung am: Saturday 11 August 2018

Since SimpleCatalog is based on ItemManager framework it allows us to working outside the default approach. Let's have some fun and create a simple lightbox gallery with just a few lines of PHP code.

First of, create a new category in SimpleCatalog and call it Lightbox.

The next step you need to go to the Items menu, create several items there, with an picture each one (optional, enter a title for your pictures, it will be displayed in the gallery):

Download the simplelightbox jQuery plugin: https://github.com/andreknieriem/simplelightbox/

It's very simple to install and use, download and include simplelightbox.css and simple-lightbox.js to your page, that's all you have to do.

Thus, your template file could look like this (note, you will need to adjust the JavaScript and CSS paths accordingly to your directory structure):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <title>SimpleCatalos as Lightbox</title>
    <link href="https://fonts.googleapis.com/css?family=Raleway:300,400,700" rel="stylesheet">
    <link href='<?php get_theme_url(); ?>/simplelightbox/dist/simplelightbox.min.css' rel='stylesheet' type='text/css'>
    <link href='<?php get_theme_url(); ?>/css/simple-catalog/lightbox.css' rel='stylesheet' type='text/css'>
</head>
<body>
    <div class="container">
        <h1 class="align-center">Lightbox Demo Page</h1>
        <div class="gallery">
            <?php echo $rows; ?>
        </div>
        <p>All images are free availabled on <a href="https://unsplash.com/" target="_blank">Unsplash</a></p>
        <p>Documentation and download <a target="_blank" href="http://andreknieriem.de/simple-lightbox/">here</a></p>
    </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript" src="<?php get_theme_url(); ?>/simplelightbox/dist/simple-lightbox.js"></script>
<script>
    $(function(){
        var gallery = $('.gallery a').simpleLightbox();
    });
</script>
</body>
</html>

Now, here comes the PHP code part, add this code at the top of the template file.

<?php
// You must replace * with your category id here!
$category_id = *;
$catalog->processor->config->frontendItemsPerPage = 50;
$params = array( 'section' => 'frontend', 'selector' => 'active=1', 'pageurl' => '?page=');
$result = $catalog->processor->getItems($category_id, $params);
$rows = '';
if(!empty($result['items'])) {
    foreach($result['items'] as $key => $item) {
        $path = \ImCatalog\Util::getResizedUrl($item, 0, 900, 900, 'resize');
        $thumb_path = \ImCatalog\Util::getResizedUrl($item, 0, 300, 300, 'adaptiveResize');
        $rows .= '<a href="'.$path.'"><img src="'.$thumb_path.'" alt="" title="'.$item->image_title[0].'"/></a>';
    }
}
?>

Your complete template should now look like this:

<?php
// You must replace * with your category id here!
$category_id = *;
$catalog->processor->config->frontendItemsPerPage = 50;
$params = array( 'section' => 'frontend', 'selector' => 'active=1', 'pageurl' => '?page=');
$result = $catalog->processor->getItems($category_id, $params);
$rows = '';
if(!empty($result['items'])) {
    foreach($result['items'] as $key => $item) {
        $path = \ImCatalog\Util::getResizedUrl($item, 0, 900, 900, 'resize');
        $thumb_path = \ImCatalog\Util::getResizedUrl($item, 0, 300, 300, 'adaptiveResize');
        $rows .= '<a href="'.$path.'"><img src="'.$thumb_path.'" alt="" title="'.$item->image_title[0].'"/></a>';
    }
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <title>SimpleCatalos as Lightbox</title>
    <link href="https://fonts.googleapis.com/css?family=Raleway:300,400,700" rel="stylesheet">
    <link href='<?php get_theme_url(); ?>/simplelightbox/dist/simplelightbox.min.css' rel='stylesheet' type='text/css'>
    <link href='<?php get_theme_url(); ?>/css/simple-catalog/lightbox.css' rel='stylesheet' type='text/css'>
</head>
<body>
    <div class="container">
        <h1 class="align-center">Lightbox Demo Page</h1>
        <div class="gallery">
            <?php echo $rows; ?>
        </div>
        <p>All images are free availabled on <a href="https://unsplash.com/" target="_blank">Unsplash</a></p>
        <p>Documentation and download <a target="_blank" href="http://andreknieriem.de/simple-lightbox/">here</a></p>
    </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript" src="<?php get_theme_url(); ?>/simplelightbox/dist/simple-lightbox.js"></script>
<script>
    $(function(){
        var gallery = $('.gallery a').simpleLightbox();
    });
</script>
</body>
</html>

When the page is loaded for the first time, it may take more time to display the pictures, because they have to be cropped first to fit the desired sizes.

Demo Gallery

Autor: Bigin  |  Tags:  FrameworkPHPGetSimpleDevelopmentItemManager