CpmFetch + Lightbox and Highslide Integration

[fangweile]

Hello there,

After my trials and errors, searching  this forum and spending sometime reading thoroughly this manual
http://cpmfetch.fistfullofcode.com/docs/stable_advanced/index.html
I finally made it.  I finally made an integration with cpmfetch using lightbox and highslide.
I am not that adept in php coding and I simply know some html basic so I didn't expect that I will made. And   i am

I know that many of us will like it
So here is the code to share:

CpmFetch and Lightbox Integration
First you must installed the lightbox js found here
http://www.lokeshdhakar.com/projects/lightbox2/

In my site I have used the SMF Integrate LIghbox mod for it to get work.
http://www.simplemachines.org/community/index.php?topic=233637.0

This is my actual code used:

Code Select Expand


//Start of cpmfetch and lighbox integration by fangweile
echo "<CENTER>";
include "./gallery/cpmfetch/cpmfetch.php";
$objCpm = new cpm("./gallery/cpmfetch/cpmfetch_config.php");
$option = array(
'linktemplate'=>'http://www.allkoreans.net/gallery/albums/{{pFilepath}}{{pFilename}}" title="{{pTitle}} <br> Viewed: {{pHits}} times | Filename: {{pFilename}} | Size: {{pFilesize}} bytes | Dimension: {{pWidth}} x {{pHeight}} <br><a href=http://www.allkoreans.net/gallery/displayimage.php?album={{pAid}}&pos=-%i>| View Photo |</a>',
'linkstyle' =>'image" rel="lightbox[smf]',
'alttag' => 'Click to enlarge',
'tablestyle' => 'windowbg" width="150" bordercolor="#0099ff" border="5" height="150"',
'cellstyle' => 'windowbg windowbg_hover" valign="middle" align="center');
$objCpm->cpm_viewLastAddedMedia(6,6,$option);
$objCpm->cpm_close();
echo '<a href="http://www.allkoreans.net/gallery">| View Gallery |</a>';
echo '</center>';
//End of cpmfetch and lighbox integration by fangweile


CpmFetch and Lightbox Integration Demonstration
See it in action:
Demo




Alright let move further:
Here it is:

CpmFetch and Highslide Integration
First, you must have the highslide plugin intalled in your coppermine:
http://forum.coppermine-gallery.net/index.php/topic,36558.0.html
then used this code:

Code Select Expand

//Start of cpmfetch and highslide integration by fangweile
echo "<CENTER>";
  include "./gallery/cpmfetch/cpmfetch.php";
  $objCpm = new cpm("./gallery/cpmfetch/cpmfetch_config.php");
