Advanced search  

News:

cpg1.5.48 Security release - upgrade mandatory!
The Coppermine development team is releasing a security update for Coppermine in order to counter a recently discovered vulnerability. It is important that all users who run version cpg1.5.46 or older update to this latest version as soon as possible.
[more]

Pages: [1]   Go Down

Author Topic: CpmFetch + Lightbox and Highslide Integration  (Read 21189 times)

0 Members and 1 Guest are viewing this topic.

fangweile

  • Coppermine frequent poster
  • ***
  • Country: 00
  • Offline Offline
  • Posts: 103
  • Saranghaeyo ^_^
    • All Koreans - Home of Korean Actors and Actresses
CpmFetch + Lightbox and Highslide Integration
« on: June 30, 2008, 04:21:55 am »

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.  :D 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]
//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]
//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
« Last Edit: June 30, 2008, 07:56:25 am by Joachim Müller »
Logged
[My Coppermine Galleries]
All Koreans, Lim Eun-kyeong's IFC
Saranghae 김태희

enygma

  • Coppermine newbie
  • Offline Offline
  • Posts: 1
Re: CpmFetch + Lightbox and Highslide Integration
« Reply #1 on: August 21, 2008, 06:52:15 pm »

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

jacek z
Logged

andyleery

  • Coppermine regular visitor
  • **
  • Offline Offline
  • Posts: 78
Re: CpmFetch + Lightbox and Highslide Integration
« Reply #2 on: August 25, 2008, 11:32:04 pm »

LOL good question. I was searching for hours  :P
Logged

fangweile

  • Coppermine frequent poster
  • ***
  • Country: 00
  • Offline Offline
  • Posts: 103
  • Saranghaeyo ^_^
    • All Koreans - Home of Korean Actors and Actresses
Re: CpmFetch + Lightbox and Highslide Integration
« Reply #3 on: August 27, 2008, 11:16:57 am »

You must put the above code in your php page where you want it to display.
Logged
[My Coppermine Galleries]
All Koreans, Lim Eun-kyeong's IFC
Saranghae 김태희

PeterLawrence

  • Contributor
  • Coppermine novice
  • ***
  • Offline Offline
  • Posts: 22
    • Civil Service Canoe Club
Re: CpmFetch + Lightbox and Highslide Integration
« Reply #4 on: November 19, 2008, 06:22:44 pm »

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

Izzie Stevens

  • Coppermine frequent poster
  • ***
  • Offline Offline
  • Gender: Female
  • Posts: 196
  • www.seriouslygreylovers.com
    • Seriously Grey Lovers
Re: CpmFetch + Lightbox and Highslide Integration
« Reply #5 on: March 07, 2009, 08:25:48 pm »

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

Izzie Stevens

  • Coppermine frequent poster
  • ***
  • Offline Offline
  • Gender: Female
  • Posts: 196
  • www.seriouslygreylovers.com
    • Seriously Grey Lovers
Re: CpmFetch + Lightbox and Highslide Integration
« Reply #6 on: March 07, 2009, 08:28:02 pm »

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.
Logged

PeterLawrence

  • Contributor
  • Coppermine novice
  • ***
  • Offline Offline
  • Posts: 22
    • Civil Service Canoe Club
Re: CpmFetch + Lightbox and Highslide Integration
« Reply #7 on: March 08, 2009, 09:46:34 pm »

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.
Logged
Pages: [1]   Go Up
 

Page created in 0.026 seconds with 20 queries.