Please login or register.

Login with username, password and session length
Advanced search  

Author Topic: Lightweight gallery embeds nicely in sNews articles / pages.  (Read 2130 times)

pearjam

  • Full Member
  • ***
  • Karma: 14
  • Posts: 152
Lightweight gallery embeds nicely in sNews articles / pages.
« on: August 30, 2010, 03:24:16 PM »

Here's a gallery script that works well embedded in sNews articles / pages, thanks to some help from Keyrocks. :)

This code creates thumbnails from all images in the directory you place it in, and outputs the thumbnails and a starter image (usually the first thumbnail). Thumbnails are also links to change the image in the starter image position.

Use CSS to customize and position the thumbnails and starter image.

A working example is here (choose an article):
http://fearelise.com/tag/photos/

For now, the script only supports .jpg images.

---
Adding to an sNews article / page:

1. Paste the gallery code in a file and save it as a .php page. As an example, we'll use "gallery.php".

2. In gallery.php, change the paths (indicated by comments) to point to where you'll put the file. Change the starter image at the bottom of the script (src="photoalbums/my-wonderful-vacation/1.jpg") to be an image you would like displayed when a visitor first opens the page.

3. Upload to that directory (with the images) on your server.

4. Visit gallery.php in a browser (domain.com/imagedirectory/gallery.php). This action will create the thumbnails for the images in the directory. Thumbs will start with 'th_'.