$option = array(
'linktemplate'=>'http://www.allkoreans.net/gallery/albums/{{pFilepath}}{{pFilename}}" id="{{pFilename}}',
'linkstyle' =>'highslide" onclick="return hs.expand(this)',
'alttag' => 'Click to enlarge',
'tablestyle' => 'windowbg" width="150" bordercolor="#0099ff" border="5" height="150"',
'cellstyle' => 'windowbg windowbg_hover" valign="middle" align="center',
'subtitle' => '<div class="highslide-caption" id="caption-for-{{pFilename}}"> <center><b> {{pTitle}} <br><a href="http://www.allkoreans.net/gallery/thumbnails.php?album={{pAid}}">| View Album |</a>   <a href=http://www.allkoreans.net/gallery/displayimage.php?album={{pAid}}&pos=-%i>| View Photo |</a></b><br><i>Viewed: {{pHits}} times, Filename: {{pFilename}}, Size: {{pFilesize}} bytes Dimension: {{pWidth}} x {{pHeight}}<br><i>Uploaded by: <a href="http://www.allkoreans.net/gallery/profile.php?uid={{pOwnerId}}">{{pOwner_name}}</i></a> <i></center> </div>');
$objCpm->cpm_viewLastAddedMedia(6,6,$option);
echo '<a href="http://www.allkoreans.net/gallery">| View Gallery |</a>';
?>
<link rel="stylesheet" href="http://www.allkoreans.net/gallery/plugins/highslide/include/highslide.css" type="text/css" />
<script type="text/javascript" src="http://www.allkoreans.net/gallery/plugins/highslide/highslide.js"></script>
<style type="text/css">
  .highslide-image {border: 10px solid #FFFFFF;
  cursor: url('http://www.allkoreans.net/gallery/plugins/highslide/graphics/zoomout.cur'), pointer; }
  .highslide { cursor: url('http://www.allkoreans.net/gallery/plugins/highslide/graphics/zoomin.cur'), pointer; }
  .highslide_dtails { color: #CCBBBB; }
  .highslide_dtails_over { color:#FFEEEE; }
  .highslide-caption { border: 10px solid #FFFFFF;
  background-color: #FFFFFF; }
  .highslide-loading { background-image: url('http://www.allkoreans.net/gallery/plugins/highslide/graphics/loader.gif'); }
  .hscontrolbar { background: url('http://www.allkoreans.net/gallery/plugins/highslide/graphics/controlbar5.gif'); width: 167px; height: 34px; margin-top: 25px; margin-right: 25px; }
  .hscontrolbar a:hover { background-image: url('http://www.allkoreans.net/gallery/plugins/highslide/graphics/controlbar5-hover.gif'); }
  </style> <script type="text/javascript">   
hs.graphicsDir = 'http://www.allkoreans.net/gallery/plugins/highslide/graphics/';
hs.loadingText = 'Loading...';
hs.loadingTitle = 'Click to cancel';
hs.restoreTitle = 'Click to restore thumbnail';
hs.expandSteps = 10;
hs.expandDuration = 250;
hs.restoreSteps = 8;
  hs.restoreDuration = 180;
  hs.captionSlideSpeed = 1;
  hs.allowMultipleInstances = 1;
hs.fullExpandTitle = 'Click for original size';
// remove the registerOverlay call to disable the controlbar
hs.registerOverlay(
  {
    thumbnailId: null,
    overlayId: 'hscontrolbar',
    position: 'top right',
    hideOnMouseOut: true
}
);
hs.outlineType = 'rounded-white';
</script>
<div id="hscontrolbar" class="highslide-overlay hscontrolbar">
<a href="#" class="previous" onclick="return hs.previous(this)" title="Previous (left arrow key)"></a>
<a href="#" class="next" onclick="return hs.next(this)" title="Next (right arrow key)"></a>
  <a href="#" class="highslide-move" onclick="return false" title="Click and drag to move"></a>
  <a href="#" class="close" onclick="return hs.close(this)" title="Close"></a>
  </div>
<?php
$objCpm->cpm_close();
?>     
//End of cpmfetch and highslide integration by fangweile     



CpmFetch and Highslide Integration Demonstration
See it in action:
Demo



Read:
You must made an edit and change in the above codes on your own.
You can also customized the way the caption and image displayed. It is recommended for you to fully read the manual in cpmfetch website to be able to understand the tags that I used and you may use. It is really higly customizable. No need to edit any coppermine files.

------------
I am not that expert in php coding so I can't assure to provide a definite support however I will do my best to help for further inquiry and assistance.

I am not yet finish with the code and I still seeking to simplify and improve it.
Any suggestion will be appreciated. ^_^
Enjoy

[enygma]

hi,
it is verrrry nice you made some development but wher to put code you made?
regards

jacek z

[andyleery]

LOL good question. I was searching for hours 

[fangweile]

You must put the above code in your php page where you want it to display.

[PeterLawrence]

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.

Code Select Expand


<?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

[Izzie Stevens]

sorry i don't understand where I have to copy (and modify) the code. In thse webpage where I want to see the pictures?

[Izzie Stevens]

Do I have to install CpmFetch and how I can do that?
Because I've already installed Highslide (and it doesn't work, but I've already asked in the right topic) and I don't know how to install CpmFetch and where to put the code you wrote.

Thanks.

[PeterLawrence]

Yes you do need to install cpmfetch, see the cpmfetch FAQ for details http://forum.coppermine-gallery.net/index.php/topic,35450.0.html. The script can be placed anywhere you want you just need to ensure the the folder paths in the above php code point to the correct locations to where you have installed highslide and cpmfetch.