Creating photo albums using SmoothGallery

Creating photo albums using SmoothGallery

2 333
Creating photo albums using SmoothGallery

Creating photo albums using SmoothGallery

Today we will continue creating photo albums using different plugins. Next gallery will SmoothGallery. This is free plugin too. This plugin don`t using jQuery how we can expect last time, but it using mootools library. This gallery is html library (not flash), but, anyway – it have very nice interface and rich possibilities. I will tell you how you can apply this gallery for your projects using PHP for generation necessary code.

Here are samples and downloadable package:

Live Demo
Live Demo 2
download in package

Ok, download the example files and lets start coding !


Step 1. PHP

Today we will prepare all necessary code directly in single PHP file. Here are code for first sample:

index.php

<?

$sTemplate = <<<XML
<div class="imageElement">
    <h3>{title}</h3>
    <p>{description}</p>
    <a href="#" title="open image" class="open"></a>
    <img src="{fileurl}" class="full" />
    <img src="{fileurl}" class="thumbnail" />
</div>
XML;

$aUnits = array(
    'image 1' => array('Image 1 description', 'pic1.jpg'),
    'image 2' => array('Image 2 description', 'pic2.jpg'),
    'image 3' => array('Image 3 description', 'pic3.jpg'),
    'image 4' => array('Image 4 description', 'pic4.jpg'),
    'image 5' => array('Image 5 description', 'pic5.jpg')
);

$sGalleryObjects = '';
$sFolder = 'data_images/';
foreach ($aUnits as $sTitle => $aUnitInfo) {
    list($sDescription, $sFileName) = $aUnitInfo;
    $sFilePath = $sFolder . $sFileName;
    $sGalleryObjects .= strtr($sTemplate, array('{fileurl}' => $sFilePath, '{title}' => $sTitle, '{description}' => $sDescription));
}

echo <<<EOF
<link rel="stylesheet" href="css/main.css" type="text/css" />
<link rel="stylesheet" href="css/jd.gallery.css" type="text/css" />
<script src="js/mootools-1.2.1-core-yc.js" type="text/javascript"></script>
<script src="js/mootools-1.2-more.js" type="text/javascript"></script>
<script src="js/jd.gallery.js" type="text/javascript"></script>

<div class="example">
    <h3><a href="#">SmoothGallery examples. First - single gallery, second - multiple galleries</a></h3>
    <div>
        <div id="single_gallery">
            {$sGalleryObjects}
        </div>

        <script type="text/javascript">
            function startGallery() {
                var myGal1 = new gallery($('single_gallery'), {
                    timed: true,
                    delay: 5000,
                    embedLinks: false
                });
            }
            window.addEvent('domready',startGallery);
        </script>
    </div>
</div>
EOF;

?>

So, what I doing here: In begining – I defined template for units of images for gallery. After – defined array of used images. This is only for current sample. In your script all can be different (should be). In result – in foreach cycle we prepared list of images using our template for our gallery. And, after, drawing our result. Pay attention to our javascript, where we perform initialization of our gallery. Don`t forget, that today we don`t using jQuery, but using mootools library (it using $ symbol too). In params I set that images will switching by time with delay in 5 second. This gallery can accept very many different params, here are several of them:

  • showArrows – show navigation arrows?, default value ‘true’
  • showCarousel – show carousel?, default value ‘true’
  • showInfopane – show info panel?, default value ‘true’
  • fadeDuration – fade duration, default value ’500′
  • timed – are images switching by time?, default value ‘false’
  • delay – delay between images, default value ’9000′
  • titleSelector – selector for title elements (check our template for units), default value ‘h3′
  • slideInfoZoneOpacity – default value ’0.7′
  • slideInfoZoneSlide – default value ‘true’
  • carouselMinimizedOpacity – min opacity in carousel, default value ’0.4′
  • carouselMaximizedOpacity – max onhover opacity in carousel, default value ’0.9′
  • textShowCarousel – title to carousel element, default value ‘Pictures’
  • textPreloadingCarousel – title for preloading of carousel, default value ”Loading…’

I hope that you will able to apply necessary custom params by self. Now, want to tell, that this plugin allow to draw not only single gallery, but also multiple galleries too, here are sources of our second sample:

index-2.php

<?

$sTemplate = <<<XML
<div class="imageElement">
    <h3>{title}</h3>
    <p>{description}</p>
    <a href="#" title="open image" class="open"></a>
    <img src="{fileurl}" class="full" />
    <img src="{fileurl}" class="thumbnail" />
</div>
XML;

$aUnits = array(
    'Album #1' => array(
        'image 1' => array('Image 1 description', 'pic1.jpg'),
        'image 2' => array('Image 2 description', 'pic2.jpg'),
        'image 3' => array('Image 3 description', 'pic3.jpg'),
        'image 4' => array('Image 4 description', 'pic4.jpg'),
        'image 5' => array('Image 5 description', 'pic5.jpg'),
        'image 6' => array('Image 6 description', 'pic6.jpg')
    ),
    'Album #2' => array(
        'image 7' => array('Image 7 description', 'pic7.jpg'),
        'image 8' => array('Image 8 description', 'pic8.jpg'),
        'image 9' => array('Image 9 description', 'pic9.jpg'),
        'image 10' => array('Image 10 description', 'pic10.jpg'),
        'image 11' => array('Image 11 description', 'pic11.jpg'),
        'image 12' => array('Image 12 description', 'pic12.jpg')
    ),
    'Album #3' => array(
        'image 13' => array('Image 13 description', 'pic13.jpg'),
        'image 14' => array('Image 14 description', 'pic14.jpg'),
        'image 15' => array('Image 15 description', 'pic15.jpg'),
        'image 16' => array('Image 16 description', 'pic16.jpg'),
        'image 17' => array('Image 17 description', 'pic17.jpg'),
        'image 18' => array('Image 18 description', 'pic18.jpg')
    )
);

$sGalleryObjects = '';
$sFolder = 'data_images/';
foreach ($aUnits as $sAlbumTitle => $aAlbums) {
    $sGalleryObjects .= '<div id="'.$sAlbumTitle.'" class="galleryElement"><h2>'.$sAlbumTitle.'</h2>';
    foreach ($aAlbums as $sTitle => $aUnitInfo) {
        list($sDescription, $sFileName) = $aUnitInfo;
        $sFilePath = $sFolder . $sFileName;
        $sGalleryObjects .= strtr($sTemplate, array('{fileurl}' => $sFilePath, '{title}' => $sTitle, '{description}' => $sDescription));
    }
    $sGalleryObjects .= '</div>';
}

echo <<<EOF
<link rel="stylesheet" href="css/main.css" type="text/css" />
<link rel="stylesheet" href="css/jd.gallery.css" type="text/css" />
<script src="js/mootools-1.2.1-core-yc.js" type="text/javascript"></script>
<script src="js/mootools-1.2-more.js" type="text/javascript"></script>
<script src="js/jd.gallery.js" type="text/javascript"></script>
<script src="js/jd.gallery.set.js" type="text/javascript"></script>

<div class="example">
    <h3><a href="#">SmoothGallery examples. First - single gallery, second - multiple galleries</a></h3>
    <div>
        <div id="multiple_galleries">
            {$sGalleryObjects}
        </div>

        <script type="text/javascript">
            function startGallery() {
                var myGal2 = new gallerySet($('multiple_galleries'), {
                    timed: true,
                    delay: 5000,
                    embedLinks: false
                });
            }
            window.addEvent('domready',startGallery);
        </script>
    </div>
</div>
EOF;

?>

As you can see, our main array now contain 1 more level, and now we can see here and albums and its photos. Plus, I changed parser a little too. Also, pay attention to javascript initialization – it changed a little too. But, commonly all still same, just few another custom params like:

  • galleryTitleSelector – selector for gallery title, default value ‘h2′
  • textGallerySelector – main title at list of albums, default value ‘Galleries’
  • textShowCarousel – title in carousel, default value ‘{0}/{1} Pictures’

Step 2. CSS

Here are used CSS files for our demo:

css/main.css

body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0}
.example{background:#FFF;width:800px;font-size:80%;border:1px #000 solid;margin:20px auto;padding:15px;-moz-border-radius: 3px;-webkit-border-radius: 3px}

.example #single_gallery, .example #multiple_galleries {
border: 1px solid #000000; 
-moz-border-radius: 6px;-webkit-border-radius: 6px;
height: 500px;
width: 100%;
overflow:hidden;
}

/*small fixes for gallery itself using css3*/
.jdGallery .carousel .carouselInner .thumbnail, .jdExtCarousel .carouselInner .thumbnail {
background-size:100px 75px !important;
}
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton div.preview {
background-size:40px 40px !important;
}

As you can see – I made 2 small fixes for styles of this gallery – it will allow us don`t use small images for thumbs in carousel and for list of albums

css/jd.gallery.css

This file belong to our plugin and already available in package

Step 3. JS

All JS files (of this plugin) located in ‘js’ folder:

js/jd.gallery.js, js/jd.gallery.set.js, js/mootools-1.2-more.js and js/mootools-1.2.1-core-yc.js

All these files available in download package.

Step 4. Images

All our images located in ‘data_images’ folder. Of course, you can use another folder path and name. Just don`t forget to correct php files in this case too.


Live Demo
Live Demo 2
download in package

Conclusion

Today I told you how you can create photo albums for your websites. Sure that it was interesting. Good luck!

SIMILAR ARTICLES

Practice with Text Shadows

0 302
Responsive HTML Email Template

0 513

2 COMMENTS

    • Hi Carla,
      Basically yes, we can hardcode all required images in result HTML, or we can build this list with PHP. If need – we always can enum all images of some defined folder (without that extra array $aUnit)

Leave a Reply