5. Insert the include in the sNews article / page using the full path to the file (you'll change the path below):
[include]/var/www/html/photoalbums/my-wonderful-vacation/gallery.php[/include]

That's it, your done! Theres a chance you might have to change permissions (755) and / or ownership (apache:apache).

---
Style:
1. The divs in the script are:
Code: [Select]
<div class="galthumbs">
<div class="galmain">

2. A working example of the styling would be:
Code: [Select]
.galthumbs {margin:20px 44px;text-align:center}
.galthumbs li {display:inline}
.galthumbs a {opacity:.8}
.galthumbs a:hover {opacity:1}
.galthumbs a img {margin:5px;border:3px double #aaa}
.galmain {text-align:center}
.galmain img {border:3px double #aaa}

---
Here is the actual code - enjoy!
Code: [Select]
<?php
$columns 
5;
$thmb_width 120;
$thmb_height 80;
function 
resizeImage($originalImage,$toWidth,$toHeight){
list(
$width$height) = getimagesize($originalImage);
$xscale=$width/$toWidth;
$yscale=$height/$toHeight;
if (
$yscale>$xscale){
$new_width round($width * (1/$yscale));
$new_height round($height * (1/$yscale));
} else {
$new_width round($width * (1/$xscale));
$new_height round($height * (1/$xscale)); }
$imageResized imagecreatetruecolor($new_width$new_height);
$imageTmp imagecreatefromjpeg ($originalImage);
imagecopyresampled($imageResized$imageTmp0000,
$new_width$new_height$width$height);
return 
$imageResized; }
function 
generateThumbnails(){
global 
$thmb_width,$thmb_height;

if (
$handle opendir("/var/www/html/photoalbums/my-wonderful-vacation/")) {   //CHANGE THIS TO BE THE FULL TO WHERE GALLERY.PHP IS
while ($file readdir($handle))  {
if (
is_file($file)){
if (
strpos($file,'_th.jpg')){
$isThumb true;
} else {
$isThumb false; }
if (!
$isThumb) {
$dirName  substr($file,0,strpos($file,basename($file)));
if (
strlen($dirName) < 1$dirName '.';
$fileName basename($file);
$fileMain substr($fileName,0,strrpos($fileName,'.'));
$extName  substr($fileName,strrpos($fileName,'.'),
strlen($fileName)-strrpos($fileName,'.'));
if ((
$extName == '.jpg') || ($extName == '.jpeg')){
$thmbFile $dirName.'/'.$fileMain.'_th.jpg';
if (!
file_exists($thmbFile)){
imagejpeg(resizeImage($file,$thmb_width,$thmb_height),$thmbFile,80); }}}}}}}
function 
getNormalImage($file){
$base substr($file,0,strrpos($file,'_th.jpg'));
if (
file_exists($base.'.jpg')) return $base.'.jpg';
elseif (
file_exists($base.'.jpeg')) return $base.'.jpeg';
else return 
""; }

/* function displayPhotos by Keyrocks */
function displayPhotos(){
global 
$columns;
generateThumbnails();
$act 0;

$img_dir 'photoalbums/my-wonderful-vacation/';  //CHANGE THIS TO THE SHORT PATH OF WHERE GALLERY.PHP IS
$images = array();
if (
$handle opendir($img_dir)) {
while (
$file readdir($handle)) {
if (
strpos($file,'_th.jpg')) {
++
$act;
if (
$act $columns) {
$images[] = $file; }}}}
if(
is_array($images)){
sort($images);
foreach(
$images as $image){
echo 
'<li><a onclick="return showPic(this)" href="'.getNormalImage($img_dir.$image).'"><img src="'.$img_dir.$image.'" alt="'.$image.'"/></a></li>';
}}}
?>

<script type="text/javascript" language="javascript">
function showPic (whichpic) {
if (document.getElementById) {
document.getElementById('placeholder').src = whichpic.href;
if (whichpic.title) {
document.getElementById('desc').childNodes[0].nodeValue = whichpic.title;
} else {
document.getElementById('desc').childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue; }
return false;
} else {
return true; }}
</script>

<div class="galthumbs"><ul>
<?php displayPhotos(); ?>
</ul></div>

<div class="galmain"><img id="placeholder" src="photoalbums/my-wonderful-vacation/1.jpg" alt="" /></div>
<p id="desc"> </p>


Edited to change starter image path (src="photoalbums/my-wonderful-vacation/1.jpg")

;D
« Last Edit: January 31, 2011, 03:20:20 PM by pearjam »
Logged
....I must go, for I am their leader - and they have gone.

Sven

  • ULTIMATE member
  • ******
  • Karma: 88
  • Posts: 2029
  • Chasing MY bugs!
    • hiseo.fr - rédacteur Web
Re: Lightweight gallery embeds nicely in sNews articles / pages.
« Reply #1 on: August 30, 2010, 06:09:35 PM »

pearjam, you deserve a karma for this  8) (Keyrocks as well, but he got a lot  ;D)

pearjam

  • Full Member
  • ***
  • Karma: 14
  • Posts: 152
Re: Lightweight gallery embeds nicely in sNews articles / pages.
« Reply #2 on: August 30, 2010, 07:33:39 PM »

Thank you Sven, very much!   :D

The hope is that it's useful - but it feels good to finally contribute or be able to give back in some way!!   ;D


Logged
....I must go, for I am their leader - and they have gone.

Keyrocks

  • Doug
  • ULTIMATE member
  • ******
  • Karma: 449
  • Posts: 6019
  • Semantically Challenged
    • snews.ca
Re: Lightweight gallery embeds nicely in sNews articles / pages.
« Reply #3 on: August 31, 2010, 02:27:05 PM »

pearjam, you deserve a karma for this  8) (Keyrocks as well, but he got a lot  ;D)

 :'(
Logged
Do it now... later may not come.
-------------------------------------------------------------------------------------------------
sNews 1.6 MESU | sNews 1.6 MEMU

Sven

  • ULTIMATE member
  • ******
  • Karma: 88
  • Posts: 2029
  • Chasing MY bugs!
    • hiseo.fr - rédacteur Web
Re: Lightweight gallery embeds nicely in sNews articles / pages.
« Reply #4 on: August 31, 2010, 03:13:45 PM »

 Karma!
:-*

pearjam

  • Full Member
  • ***
  • Karma: 14
  • Posts: 152
Re: Lightweight gallery embeds nicely in sNews articles / pages.
« Reply #5 on: August 31, 2010, 05:29:42 PM »

lol  :)
Logged
....I must go, for I am their leader - and they have gone.

Keyrocks

  • Doug
  • ULTIMATE member
  • ******
  • Karma: 449
  • Posts: 6019
  • Semantically Challenged
    • snews.ca
Logged
Do it now... later may not come.
-------------------------------------------------------------------------------------------------
sNews 1.6 MESU | sNews 1.6 MEMU