Highslide attribute problem with image TVs

I’m using Highslide JS on the homepage of my site, pulling img src, and it’s very cool.

For the blog entry pages, I want to be able to choose images using TV’s, displaying thumbnails that can be expanded with Highslide. Here’s my problem...

So on the TV I’m using image for input and also for widget. On the widget I add onclick="return hs.expand(this)" in the attribute box, and highslide in the class box which I can see is correctly pulling the css. All looks good when I go to the site...

...and even the ’Ajax is loading’ icon spins about when I click on the image. The problem is that that is all it does, the Ajax icon just keeps spinning, the image doesn’t even begin to try to resize.

Could this be a problem with my attribute call? I guess it sounds more like a JS issue, but I don’t see how as I ran a little test; I added the TV to the template used by the hompage, and popped in a foto, with the same problem as on the blog entry page. And the same JS script works swell on the homepage pics which don’t use the TV.

Or is there another way I can call a TV while wrapping the ’onclick’ attribute, more like a regular img src? I tried DirectResize but prefer the look of the standalone Highslide JS. I could hardcode for the same desired final effect but would rather use the TV to keep new blog entry making as simple as poss.

I’m not enormously experienced and guess I’m missing something To cover the bases, here’s the code in my template as well...

<div id="BlogFotoBox">
<p><i>...[*BlogFotoCaption*]...</i></p>
<div><p>[*BlogFoto1*][*BlogFoto2*][*BlogFoto3*][*BlogFoto4*][*BlogFoto5*]</p>
<div id="controlbar" class="highslide-overlay controlbar">
<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>
</div>
</div>

Am using 0.9.6.1.B, and loving it so thank you everyone.

Olly.

Don’t know if this will help at all but I wrote a snippet for HighslideJS, see my signature or look at http://www.3913.co.uk/highslide.html
Do you have a link to the JS file in the head?
Also something like this in the body?
What about a link or is it on a local machne?

Thank you David, it didn’t answer my question, as such... but this is actually better than calling the images via TV’s Works beautifully.

Olly.

Glad it helped out.

Hi David,

