Please login or register.

Login with username, password and session length
Advanced search  

News:

You need/want an older version of sNews ? Download an older/unsupported version here.

Author Topic: Mosh Easy gallery and Highslide  (Read 3643 times)

poppoll

  • Full Member
  • ***
  • Karma: 47
  • Posts: 199
    • Poppoll's sNews playground
Mosh Easy gallery and Highslide
« on: July 01, 2009, 04:30:55 PM »

In this topc Sven asked to publish the EasyGal by Mosh with Highslide.
Here it is:
1. Download Easy Gallery  at Mosh' site
sNews topic
2. Unpack galleries_root and easyGal.php to your sNews root. We don't need the javascripts and css from the download.
3. Change easyGal.php to this:
Code: [Select]
<?php
 
/**
   * Easy Galleries Script ::
   * @ Moshe Gil Lemberger
   * July 09 2008 ::
   * email: mymgl@yahoo.com
   * website: http://www.cms-zen.com
   *   FIX: code updated 16/07/08
   *   thank you vasile for advise 
   *   http://morisca.net/
   * Modified by Poppoll to have it work with Highslide
   */
   
// TAG TO CALL THE GALLERY

// easyGal function
function easyGal$gsef$groot='' ) {
global $errors;
//////////////////////////////////
# $gsef => name for gallery directory
$galName $gsef.'/';
# $tumbs => name for tumbs directory
$tumbs 'tumbs/';
# $larg => name for pictures source directory
$larg 'larg/';
$galleries_root $groot!='' $groot.'/' "galleries_root/";
$gallery=$galleries_root.$galName;
$tumbdir=$gallery.$tumbs;
$largdir=$gallery.$larg;

  
if (is_dir($tumbdir)) {
   $fd opendir($tumbdir);  
  
$images = array(); 
      
while (($part = @readdir($fd)) == true) {  
      clearstatcache();
          if ( eregi("(gif|jpg|png|jpeg)$",$part) ) {
    
          $images[] = $part

}
$so=sizeof($images);
for ($x=0$x<$so$x++) {
$imgName=$images[$x];
$tumbsrc $tumbdir.$imgName;
$imgsrc$largdir.$imgName;
$title=$imgName;
$title=eregi_replace("(-|_)",' ',$title);
list($width,$height)=getimagesize($imgsrc);
echo '<div class="hs">';
echo '<a href="'.$imgsrc.'" title="'.$title.'" class="highslide" onclick="return hs.expand(this)">';
echo '<img src="'.$tumbsrc.'" alt="'.$title.'" />';
echo '</a>';
echo '</div>';
}
} else { 
$errors[] = $tumbdir.' is not a directory'
return false

}
//////
?>

4. Add include('easyGal.php') at the top of index.php.
Mine looks like this:
<?php session_start(); include('snews.php');include('easyGal.php') ?>
5. Download Highslide
6. Unzip highslide to a location on your harddisk, and from that location copy the highslide directory to the root of sNews.
7. Between <head> and </head> add this:
Code: [Select]
<!-- highslide -->
<script type="text/javascript" src="highslide/highslide-with-gallery.packed.js"></script>
<link type="text/css" rel="stylesheet" href="highslide/highslide.css" media="screen" />
<script type="text/javascript">
hs.graphicsDir = 'highslide/graphics/';
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.fadeInOut = true;
hs.dimmingOpacity = 0.8;
hs.outlineType = 'black';
hs.captionEval = 'this.thumb.alt';
hs.marginBottom = 105 // make room for the thumbstrip and the controls
hs.numberPosition = 'caption';

// Add the slideshow providing the controlbar and the thumbstrip
hs.addSlideshow({
//slideshowGroup: 'gr1',
interval: 5000,
repeat: false,
useControls: true,
overlayOptions: {
className: 'text-controls',
position: 'bottom center',
relativeTo: 'viewport',
offsetY: -60

},
thumbstrip: {
position: 'bottom center',
mode: 'horizontal',
relativeTo: 'viewport'
}
});
</script>
8. Add pics to galleries_root\gal1\larg (the picture name whil be displayed in highslide, underscores _ and minuses - are contverted to spaces)
9. Add small pics with the same name to galleries_root\gal1\tumbs
10. To insert a gallery add this code in article or page:
Code: [Select]
<div class="highslide-gallery" style="margin: auto; width: 680px;">[func]easyGal:|:gal1,galleries_root[/func]</div>
<div class="clear">&nbsp;</div>
Change the style part to your needs, or leave it out and do it in your css file.

11. If you want more galleries create a dir under galleries_root p.e. gal2 in this create larg and thumbs.
Add pics to larg and thumbs and call the second gallery like this:
Code: [Select]
<div class="highslide-gallery" style="margin: auto; width: 680px;">[func]easyGal:|:gal2,galleries_root[/func]</div>
<div class="clear">&nbsp;</div>

PP



[edit]Corrected topic link in point 1 -- philmoz [edit]
« Last Edit: July 02, 2009, 01:33:50 PM by philmoz »
Logged

Sven

  • ULTIMATE member
  • ******
  • Karma: 88
  • Posts: 2029
  • Chasing MY bugs!
    • hiseo.fr - rédacteur Web
Re: Mosh Easy gallery and Highslide
« Reply #1 on: July 02, 2009, 09:11:33 AM »

Thank you so much Poppoll... locally it works really really fine.
 8)

I'm gonna use it for my carnet.
If you go there you will see under the title 'Éducation sensuelle" in the right column some nice actresses (in a rotator PHP script).
There I use a small JS script to resize the original image with a fixed width. So I just use only one image.

Do you think it can be easily adapted for your gallery?

Code: [Select]
<body onload="fixImgs('photo_frame', 280)">
Code: [Select]
<script type="text/javascript">
//<![CDATA[
function fixImgs(whichId, maxW) {
var pix=document.getElementById(whichId).getElementsByTagName('img');
  for (i=0; i<pix.length; i++) {
    w=pix[i].width;
    h=pix[i].height;
    if (w > maxW) {
      f=1-((w - maxW) / w);
      pix[i].width=w * f;
      pix[i].height=h * f;
    }
  }
}
//]]>
</script>