October 2011 Archives
Step by Step tutorial to integrate Lightbox features in PixelPost.
Original code:
Code after change:
Step 10: Navigate to the template folder that is used for PixelPost. In this tutorial "horizon" template is used, path "/public_html/photos/templates/horizon".
Step 11: Open browse_template.html in your favorite text editor and add the following reference links in the head of the HTMLdocument, between the <HEAD> and </HEAD> tags.
Step 12: you are done with the changes. Now launch the Photoblog and see the results.
Thanks to PixelPost and Lightbox for the easy web application.
See in Action - customized PixelPost with Lightbox.
Pixelpost is an open-source, standards-compliant, multi-lingual, fully extensible photoblog application for the web. Anyone who has web-space that meets the requirements can download and use Pixelpost for free!
Lightbox is a simple, unobtrusive script used to overlay images on the current page. It's a snap to setup and works on all modern browsers.
- Step 1: Download PixelPost and install as per the instructions on your web-space. In this tutorial it is assumed that folder "photoblog" is the PixelPost install folder (root directory).
- Step 2: Download Lightbox and unzip the contents to your local system.
- Step 3: Login to your web space and navigate to PixelPost install/root folder "/www/photoblog or /public_html/photoblog".
- Step 4: create folders 'js' and 'css' on root. "/public_html/photoblog/js" and "/public_html/photoblog/css".
- Step 5: Upload Lightbox's 'js' folder contents to "/public_html/photoblog/js".
- Step 6: Upload Lightbox's 'CSS' folder contents to "/public_html/photoblog/CSS".
- Step 7: Upload Lightbox's 'images' folder contents to "/public_html/photoblog/images". (Lightbox's images folder contains some sample images, which can be excluded).
- Step 8: Navigate to PixelPost includes folder "/public_html/photoblog/includes" and back-up functions_browse.php file (create a copy - functions_browse_ORG.php), in case you mess-up with the code you can replace the original.
- Step 9: Open functions_browse.php in your favorite text editor. Look for variable "$thumb_output" in while loop and replay with the following code.
$fullImage = split('thumb_',$thumbnail);
$imagePath = $fullImage[1];
$thumb_output .= "<a href=\"images/$imagePath\" rel=\"lightbox[roadtrip]\" title=\"<a href="$showprefix$id">Comments</a>\"><img src=\"$thumbnail\" alt=\"$title\" title=\"$title\" width=\"$local_width\" height=\"$local_height\" class=\"thumbnails\" /></a>";
Original code:
while(list($count,$id,$title,$name,$datetime) = mysql_fetch_row($query))
{
if( $count != $lookingfor) continue; // Major hack for the browse filters.
$title = pullout($title);
$title = htmlspecialchars($title,ENT_QUOTES);
$thumbnail = ltrim($cfgrow['thumbnailpath'], "./")."thumb_".$name;
$thumbnail_extra = getimagesize($thumbnail);
$local_width = $thumbnail_extra['0'];
$local_height = $thumbnail_extra['1'];
$thumb_output .= "<a href=\"$showprefix$id\"><img src=\"$thumbnail\" alt=\"$title\" title=\"$title\" width=\"$local_width\" height=\"$local_height\" class=\"thumbnails\" /></a>";
}
Code after change:
while(list($count,$id,$title,$name,$datetime) = mysql_fetch_row($query))
{
if( $count != $lookingfor) continue; // Major hack for the browse filters.
$title = pullout($title);
$title = htmlspecialchars($title,ENT_QUOTES);
$thumbnail = ltrim($cfgrow['thumbnailpath'], "./")."thumb_".$name;
$thumbnail_extra = getimagesize($thumbnail);
$local_width = $thumbnail_extra['0'];
$local_height = $thumbnail_extra['1'];
$fullImage = split('thumb_',$thumbnail);
$imagePath = $fullImage[1];
$thumb_output .= "<a href=\"images/$imagePath\" rel=\"lightbox[roadtrip]\" title=\"<a href="$showprefix$id">Comments</a>\"><img src=\"$thumbnail\" alt=\"$title\" title=\"$title\" width=\"$local_width\" height=\"$local_height\" class=\"thumbnails\" /></a>";
}
<!-- CSS for Lightbox --> <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> <!-- JavaScript for Lightbox --> <script src="js/prototype.js" type="text/javascript"></script> <script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script> <script src="js/lightbox.js" type="text/javascript"></script>
See in Action - customized PixelPost with Lightbox.