One thing...I’m trying to integrate one of Robert Penner’s Easing Equasions (http://www.robertpenner.com/easing/ or see Torstein’s site http://vikjavev.no/highslide/)...but having a problem due to my lack of php knowhow.

At Torstein’s site it says to add <script type="text/javascript" src="highslide/easing_equations.js"></script> to the head, which I have adapted to the new path assets/snippets/highslide...
And then it says to also put this is the head ...

<script type="text/javascript">
hs.easing = ’linearTween’;
</script>

...substituting linearTween for ’easeOutBack’, the effect I have been using with Highslide, prior to the TV trouble I had.

That doesn’t work, though it does without the snippet.

I tried adding a regclientJS entry into the snippet with a fatal error, and various other failed attempts later I wonder if you may have any pointers. I tried adding $modx->regClientStartupScript("assets/snippets/highslide/easing_equations.js"); with a new echo statement of

echo ’<script type="text/javascript">
hs.easing = ’linearTween’;
</script>’ ;

...that last idea return a string parse error.

I guess this is a fundamental lack of php/js understanding.

Any pointers and I’d be most grateful, as this is indeed an excellent effect for highslide.

...

Aah, another thing...

With the use of your highslide snippet, for some reason the top and bottom borders around my full-size, expanded image breaks, just to the left of the right hand side. I tried playing with the css but couldn’t resolve that. I played about with the $*margins as well but no joy there. Is that something you experienced? I’m using Firefox 2.0. The site’s on localhost but I’ll attach a screenshot.

Many thanks for any light you can throw on these issues.

Olly.

many thanks Ganesh - but it doesn’t work! well, it is good code - I have no errors now, and have learnt something from your syntax, but the hs.easing function doesn’t kick in.

in case it throws some light, here is my full, adapted code for David’s snippet which, this easing issue aside, is very useful...I’ve taken out the intro stuff and added comments where I’ve added the easing references...

<?php

******************************************************************************/
$siteName = $modx->config[’site_name’];
//This is the highslide .js file
$modx->regClientStartupScript("assets/snippets/highslide/highslide.js");
$modx->regClientStartupScript("assets/snippets/highslide/easing_equations.js"); //I ADDED THIS, ALSO TRIED REGCLIENTJS BUT FATAL ERROR WITH THAT
//The css
$modx->regClientCSS("assets/css/style.css");
//Start of snippet call options and defaults.
//This will set the left margin for the fullsize image.
$Lmargin = isset($Lmargin)? $Lmargin : 250;
//This will set the right margin for the fullsize image.
$Rmargin = isset($Rmargin)? $Rmargin : 30;
//This will set the top margin for the fullsize image.
$Tmargin = isset($Tmargin)? $Tmargin : 270;
//This will set the bottom margin for the fullsize image.
$Bmargin = isset($Bmargin)? $Bmargin : 30;
//This will set the position for the control bar on the fullsize image. Options are top/bottom & left/right.
$cbPosition = isset($cbPosition)? $cbPosition :’top right’;
//This will set the outline effect for the fullsize image. Options are beveled,drop-shadow,outer-glow & rounded-white.
$Outline = isset($Outline)? $Outline : ’rounded-white’;
//This will set the folder for the gallery images.
$Gname = isset($Gname)? $Gname : trial;
//This will set the folder for the outline images.
$GraphicsDir = isset($GraphicsDir)? $GraphicsDir : ’assets/snippets/highslide/graphics/’;
//End of snippet call options and defaults.
$thumbs_dir = ’assets/galleries/’.$Gname.’/thumbs/’;
$file_dir = ’assets/galleries/’.$Gname.’/fullsize/’;
$dir = opendir($file_dir);

while ($file = readdir($dir))

{
if ($file != ’.’ && $file != ’..’)
{
echo ’<a id="’ . htmlspecialchars(ucfirst(preg_replace(’#\..*$#’, ’’, $file))) . ’" href="’ . $file_dir . ’’ . rawurlencode($file) . ’" class="highslide" onclick="return hs.expand(this)">
<img src="’.$thumbs_dir.’’. rawurlencode($file) . ’" alt="’ . htmlspecialchars(ucfirst(preg_replace(’#\..*$#’, ’’, $file))) . ’" title="Click to enlarge" /></a>’;
echo "\r\n";
}
}

echo ’<script type="text/javascript"> // I ADDED THIS, AND ALSO TRIED THE "$output =<<<EOF" OPTION, IN BOTH CASES WITH ECHO AND RETURN.
hs.easing = \’linearTween\’;
</script>’;

echo ’
<div id="controlbar" class="highslide-overlay controlbar">
<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>’ ;

echo ’<script type="text/javascript">
hs.registerOverlay(
{
thumbnailId: null,
overlayId: \’controlbar\’,
position: \’’.$cbPosition.’\’,
hideOnMouseOut: true,
opacity: 0.75
}
);
hs.marginLeft = ’.$Lmargin.’,
hs.marginRight = ’.$Rmargin.’,
hs.marginTop = ’.$Tmargin.’,
hs.marginBottom = ’.$Bmargin.’,
hs.outlineType = \’’.$Outline.’\’,
hs.creditsText = \’&copy; ’.$siteName.’\’,
hs.graphicsDir = \’’.$GraphicsDir.’\’,
window.onload = function() {
hs.preloadImages(5);
}
</script>’;

return;
?>


OTHERWISE, or rather otherwise, I also tried replacing the echo statements with return but that was to no avail.

Any other tips would be most appreciated.

...

regarding the second problem I had, with the gap in the border to the top and bottom borders of the full-size images, this has resolved itself and I guess was a local caching issue.

Many thanks,

Olly.

I’ve had a quick look at the easing options.
I couldn’t get it to work by modifying my snippet either!
I’ll have another look when I have a bit more time.

Quote from: ganeshXL at Mar 18, 2008, 09:01 PM

It would be a bit easier to debug if you had it online... Did you check the rendered html-source in the browser? Did you check and double-check all paths?

Are you sure this JS really exists?
$modx->regClientStartupScript("assets/snippets/highslide/easing_equations.js");

The easiest thing is to make a little example - a static, normal HTML page, outside of MODx.
When you’re sure that works OK, add all the single parts (CSS, JS, markup) in your snippet step by step, and see how it goes.

tx Ganesh - worthy questions cos I’m php-illiterate - in fact that could be my signature.

The .js file is there, though, yes, and the path is the same as for the snippets call to the main Highslide .js and that does work... unless there’s some rule about calling a second "regClientStartupScript", which is how I’ve been trying to pull the easing_equtions.js? I wondered if a regClientJS call would be more appropriate for a strap-on .js file, but that delivered a fatal error.

But, with my site on a XAMPP localhost, David’s snippet is feeding perfectly into my Firefox 2.0 browser, all F5 refreshed each time.

I see what you mean about a little standalone, uncomplicated page, away from the madding crowd which may be my webpage...I’ll try that.

Thank you.

Quote from: bunk58 at Mar 19, 2008, 03:50 AM

I’ve had a quick look at the easing options.
I couldn’t get it to work by modifying my snippet either!
I’ll have another look when I have a bit more time.

Tx David - any light on this would be terrific. Maybe you see the value of adding Robert Penner’s easing equations to Highslide - makes the thing come alive...I particularly like the "easeOutBack" option, very slick transformation indeed.

I wonder, i wonder, is there not a way to simply add a call to the easing_equations.js from the highslide.js? Kind of like pulling in an additional .css from a cornerstone .css file? ...and then adding the echo or return statement in the snippet? I tried that but it didn’t work.

I’ll be playing with this again later today, hopefully with a fresh head. Will let you know of any success.

Cheerio,

Olly.