I'm trying to use Highslide JS (http://vikjavev.no/highslide/) to show the cpmFetched image in my blog. I added the following window target conditional and nothing happened:
} elseif ($this->optionHash['windowtarget'] == '_blank-highslide') {
$htmlOut .= " href=\"$target\" class=\"highslide\" onclick=\"return hs.expand(this)\"";
}
I then found that when I chose _blank-js or _blank-cfshow, nothing happened either. I added the cpmfetch.js to the blog file.
Here is the cpmfetch code I placed in my blog's (http://takethu.com/blog/) sidebar:
<?php
include "../cpmfetch/cpmfetch.php";
$objCpm = new cpm("/");
$options = array( 'subtitle' => 'Album: %a<br/>
<i>%t</i><br/>
<a href="http://takethu.com/displayimage.php?pos=-%i" target="_blank">Details</a>',
'windowtarget' => "_blank-highslide");
$objCpm->cpm_viewRandomMedia(1,1, $options);
$objCpm->cpm_close();
?>
Nevermind.
Huh, in trying to figure out a different setting, I fixed the above issue. I assigned large to imagelink.
Quote from: TranzNDance on September 17, 2006, 08:00:06 PM
Nevermind.
Huh, in trying to figure out a different setting, I fixed the above issue. I assigned large to imagelink.
Hey TnD,
I did not check but I think that maybe the code for windowtarget does not accept more than the documented options. You can pretty much pass whatever you wanted with linkattributes (?). Like I said, I am not sure - been a long time since I saw that chunk of code.
Later
Oh, cool, the linkstyle option worked. It enabled me to undo the change I made to cpmfetch.php... making it easier to upgrade in the future. :)
Thanks for the tip!
Quote from: TranzNDance on September 18, 2006, 03:55:15 AM
Oh, cool, the linkstyle option worked. It enabled me to undo the change I made to cpmfetch.php... making it easier to upgrade in the future. :)
Thanks for the tip!
Well, I added in a bunch of stuff that lets you change HTML attributes, but they were specifically a one to one thing. Later I added a catchall that you could put anything in... the [cell|link|table|row]attributes setting. You can break things much faster this way.
Take care!
hi
I would love to do exactly what you got done...have cpmfetch and highslide working together...
I wan't the cpmfetch bit undernieth my forum:
http://www.amateurillustrator.com/forums/
I already have cpmfetch here:
http://www.amateurillustrator.com/
but would like people to be able to view random images while using the forum and not having to leave the forum....thought this would be neat.
I couldn't really make sense of exactly what you did to get this working in the end.
Any help would be great
All the best
Nick
I don't know if this will work, but in the cpm fetch code in the $options variable, add these options to the array:
'imagelink' => 'large',
"linkstyle" => 'highslide" onclick="return hs.expand(this)" onmouseover="self.status=\'Click to enlarge thumbnail\'; return true;',
Then you need to follow the instructions from highslide about adding the highslide code. It's a bit trickier since you'll be working with an app's templating system instead of a straight html file.
thanks for getting back
here is my current code:
<script type="text/javascript"
src="my-highslide-dir/highslide.js"></script>
<script type="text/javascript">
hs.graphicsDir = 'highslide/graphics/';
hs.outlineType = 'outer-glow';
// internationalization:
hs.fullExpandTitle = 'Utvid til full storleik';
hs.restoreTitle = 'Klikk for å gjenoppretta småbilete';
hs.focusTitle = 'Klikk for å plassera øvst';
hs.loadingText = 'Lastar...';
</script>
<?php
include "cpmfetch/cpmfetch.php";
$objCpm = new cpm("galleries/");
$options = array( 'subtitle' => 'Album: %a<br/>
<i>%t</i><br/>
<a href="http://amateurillustrator.com.s2734.gridserver.com/galleries/displayimage.php?pos=-%i" target="_blank">Details</a>',
'imagelink' => 'large',
"linkstyle" => 'highslide" onclick="return hs.expand(this)" onmouseover="self.status=\'Click to enlarge thumbnail\'; return true;',
$objCpm->cpm_viewRandomMedia(1,1, $options);
$objCpm->cpm_close();
?>
I have put this as a file called slide.php here:
http://amateurillustrator.com.s2734.gridserver.com/slide.php
I am getting syntax errors at the moment.
It would help me a lot if you post the updated code that you pasted into your blog.
Thankyou for your help
There's no closing parenthesis for the $options array. You need to add:
);
cool, thanks done that..
it work now and goes straight to the large file...it doesn't use highslide yet...I guess I have to install this using the instructions off the hgihslide website...I was hoping that it somehow used the highslide plugin for coppermine but I am guessing this isn't possible.
Thanks for the pointers.
Nick
Quote from: nickfzx on November 28, 2006, 06:31:51 PM
cool, thanks done that..
it work now and goes straight to the large file...it doesn't use highslide yet...I guess I have to install this using the instructions off the hgihslide website...I was hoping that it somehow used the highslide plugin for coppermine but I am guessing this isn't possible.
Thanks for the pointers.
Nick
Whoa.... that is friggin cool! I am going to have to play with that a bit...
Wow though... and it works in firefox / linux at that...
hi Vuud
how do you link through to the intermediate picture
I saw this thread and have spent around an hour trying to do this:
http://forum.coppermine-gallery.net/index.php?topic=12679.msg59885#msg59885
but it doesn't seem to work...is there and easy way of haveing the 'imagelink' => 'intermediate'
btw I have the highslide working as a tester with cpmfetch here:
http://amateurillustrator.com.s2734.gridserver.com/highslide2.2.5/example-no-border.php
Cheers
Nick
Quote from: nickfzx on November 29, 2006, 07:24:33 PM
hi Vuud
how do you link through to the intermediate picture
I saw this thread and have spent around an hour trying to do this:
http://forum.coppermine-gallery.net/index.php?topic=12679.msg59885#msg59885
but it doesn't seem to work...is there and easy way of haveing the 'imagelink' => 'intermediate'
btw I have the highslide working as a tester with cpmfetch here:
http://amateurillustrator.com.s2734.gridserver.com/highslide2.2.5/example-no-border.php
Cheers
Nick
Its in the docs, but I think i called the intermidaite "normal"
I also got one working last night with highslide, but barely. One of my goals is to rig something in cpmfetch to make it very very easy to do high slide... its way to cool to not have.
I tried normal and its not working...I looked in the documentation and I could only find large, none and album.
got what i wanted to o working:
http://amateurillustrator.com.s2734.gridserver.com/forums/
thanks for all the help
except i would like to link to the normal not large image and can't seem to figure this one out...could you point to the docs where it says this?
fixed the intermediate image thing...now i get the smaller images coming up instead of the fullsize
to do this i just added a couple of line to cpmfetch_dao.php
changed it from:
//function createlink($row) {
function createlink($filepath, $filename, $aid, $pos, $imagelink="int") {
$link= $this->partialUrltocpm;
if ($imagelink == 'album' || $imagelink == 'thumb') {
$link .= 'thumbnails.php?album=' . $aid;
} elseif ($imagelink == 'int') {
$link .= 'displayimage.php?pos=-' . $pos;
} elseif ($imagelink == 'large') {
$link .= 'albums/' . $filepath . $filename;
} elseif ($imagelink == 'none') {
$link = '';
} else {
$link .= 'displayimage.php?pos=-' . $pos;
}
return ($link);
} //end function
to:
//function createlink($row) {
function createlink($filepath, $filename, $aid, $pos, $imagelink="int") {
$link= $this->partialUrltocpm;
if ($imagelink == 'album' || $imagelink == 'thumb') {
$link .= 'thumbnails.php?album=' . $aid;
} elseif ($imagelink == 'int') {
$link .= 'displayimage.php?pos=-' . $pos;
} elseif ($imagelink == 'large') {
$link .= 'albums/' . $filepath . $filename;
}
elseif ($imagelink == 'normal') {
$link .= 'albums/' . $filepath . "normal_" . $filename;
}
elseif ($imagelink == 'none') {
$link = '';
} else {
$link .= 'displayimage.php?pos=-' . $pos;
}
return ($link);
} //end function
and the used 'imagelink' => 'normal',
I am trying now to get a caption working but don't seem to be able to...
here is the test page:
http://amateurillustrator.com.s2734.gridserver.com/highslide2.2.5/example-no-border.php
I have tried the same method used in the example files for adding captions but that doesn't seem to work at all.
All i want is a link to the intermediate page with all the file info and voting etc...this is available in the highslide plugin for coppermine but I looked through that code an could not make sense of it.
Any help here would be much apreciated.
Hi Vuud
so i think you might be able to help me with this one...I want to have information about the image in the caption...I have worked out how to get captions but I can't use the information cpmfetch is providing inside a caption.
Here is my code: (ignore all the css stuff...the good stuff is at the bottom)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd">
<html>
<head>
<script type="text/javascript" src="highslide/highslide.js"></script>
<script type="text/javascript">
hs.graphicsDir = 'highslide/graphics/';
window.onload = function() {
hs.preloadImages(5);
}
</script>
<style type="text/css">
* {
font-family: Verdana, Helvetica;
font-size: 10pt;
}
.highslide {
cursor: url(highslide/graphics/zoomin.cur), pointer;
outline: none;
}
.highslide img {
border: 2px solid gray;
}
.highslide:hover img {
border: 2px solid silver;
}
.highslide-image {
border-bottom: 1px solid white;
}
.highslide-image-blur {
}
.highslide-caption {
display: none;
border-bottom: 1px solid white;
font-family: Verdana, Helvetica;
font-size: 10pt;
padding: 5px;
background-color: silver;
}
.highslide-loading {
display: block;
color: white;
font-size: 9px;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
padding: 3px;
border-top: 1px solid white;
border-bottom: 1px solid white;
background-color: black;
padding-left: 22px;
background-image: url(highslide/graphics/loader.gif);
background-repeat: no-repeat;
background-position: 3px 1px;
}
a.highslide-credits,
a.highslide-credits i {
padding: 2px;
color: silver;
text-decoration: none;
font-size: 10px;
}
a.highslide-credits:hover,
a.highslide-credits:hover i {
color: white;
background-color: gray;
}
.highslide-display-block {
display: block;
}
.highslide-display-none {
display: none;
}
</style>
</head>
<body>
<div id="highslide-container"></div>
<?php
include "../cpmfetch/cpmfetch.php";
$objCpm = new cpm("../galleries/");
$options = array( "cellattributes" => array('align' => 'center', 'width' => '100', 'height' => '100'),
'<href="http://amateurillustrator.com.s2734.gridserver.com/galleries/displayimage.php?pos=-%i" class="highslide">
<img src="http://amateurillustrator.com.s2734.gridserver.com/galleries/displayimage.php?pos=-%i" alt="Highslide JS"
</a>',
'imagelink' => 'normal',
'subtitle' => 'Album: %a',
"linkstyle" => 'highslide" id="thumb2" onclick="return hs.expand(this)" onmouseover="self.status=\'Click to enlarge thumbnail\'; return true;');
$objCpm->cpm_viewRandomMedia(1,7, $options);
echo "<div class='highslide-caption' id='caption-for-thumb2'>".$options['subtitle']."This cssaption can be styled using CSS.</div>";
$objCpm->cpm_close();
?>
</body>
</html>
you can see what the code does here: http://amateurillustrator.com.s2734.gridserver.com/highslide2.2.5/example-no-border.php
if you click on a thumbnail you will see that the captions are coming up but instead of the information being shown about the album name it simple says %a. Is there a way of getting round this issue...I have tried a few things but with no luck.
Cheers
nick
Yeah, I don't think there was anything in there to get a link to the normal size photos...
Sorry about that. I will add it into the next release if I remember it.
Quote from: nickfzx on November 30, 2006, 03:52:33 PM
Hi Vuud
so i think you might be able to help me with this one...I want to have information about the image in the caption...I have worked out how to get captions but I can't use the information cpmfetch is providing inside a caption.
Here is my code: (ignore all the css stuff...the good stuff is at the bottom)
<div id="highslide-container"></div>
<?php
include "../cpmfetch/cpmfetch.php";
$objCpm = new cpm("../galleries/");
$options = array( "cellattributes" => array('align' => 'center', 'width' => '100', 'height' => '100'),
'<href="http://amateurillustrator.com.s2734.gridserver.com/galleries/displayimage.php?pos=-%i" class="highslide">
<img src="http://amateurillustrator.com.s2734.gridserver.com/galleries/displayimage.php?pos=-%i" alt="Highslide JS"
</a>',
'imagelink' => 'normal',
'subtitle' => 'Album: %a',
"linkstyle" => 'highslide" id="thumb2" onclick="return hs.expand(this)" onmouseover="self.status=\'Click to enlarge thumbnail\'; return true;');
$objCpm->cpm_viewRandomMedia(1,7, $options);
echo "<div class='highslide-caption' id='caption-for-thumb2'>".$options['subtitle']."This cssaption can be styled using CSS.</div>";
$objCpm->cpm_close();
?>
</body>
</html>
The $options['subtitle'] is only going to set what you put into the $options tag before the call. It has nothing to do with the photos being displayed.
I've played with this a bit at home and so far think the best way to work with the highslide stuff is to get the results back from cpmfetch and build your own listing. I also toyed with some other ideas, but for now that seems to be the best route.
I can post the code I have later on tonight, it sucks, but it could get you started. This is one of the weaknesses of cpmfetch - you get basically one output mechanism. HTML (or xHTML if you are lucky). I'd like to be able to extend it so that I you can select the output mechanism and it would produce something useful based on the same inputs.
So you could get
* Text
* DHTML
* CSS
* HTML
* Highslide
etc...
But that aint gonna happen this week, and won't even be looked at till after the bridging issues are resolved, the docs are updated and I get some sleep.
It would also be cool to do a callback... you submit a function name and cpmfetch calls it for each image it needs to display - but the learning curve gets steep there and I don't think I want to inflict that on people
Vuud
thanks for getting back
no worries...I have come up with a compromise...put the link in the subtitle and make it small...
check it out here:
http://amateurillustrator.com.s2734.gridserver.com/forums/
Should make my forum more fun to use.
Cheers
Quote from: nickfzx on November 30, 2006, 05:02:01 PM
thanks for getting back
no worries...I have come up with a compromise...put the link in the subtitle and make it small...
check it out here:
http://amateurillustrator.com.s2734.gridserver.com/forums/
Should make my forum more fun to use.
Cheers
Nice! Can you post your final cpmfetch code for it for others here?
sure...I had to go back to large images because there was a fault with my solution to get the normal sized images...which is this:
when an image is smaller than a certain size coppermine does not create a midsize (intermediate) image it just uses the original image.
So when I click the thumbnail of one of these images it doesn't find anything because they don't have the prefix "normal_".
So for now I have stuck with large images...in order for this to work with the normal images I would have to run a directory check i think and search for normal_filename and if it cant find it, then it uses filename (without the prefix).
But for now I've stuck with large images.
Because of the way punbb works you can't include php in the template (theme) file so there are two files involved here (but there could easily be only one)....for simplicity I will post as if there is only one file:
<script type="text/javascript" src="./highslide/highslide.js"></script>
<script type="text/javascript">
hs.graphicsDir = './highslide/graphics/';
window.onload = function() {
hs.preloadImages();
}
</script>
</div><div id="highslide-container"></div>
<?php
require_once "../cpmfetch/cpmfetch.php";
$objCpm = new cpm("../galleries");
$styleguide = array(
//"TABLESTYLE" => "photoclip",
//"rowstyle" => "photoclip",
"cellstyle" => "photoclip",
//"linkstyle" => "photoclip",
"alttag" => "Click on thumbnail to see full-sized image",
"imagestyle" => "photoclip",
"cellattributes" => array('align' => 'center', 'width' => '100', 'height' => '100'),
'imagelink' => 'large',
'subtitle' => '<a href="http://www.amateurillustrator.com/galleries/displayimage.php?pos=-%i">%o</a>',
"linkstyle" => 'highslide" onclick="return hs.expand(this)" onmouseover="self.status=\'Click to enlarge thumbnail\'; return true;');
$objCpm->cpm_viewRandomMedia(1,7, $styleguide);
$objCpm->cpm_close();
?>
to see the code in action look here:
http://www.amateurillustrator.com/forums/
hope this helps.
Quote from: nickfzx on November 30, 2006, 09:24:02 PM
sure...I had to go back to large images because there was a fault with my solution to get the normal sized images...which is this:
when an image is smaller than a certain size coppermine does not create a midsize (intermediate) image it just uses the original image.
So when I click the thumbnail of one of these images it doesn't find anything because they don't have the prefix "normal_".
So for now I have stuck with large images...in order for this to work with the normal images I would have to run a directory check i think and search for normal_filename and if it cant find it, then it uses filename (without the prefix).
I will post my code when I get back... It will let you do that, and will be a good example of using internals of cpmfetch to do this for you (there are routines that can get the right image for you).
Very nice site, I spent too much time browsing it today...
i noticed that here:
http://takethu.com/blog/?p=144
TranceNDance has managed to get the image link into the blog...
would you mind shareing your code for this...I spent ages trying to figure it out.
Does this help? http://takethu.com/blog/?p=163
sorry TranceNDance I thought you had a "Details" link in the caption of randomly slected images...but I see that you already new what the url was for the images that have them in the caption...i see that in your sidebar you have the details link underneath the random image like I do.
I think it would be a lot of work to get the details link to work in the caption of randomly selected images.
Cheers
Nick
Here is the code I was playing with on this... sorry for the delay on posting this
Some notes:
- This is done with the dev version of cpmfetch, some calls may differ to the stable version, but it is entirely possible
- I ommited all the html parts of this page almost
- I left a print_r at the bottom so you get a dump of what is in the data array and know what you can use or have access to
- Since we bypass the whole html output mechanism, its up to you to make rows and columns
As I mentioned before this is just tinkering code, no effort has been made to insure it is correct, or optimized, or clean, or pretty much anything.
i think the only difference to using this with a stable cpmfetch is that the:
$objCpm->getImageToUse
would be something like
$objCpm->cpm->getImageToUse
But I do not have it in front of me to double check
<?php
include "cpmfetch/cpmfetch.php";
$objCpm = new cpm("./cpmfetch/cpmfetch_config.php");
$objCpm->cpm_setReturnType("resultset");
$objCpm->cpm_debugMode(false);
$data = $objCpm->cpm_viewRandomMedia(5,5);
foreach ($data as $row) {
$pathtozoomimage = $objCpm->getImageToUse($row['pFilepath'], $row['pFilename'] ,"");
$pathtosmallimage = $objCpm->getImageToUse($row['pFilepath'], $row['pFilename'] ,"thumb_");
?>
<a href="<?php echo $pathtozoomimage ?>"
rel="<?php echo $pathtozoomimage ?>"
class="highslide" onclick="return hs.expand(this)" id="<?php echo $row['pFilename']?>">
<img style="margin-top: 20px" width="120" height="80"
src="<?php echo $pathtosmallimage ?>" alt="Highslide JS"
title="Click to enlarge" />
</a>
<div class='highslide-caption' id='caption-for-<?php echo $row['pFilename']?>'>
<a href="javascript:hs.closeId('<?php echo $row['pFilename']?>')" class="control">| Close |</a>
This instance uses graphic outlines to create a rounded border with a drop shadow.
Also note how this image is centered in the browser window.
</div>
<?php
}
echo "<pre>";
print_r ($data);
echo "</pre>";
$objCpm->cpm_close();
?>
cool thanks vuud
is there a place where i can see it in action?
Quote from: nickfzx on December 01, 2006, 05:59:49 PM
cool thanks vuud
is there a place where i can see it in action?
Not yet... its running on my development server, so there is no way to get there from outside. That and it does not really look that nice yet.
It's no problem to get the details code if you know how to do it. I use a version of the bbcode mod except I changed the code so that it generates the html I need to put into the blog post. If you're familiar with the bbcode mod and willing to install it, I'll dig up the code to add to the mod to generate the highslide code.
Quote from: TranzNDance on December 02, 2006, 04:21:15 AM
It's no problem to get the details code if you know how to do it. I use a version of the bbcode mod except I changed the code so that it generates the html I need to put into the blog post. If you're familiar with the bbcode mod and willing to install it, I'll dig up the code to add to the mod to generate the highslide code.
I have a string parser class that I use to do the BBCode stuff on another project. Thing is that it is heavy, but it is a full parser (not a regexp list). What do you use? I should really have this built into cpmfetch... Or at least stripping them out...
In displayimage.php:
$info['Highslide HTML'] = '
<a href="' . $CONFIG["ecards_more_pic_target"] . (substr($CONFIG["ecards_more_pic_target"], -1) == '/' ? '' : '/') . get_pic_url($CURRENT_PIC_DATA) . '" class="highslide" onclick="return hs.expand(this)" onmouseover="self.status=\'Click to enlarge thumbnail\'; return true;"
><img src="'. $CONFIG["ecards_more_pic_target"] . (substr($CONFIG["ecards_more_pic_target"], -1) == '/' ? '' : '/') . get_pic_url($CURRENT_PIC_DATA,'thumb') . '" height="' . $CONFIG['thumb_width'] . '" alt="' . $CURRENT_PIC_DATA['title'] . '" align="left" border="0" title="Click to enlarge" id="thumb' . $CURRENT_PIC_DATA[pid] . '" /></a>
<div class="highslide-caption" id="caption-for-thumb' . $CURRENT_PIC_DATA[pid] . '">
<a href="' . $CONFIG["ecards_more_pic_target"] . (substr($CONFIG["ecards_more_pic_target"], -1) == '/' ? '' : '/') . basename($_SERVER['PHP_SELF']) . "?pos=-$CURRENT_PIC_DATA[pid]" . '" >Details</a>
</div>';
I wrapped mine inside a conditional so that only I as admin can see the output... no point in visitors seeing the code if I don't want people to hotlink.