• Archived  

By welshchris - April 21, 2008 - edited: April 21, 2008

..... I've used this script before, and it produced a very good effect - slides the image out of the page (in a similar fashion to Lightbox) instead of opening a new window.

I'm just toying with AM2 at the moment after having installed it last week, and I thought I'd try implementing Highslide. I'm please to say it seems to work like a charm with very few modifications to the template files. See my working example here:

http://www.festrail2009.co.uk/content/publish/localnews/Highslide_Image_Expander.shtml

I have achived this without having to manually copy thumbnails to special directories by ftp etc. - once the template mods have been made it all works seamlessly and automatically. For the sake of simplicity I didn't bother trying to implement the caption function, so the expanded image is simply the picture and nothing else.

So that others can try it, I'll attempt to post my method - please bear with me!....

1). Go to http://vikjavev.no/highslide/ and download the required files.

2). Upload the required files etc. to your webspace - preferably in the root directory (i.e. you should end up with a directory http://www.yourwebsite.com/highslide)

3). Modify your common/embeddedMedia.html template as follows (here is my complete template with mods):

-----------------

<!-- templateCell : globalDefault.embeddedMedia -->
<!-- templateIf : $file.isImage$ == "1" -->
<!-- templateIf : $file.useThumbnail$ == "1" -->


<table border="0" cellspacing="5" cellpadding="0" align="$file.align$" width="$file.thumbnailWidth$">
<tr><td>
<!-- templateIf : $file.linkTo$ eq "url" -->
<a href="$file.linkUrl$" class="highslide" onclick="return hs.expand(this, {captionId: ''})">
<!-- /templateIf -->
<!-- templateIf : $file.linkTo$ eq "image" -->
<a href="$file.webUrl$" class="highslide" onclick="return hs.expand(this, {captionId: ''})">
<!-- /templateIf -->

<img src="$file.thumbnailWebUrl$" alt="$file.title:htmlEncoded$" width="$file.thumbnailWidth$" height="$file.thumbnailHeight$" border="1" /><!-- templateIf : $file.linkTo$ ne "" --></a><!-- /templateIf -->
<div class="image_caption">$file.caption$</div>

</td></tr>
</table>

<!-- templateIf : $file.wrapText$ == "0" --><br style="clear: both;" /><!-- /templateIf -->
<!-- /templateIf -->

<!-- templateIf : $file.useThumbnail$ != "1" -->

<table border="0" cellspacing="5" cellpadding="0" align="$file.align$" width="$file.width$">
<tr><td>

<!-- templateIf : $file.linkTo$ eq "url" -->
<a href="$file.linkUrl$" class="highslide" onclick="return hs.expand(this, {captionId: ''})">
<!-- /templateIf -->
<!-- templateIf : $file.linkTo$ eq "image" -->
<a href="$file.webUrl$" class="highslide" onclick="return hs.expand(this, {captionId: ''})">
<!-- /templateIf -->

<img src="$file.webUrl$" alt="$file.title:htmlEncoded$" width="$file.width$" height="$file.height$" border="1" /><!-- templateIf : $file.linkTo$ ne "" --></a><!-- /templateIf -->
<div class="image_caption">$file.caption$</div>

</td></tr>
</table>

<!-- templateIf : $file.wrapText$ == "0" --><br style="clear: both;" /><!-- /templateIf -->
<!-- /templateIf -->

<!-- /templateIf -->


<!-- templateIf : $file.isImage$ != "1" -->
<p>[ <a href="$file.webUrl$">Download/View $file.title$</a> ]</p>
<!-- /templateIf -->

<!-- /templateCell : globalDefault.embeddedMedia -->

-----------------

4). Modify your articlePages/articlePage.html template as follows:

Add this code to the <head> of the template, but be sure to use the FULL PATHS to the script files and associated directories (this is important). You can also play with this css to achieve the desired effect - see the highslide website for all the available options.

-----------------

<script type="text/javascript" src="http://www.festrail2009.co.uk/highslide/highslide.js"></script>

<!--
2) Optionally override the settings defined at the top
of the highslide.js file. The parameter hs.graphicsDir is important!
-->

<script type="text/javascript">
hs.graphicsDir = 'http://www.festrail2009.co.uk/highslide/graphics/';
hs.outlineType = 'rounded-white';
</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.
-->

<style type="text/css">

.highslide {
cursor: url(highslide/graphics/zoomin.cur), pointer;
outline: none;
}
.highslide img {
border: 1px solid black;
}
.highslide:hover img {
border: 1px solid red;
}

.highslide-image {
border: 2px solid white;
}
.highslide-image-blur {
}
.highslide-caption {
display: none;

border: 2px solid white;
border-top: none;
font-family: Verdana;
font-size: 10pt;
padding: 5px;
background-color: white;
}
.highslide-display-block {
display: block;
}
.highslide-display-none {
display: none;
}
.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(http://www.festrail2009.co.uk/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;
}
</style>

-----------------

And basically that's it - all your thumbnails on your news pages will now open in the highslide window provided you use the right settings in the article editor (i.e. set the thumnail to 'link to full size image' and also tick 'use thumbnail.

I'm sure that the code gurus will check my code to see if there is any unnneccessary code in there at all, but I played with it for a while and got it working as you can see from my example.

Hope this helps / inspires people to have a crack at it!

Best Wishes

Chris

Re: [welshchris] Successful implementation of Highslide image expander in AM2.....

  • Archived  

By MikeB - April 21, 2008

Hi Chris,

Thanks for the post and this great example!

I'm glad to hear you were able to integrate this script into your Article Manager installation and it's great to see this up and running.

These instructions should be helpful for anyone else that would like to set this up and thanks again for posting this Chris! [:)]

