After researching and thinking about writing one of my own I found Fotorama which is a jQuery based slideshow framework that allows for many different types of slideshows with a ton of options. Take a look at the website and the examples, they are amazing.
So I broke the process down into a handful of steps and iterated up to the dynamic slideshow that it is now.
The first step was getting a version running on a test page with static content hard-coded into the page. There was a bit of tweaking here and there along with coming up with the idea to have a design that resembles a new window "Window" with Hide and Fullscreen buttons.
The next step was figuring out how to dynamically get the picture URLs and Captions directly from SmugMug so that anytime I update SmugMug the slidesow on my website would also be updated. For that I chose to use phpSmug which is a wrapper class for the SmugMug API written and maintained by Colin Seymour.
I ran into 2 issues with implementing phpSmug, the biggest of which was that it would randomly error out with a "CURL Error 7" which was causing my website to load very slowly and breaking the slideshow. I have addressed this issue by using the caching built into phpSmug combined with writing the parsed data necessary for the slideshow into a MySQL table. Anytime the SmugMug API is not available and the phpSmug cache has expired the data for the slideshow will be pulled from the database.
Here is the code:
<?php
$user="username";
$password="password";
$database="database_name";
$tablename="table_name";
mysql_connect(localhost,$user,$password);
@mysql_select_db($database) or die( "Unable to select database");
/* Last updated with phpSmug 3.0 */
require_once( "/path/to/phpSmug.php" );
try {
$code = "SmugMug API";
// My API Key and App Name from SmugMug Admin Panel
$f = new phpSmug( "APIKey=api_key", "AppName=app_name_and_version" );
// Enable disk based caching with expires in 1 hour
$f->enableCache("type=fs", "cache_dir=/path/to/phpsmugcache", "cache_expire=3600" );
// Set timeout
$f->req->setConfig(array( 'timeout' => 2));
// Login Anonymously
$f->login();
// Get images from Portfolio
$images = $f->images_get( "AlbumID=album_id", "AlbumKey=album_key", "Heavy=1" );
$images = ( $f->APIVer == "1.2.2" ) ? $images['Images'] : $images;
$i = 0;
foreach ( $images as $image ) {
if ($i != 0) {
$query .= ",\n";
$output .= ",\n";
}
$i++;
// Create SQL String
$query .= "('','".$image['X2LargeURL']."','".$image['TinyURL']."','".htmlentities($image['Caption'],ENT_QUOTES)."')";
$output .= "{img: \"".$image['X2LargeURL']."\", thumb: \"".$image['TinyURL']."\", caption: \"".htmlentities($image['Caption'])."\"}";
}
// Empty Out Table
mysql_query('TRUNCATE TABLE '.$tablename) or die(mysql_error());
// Populate Table
mysql_query("INSERT INTO cache (`id`, `x2largeurl`, `tinyurl`, `caption`) VALUES ".$query);
} catch ( Exception $e ) {
$code = "{$e->getMessage()} (Error Code: {$e->getCode()})";
//Read from Database
$query="SELECT * FROM ".$tablename;
$result=mysql_query($query);
$num=mysql_numrows($result);
$i=0;
while ($i < $num) {
$X2LargeURL=mysql_result($result,$i,"x2largeurl");
$TinyURL=mysql_result($result,$i,"tinyurl");
$Caption=mysql_result($result,$i,"caption");
if ($i != 0) {
$output .= ",\n";
}
$i++;
// Create SQL String
$output .= "{img: \"".$X2LargeURL."\", thumb: \"".$TinyURL."\", caption: \"".$Caption."\"}";
}
}
mysql_close();
?>
jQuery(document).ready(function(){
try { console.log('code: <?php echo $code ?>'); } catch(err) { }
// Load Fotorama.js script
jQuery.getScript("/scripts/fotorama.js", function(){
var portfolioBuildFlag = false;
jQuery('#main').prepend('<article class="fotoramaWrapper"><div class="portfolioHeader gradient">Dave Nelson's Portfolio <div><span id="portfolioHide">[ Hide ]</span> <span id="portfolioFullScreen">[ Fullscreen ]</span></div></div><div id="myPortfolio"></div></article>');
jQuery('#portfolioHide').on('click',portfolioToggle);
jQuery('#portfolioFullScreen').on('click',function() {
if(jQuery("#myPortfolio").is(":hidden") || portfolioBuildFlag === false) {
portfolioShow();
}
jQuery('#myPortfolio').trigger('fullscreenopen');
});
function portfolioBuild() {
jQuery('#myPortfolio').fotorama({
data: [
<?php
echo $output."\n";
?>
],
width: '100%',
height: 'auto',
aspectRatio: 1.5,
minHeight: 500,
fitToWindowHeight: false,
margin: 0,
shadows: false,
cropToFit: false,
caption: 'overlay',
autoplay: 3000,
thumbBorderColor: '#FCB03E',
fullscreenIcon: true
});
portfolioBuildFlag = true;
}
function portfolioCookie(state) {
if (state === "hidden") {
document.cookie = "portfolioHide=true";
} else {
document.cookie = "portfolioHide=false";
}
}
function portfolioToggle() {
if(jQuery("#myPortfolio").is(":hidden") || portfolioBuildFlag === false) {
portfolioShow();
} else {
portfolioHide();
}
}
function portfolioShow() {
if (portfolioBuildFlag === false) {
portfolioBuild();
}
jQuery('#myPortfolio').slideDown('fast');
jQuery('#portfolioHide').text('[ Hide ]');
jQuery('#myPortfolio').trigger('play')
portfolioCookie('shown');
}
function portfolioHide() {
jQuery('#myPortfolio').slideUp('fast');
jQuery('#portfolioHide').text('[ Show ]');
jQuery('#myPortfolio').trigger('pause')
portfolioCookie('hidden');
}
function portfolioInit() {
var portfolioHide = document.cookie.replace(/(?:(?:^|.*;\s*)portfolioHide\s*\=\s*((?:[^;](?!;))*[^;]?).*)|.*/, "$1");
if (portfolioHide != "true") {
portfolioBuild();
} else {
jQuery('#portfolioHide').text('[ Show ]');
}
}
portfolioInit();
}); // Load Fotorama.js script
}); // document ready
Be First to Comment