fangweile thanks for the code.
As a way of thanks here is my code which uses the highslide gallery Java script to display images from coppermine using cpmfetch.
<?php
//
// Gallery Coppermine script (Slideshow Option)
// by P.J.Lawrence (November 2008)
// Based on code by fangweile
// Using...
// Highlight Gallery Script (http://highslide.com)
// CpmFetch http://cpmfetch.fistfullofcode.com/
//
// Notes..
// Ensure that the variable graphicsDir in highslide-with-gallery.js points to the correct directory
//
$CoppermineWebPath = '/cpg1418/'; // Web path to Coppermine Gallery
$HighSlideWebPath = '/'; // Web path to Highslide java code
$cpmfetchPath = '../cpg1418/cpmfetch/'; // Path to CPMFetch
if (!empty($_GET['rows'])) {
$Rows=(int) $_GET['rows'];
}
else {
$Rows=4;
}
if (!empty($_GET['cols'])) {
$Cols=(int) $_GET['cols'];
}
else {
$Cols = 4;
}
if (!empty($_GET['album'])) {
$Album=(int) $_GET['album'];
}
include $cpmfetchPath."cpmfetch.php";
// 1 ) Reference to the file containing the javascript.
// This file must be located on your server.
echo '<script type="text/javascript" src="',$HighSlideWebPath,'highslide/highslide-with-gallery.js"></script>';
// 2) Optionally override the settings defined at the top
// of the highslide.js file. The parameter hs.graphicsDir is important!
echo "<script type=\"text/javascript\">
hs.graphicsDir = '",$HighSlideWebPath,"highslide/graphics/';
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.outlineType = 'rounded-white';
hs.fadeInOut = true;
hs.numberPosition = 'caption';
hs.dimmingOpacity = 0.75;
// Add the controlbar
if (hs.addSlideshow) hs.addSlideshow({
//slideshowGroup: 'group1',
interval: 5000,
repeat: false,
useControls: true,
fixedControls: 'fit',
overlayOptions: {
opacity: .75,
position: 'bottom center',
hideOnMouseOut: true
}
});
</script>";
// 3) These CSS-styles are necessary for the script to work. You may also put
// them in an external CSS-file. See the webpage for documentation.
echo "<style type=\"text/css\">
.highslide-container div {
font-family: Verdana, Helvetica;
font-size: 10pt;
}
.highslide {
cursor: url(",$HighSlideWebPath,"highslide/graphics/zoomin.cur), pointer;
outline: none;
text-decoration: none;
}
.highslide img {
border: 2px solid silver;
}
.highslide:hover img {
border-color: gray;
}
.highslide-active-anchor img, .highslide-active-anchor:hover img {
border-color: black;
}
.highslide-image {
border-width: 2px;
border-style: solid;
border-color: white;
background: gray;
}
.highslide-wrapper, .rounded-white {
background: white;
}
.highslide-image-blur {
}
.highslide-number {
font-weight: bold;
color: gray;
}
.highslide-caption {
display: none;
border-top: none;
font-size: 1em;
padding: 5px;
background: white;
}
.highslide-heading {
display: none;
font-weight: bold;
margin-bottom: 0.4em;
}
.highslide-dimming {
position: absolute;
background: black;
}
.highslide-loading {
display: block;
color: black;
font-size: 9px;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
padding: 3px;
border: 1px solid white;
background-color: white;
padding-left: 22px;
background-image: url(",$HighSlideWebPath,"highslide/graphics/loader.white.gif);
background-repeat: no-repeat;
background-position: 3px 1px;
}
a.highslide-credits,
a.highslide-credits i {
padding: 2px;
color: gray;
text-decoration: none;
font-size: 10px;
}
a.highslide-credits:hover,
a.highslide-credits:hover i {
color: white;
background-color: gray;
}
/* Controls. See http://www.google.com/search?q=css+sprites */
.highslide-controls {
width: 195px;
height: 40px;
background: url(",$HighSlideWebPath,"highslide/graphics/controlbar-white.gif) 0 -90px no-repeat;
margin-right: 15px;
margin-bottom: 10px;
margin-top: 20px;
}
.highslide-controls ul {
position: relative;
left: 15px;
height: 40px;
list-style: none;
margin: 0;
padding: 0;
background: url(",$HighSlideWebPath,"highslide/graphics/controlbar-white.gif) right -90px no-repeat;
}
.highslide-controls li {
float: left;
padding: 5px 0;
}
.highslide-controls a {
background-image: url(",$HighSlideWebPath,"highslide/graphics/controlbar-white.gif);
display: block;
float: left;
height: 30px;
width: 30px;
outline: none;
}
.highslide-controls a.disabled {
cursor: default;
}
.highslide-controls a span {
/* hide the text for these graphic buttons */
display: none;
}
.highslide-move a {
cursor: move;
}
.hidden-container {
display: none;
}
/* The CSS sprites for the controlbar */
.highslide-controls .highslide-previous a {
background-position: 0 0;
}
.highslide-controls .highslide-previous a:hover {
background-position: 0 -30px;
}
.highslide-controls .highslide-previous a.disabled {
background-position: 0 -60px !important;
}
.highslide-controls .highslide-play a {
background-position: -30px 0;
}
.highslide-controls .highslide-play a:hover {
background-position: -30px -30px;
}
.highslide-controls .highslide-play a.disabled {
background-position: -30px -60px !important;
}
.highslide-controls .highslide-pause a {
background-position: -60px 0;
}
.highslide-controls .highslide-pause a:hover {
background-position: -60px -30px;
}
.highslide-controls .highslide-next a {
background-position: -90px 0;
}
.highslide-controls .highslide-next a:hover {
background-position: -90px -30px;
}
.highslide-controls .highslide-next a.disabled {
background-position: -90px -60px !important;
}
.highslide-controls .highslide-move a {
background-position: -120px 0;
}
.highslide-controls .highslide-move a:hover {
background-position: -120px -30px;
}
.highslide-controls .highslide-full-expand a {
background-position: -150px 0;
}
.highslide-controls .highslide-full-expand a:hover {
background-position: -150px -30px;
}
.highslide-controls .highslide-full-expand a.disabled {
background-position: -150px -60px !important;
}
.highslide-controls .highslide-close a {
background-position: -180px 0;
}
.highslide-controls .highslide-close a:hover {
background-position: -180px -30px;
}
</style>";
echo '<div id="highslide-container"></div>';
echo '<div align="center">';
echo '<a href="',$CoppermineWebPath,'">| View Gallery |</a>
';
$objCpm = new cpm($cpmfetchPath."cpmfetch_config.php");
$option = array(
'linktemplate'=>$CoppermineWebPath.'albums/{{pFilepath}}{{pFilename}}" id="{{pFilename}}',
'linkstyle' =>'highslide" onclick="return hs.expand(this)',
'alttag' => 'Click to enlarge',
'tablestyle' => 'windowbg" width="150" bordercolor="#5E5E5E" border="5" height="150"',
'cellstyle' => 'windowbg windowbg_hover" valign="middle" align="center',
'subtitle' => '
<div class="highslide-caption" id="caption-for-{{pFilename}}">
<div align="center">
<b> {{pTitle}} <br \>
<a href="'.$CoppermineWebPath.'thumbnails.php?album={{pAid}}">| View Album |</a>
<a href='.$CoppermineWebPath.'displayimage.php?album={{pAid}}&pos=-%i>| View Photo |</a>
</b>
<br \>
<i>Filename: {{pFilename}}, Size: {{pFilesize}} bytes Dimension: {{pWidth}} x {{pHeight}}
<br \>
<i>Uploaded by: <a href="'.$CoppermineWebPath.'profile.php?uid={{pOwnerId}}">{{pOwner_name}}</a></i>
</div>
</div>');
if ($Album) {
$objCpm->cpm_setFilter(array(".jpg",".png",".gif",".bmp",".jpeg"));
$objCpm->cpm_viewLastAddedMediaFromAlbum($Rows,$Cols,$Album,$option);
}
else
{
$objCpm->cpm_setFilter(array(".jpg",".png",".gif",".bmp",".jpeg"));
$objCpm->cpm_viewLastAddedMedia($Rows,$Cols,$option);
}
$objCpm->cpm_close();
echo '
</div>';
?>
This script displays the most recent images from either the gallery or a specific album.
Input parameters are album, rows and cols.
i.e thiscript?album=1&rows=3&cols=3