Tutorials

Download View Demo

Photo Albums with Shadowbox

Creating photo albums with Osmek is made easy with Osmek's template parsing abilities. Pairing Osmek with a third-party modal photo viewer, like lightbox or shadowbox, makes for simple work.

In the code below I have created an html template of my photo gallery. Notice that by using the keywords [photos] and [/photos] I can loop through each photo in the album and retrieve a link to the original size photo, an album_id reference, and a thumbnail.

photos.php

<div class="album">
    <h2 class="title" id="album[id]">[title]</h2>
    
    [description]
    
    <ul>
        [photos]
            <li class="photos"><a href="[photo o url]" rel="shadowbox[[album_id]]">[photo 100x100x1]</a></li>
        [/photos]
    </ul>
    
    <div class="clearer"></div>
</div>

Using PHP's native function file_get_contents() I can retrieve my template as a string. Osmek's fetch_template function takes this string and parses the template. Fetch_template takes three parameters, the section id, the template as a string, and an array of options. Since we want Osmek to fill the albums with our photos, we assign fill_albums to 1 in our options array.

index.php (excerpt)

<?php
    
    // Get the photos template
    $template = file_get_contents('views/photos.php');
    
    // Fetch the albums and their photos
    echo $osmek->fetch_template(350, $template, array('fill_albums' => 1)); 
    
?>

Here is the complete index.php file for reference.

index.php

<?php
    include('Osmek.php');
    $osmek = new Osmek('OGxHpAUSbMXaILD5CB4ky1T3zKtnjJVv');
?>
<html>
    <head>
        <title>Photo Albums with Shadowbox</title>
        <link rel="stylesheet" type="text/css" href="assets/css/styles.css" />
        <link rel="stylesheet" type="text/css" href="assets/shadowbox/shadowbox.css">
        <script type="text/javascript" src="assets/shadowbox/shadowbox.js"></script>
        <script type="text/javascript">
            Shadowbox.init();
        </script>
    </head>
    <body>
        <div id="main">
            <div class="content">
                <h1>Photo Albums with Shadowbox</h1>
                <p>Photography by Randy Heisch</p>
                
                <?php
                
                    // Get the photos template
                    $template = file_get_contents('views/photos.php');
                    
                    // Fetch the albums and their photos
                    echo $osmek->fetch_template(350, $template, array('fill_albums' => 1)); 
                    
                ?>
            </div>
        </div>
        <div id="footer">
            Site powered by <a href="http://osmek.com" target="_blank">Osmek.com</a>
        </div>
    </body>
</html>