Cheers,
Mike Briggs - Product Specialist
support@interactivetools.com

<hr /><i><a href="http://www.interactivetools.com/consulting/" rel="nofollow"><b>Hire me!</b></a>
Save time by getting our experts to help with your project. Template changes, advanced features, full integration, whatever you need. Whether you need one hour or fifty, get it done fast with <a href="http://www.interactivetools.com/consulting/" rel="nofollow"><b>Priority Consulting</b></a>.</i>

Re: [MikeB] Successful implementation of Highslide image expander in AM2.....

  • Archived  

By Larrian - April 26, 2008

Re: [welshchris] Successful implementation of Highslide image expander in AM2.....

  • Archived  

By marys - July 23, 2008

Thanks so much for this. I wish I had found this post before I wasted many days trying to solve a conflict with Lightbox and IE.

I followed your instructions and had Highslide up and running for the Image Gallery in minutes.

I'm hoping you can help me get Highslide working for inline images -- images that are linked to in articles.

Please see http://www.interactivetools.com/iforum/Products_C2/gforum.cgi?post=63673;search_string=inline;t=search_engine#63673

On my article page, I've tried unsuccessfully:

<!-- templateCell : article.inline_image.embeddedMedia -->
<img src="$file.WebUrl$" class="highslide" onclick="return hs.expand(this)">
<!-- /templateCell : article.inline_image.embeddedMedia -->

I also experimented with various possibilities on the embeddedMedia template including adding:

<!-- templateIf : article.inline_image.embeddedMedia -->
<img src="$file.WebUrl$" class="highslide" onclick="return hs.expand(this)">
<!-- /templateIf : article.inline_image.embeddedMedia -->

Any insight will be appreciated.

Re: [marys] Successful implementation of Highslide image expander in AM2.....

  • Archived  

By welshchris - July 24, 2008

OK..... I'll try to recall how I did it, albeit it was a while ago.

The main modification was to the articlepage.html template.

------------------

1). Place this code in the <head> of the template (replacing 'yourdomain' with yes, your domain [cool] ):

<script type="text/javascript" src="http://www.yourdomain.co.uk/highslide/highslide.js"></script>

<script type="text/javascript">
hs.graphicsDir = 'http://www.yourdomain.co.uk/highslide/graphics/';
</script>

<style type="text/css">
* {
font-family: Verdana, Helvetica;
font-size: 8pt;
}
.highslide {
cursor: url(http://www.yourdomain.co.uk/highslide/graphics/zoomin.cur), pointer;
outline: none;
}
.highslide-active-anchor img {
visibility: hidden;
}
.highslide img {
border: 1px solid black;
}
.highslide:hover img {
border: 1px solid black;
}
.highslide-wrapper {
background: white;
}
.highslide-image {
border: 10px solid white;
}
.highslide-image-blur {
}
.highslide-caption {
display: none;
border: 5px solid white;
border-top: none;
padding: 3px;
background-color: white;
}
.highslide-loading {
display: block;
color: black;
font-size: 8pt;
font-family: sans-serif;
font-weight: bold;
text-decoration: none;
padding: 2px;
border: 1px solid black;
background-color: white;

padding-left: 22px;
background-image: url(http://www.yourdomain.co.uk/highslide/graphics/loader.white.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;
}

a.highslide-full-expand {
background: url(http://www.yourdomain.co.uk/highslide/graphics/fullexpand.gif) no-repeat;
display: block;
margin: 0 10px 10px 0;
width: 34px;
height: 34px;
}

/* These must always be last */
.highslide-display-block {
display: block;
}
.highslide-display-none {
display: none;
}

.highslide {
cursor: url(highslide/graphics/zoomin.cur), pointer;
outline: none;
}
.highslide img {
border: 1px solid black;
}
.image_caption {
line-height: 10px;
font-size: 10px;
padding: 0px 3px 5px 3px;
background: #FFFFCC;
text-align: left; }

</style>

------------------

2). Replace this code:

<!-- templatecell : article.imageGallery.row -->
<div style="float:left; margin: 0px 5px 5px 0px; padding:0;">
<a href="$file.webUrl$"><img src="$file.thumbnailWebUrl$" border="1" alt="$file.title:htmlEncoded$" width="$file.thumbnailWidth$" height="$file.thumbnailHeight$" class="galleryImage"></a>
<!-- templateIf : $file.caption$ ne "" -->
<br style="clear: both;" />
<div class="image_caption" style="width:$file.thumbnailWidth$px;">$file.caption$</div><br><br style="clear: both;" />
<!-- /templateIf -->
</div>
<!-- /templatecell : article.imageGallery.row -->

with this (not you may have to adjust the font code a little depending upon your design, but this should give you a working example to start with):

<!-- templatecell : article.imageGallery.row -->
<div style="float:left; margin: 5px; padding:0; font-family:Verdana, Helvetica; font-size:8pt">
<a href="$file.webUrl$" class="highslide" onclick="return hs.expand(this, {captionId: ''})"><img src="$file.thumbnailWebUrl$" border="1" alt="$file.title:htmlEncoded$" width="$file.thumbnailWidth$" height="$file.thumbnailHeight$" class="galleryImage"></a>
<!-- templateIf : $file.caption$ ne "" -->
<br style="clear: both; font-family:Verdana, Helvetica; font-size:8pt" />
<div class="image_caption" style="width:$file.thumbnailWidth$px;">$file.caption$</div>
<br style="font-family: Verdana, Helvetica; font-size: 8pt">
<br style="clear: both; font-family:Verdana, Helvetica; font-size:8pt" />
<!-- /templateIf -->
</div>
<!-- /templatecell : article.imageGallery.row -->

------------------

I think that's it - let me know how you get on.

Chris