Highslide JS .NET

Highslide JS .NET is a .NET control to encapsulate the functionality of Torstein Honsi’s Highslide JS library. This is an example of it in action (see below for how little code was needed to create this demo page):

Important: Highslide JS is free for non-commercial use. However, if you implement this commercially there is a license fee per domain. More details are available on the official Highslide JS page. If you use this commercially, please don’t forget to support the author!

Usage example

<%@ Register Assembly="HighslideImage" Namespace="Encosia" TagPrefix="encosia" %>
<encosia:HighslideManager runat="server" OutlineType="RoundedWhite" />
<encosia:HighslideImage runat="server" Caption="Image One"
  ImageUrl="Thumbnail-1.jpg" FullImageUrl="Image-1.jpg" />
<encosia:HighslideImage runat="server" Caption="Image Two"
  ImageUrl="Thumbnail-2.jpg" FullImageUrl="Image-2.jpg" />

HighslideManager properties

AnchorPosition: Allows you to specify which point on the enlargement will be anchored to the thumbnail. See hs.anchor for more information.

CenterEnlargements: When true, enlargements will be centered within the browser window instead of centered over their thumbnails. Defaults to false.

ControlBar: Enables or disables the control bar on zoomed images. Default control bar images and CSS are embedded in the control. Optionally, the control bar can be customized via CSS, by overriding the controlbar class.

ControlBarPostition: A ControlBarPositionType property, which allows you to specify where the control bar is overlaid on the enlargement. The options are BottomLeft, BottomRight, TopLeft, and TopRight.

ExpandEvent: Allows the enlargement to be triggered by events other than onclick, specifically onmouseover. The default is Click. MouseOver is also valid.

FadeInOut: A boolean which enables a fade effect while the image resizes.

IncludeDefaultCSS: A boolean allowing you to prevent the control from registering any of its default CSS styling. This is useful if you want to provide your own CSS rules to style the Highslide elements. Defaults to true.

MarginLeft: An integer specifying a minimum margin (in pixels) between the left side of an enlargement and the edge of the browser. For more information, see the Highslide JS documentation for hs.marginLeft.

MarginTop: See MarginLeft.

MarginRight: See MarginLeft.

MarginBottom: See MarginLeft.

NumberOfImagesToPreload: An integer value which allows you to control how many full size images the script automatically preloads after a thumbnail is enlarged. Setting this property to 0 will disable preloading.

OutlineType: An OutlineType that determines the outline graphic style for all of the images on the page. Defaults to "RoundedWhite" if not specified.

RenderScriptInPlace: A boolean allowing you to control where the Highslide JS script include is rendered. If true, the script include will be placed exactly where the HighslideManager control is located in your document. If false, the script will be included in the head of the document, as usual.

ShowFullExpandButton: When the full size image is too large to display in the available browser viewport, an enlargement icon normally displays in the bottom right corner. Setting this property to false will cause that icon to have an opacity of 0, effectively hiding it.

HighslideImage properties

HighslideImage extends System.Web.UI.WebControls.Image. All of its standard properties (e.g. ImageURL, Height, Width, etc) remain unchanged and apply to the thumbnail image.

AlternateText: A string specifying the text used for the image’s alt attribute. If this is omitted, then "Thumbnail image for FullImageURL" is used by default.

Caption: A string specifying text to use as a caption on the zoomed image. You can style this with CSS via the .highslide-caption CSS class.

Disabled: When true, no Highslide functionality will be attached to the image. Good for imperatively disabling thumbnails from code-behind.

FullImageURL: A string specifying the URL of the "full" size image that will be displayed when the user clicks to zoom in.

LinkTarget: A string specifying the link target of the enclosing <a> tag. This can be used to control the behavior of the thumbnails when a user doesn’t have JavaScript enabled. For example, you could set LinkTarget to "_new" to force non-JavaScript users to see the full image open in a new window/tab instead of navigating the current page to the full image.

TitleText: A string specifying the text to use for the image’s title attribute.

Known issues

When using Highslide JS .NET in a content page, the master page’s <head> element must include the runat=”server” attribute. Otherwise, the control is unable to access it to include Highslide’s CSS.

Changelog

v4.1.12 (3/31/2011)

  • Updated embedded Highslide version to 4.1.12, which includes several compatibility fixes.

v4.1.5 (8/25/2009)

  • Updated the base Highslide JS library to v4.1.5.
  • Updated the embedded CSS to the latest version bundled with Highslide JS. This fixes the issue with the transparent/blank bar during enlargement if a caption is set.
  • A few internal improvements that should make it work more reliably in some situations.
  • Added: Support for onmouseover triggering, through a new property called ExpandEvent. Options are Click and MouseOver.
  • Added: CenterEnlargements. When true, enlargements will be centered in the browser instead of centered over the thumbnail.
  • Added: MarginTop, MarginLeft, MarginBottom, and MarginRight, which mirror the functionality of Highslide’s similarly named settings. For more information, see the documentation for hs.marginLeft.
  • Added: AnchorPosition. This property allows you to specify which point on the enlargement will be anchored to the thumbnail. See hs.anchor for more information.
  • Added: ShowFullExpandButton. When the full size image is too large to display in the available browser viewport, an enlargement icon normally displays in the bottom right corner. Setting this property to false will cause that icon to have an opacity of 0, effectively hiding it.
  • Added: Disabled property. When set to true, no Highslide functionality will be attached to the image. Good for imperatively disabling thumbnails from code-behind.

v4.1.4 (6/3/2009)

  • Updated embedded Highslide JS script version to 4.1.4.
  • Added ControlBarPosition property to the HighslideManager, which allows you to position the enlargement’s control bar in any corner of the image.
  • Added several properties (ControlBarPreviousTitle, ControlBarNextTitle, ControlBarMoveTitle, and ControlBarCloseTitle) to control title attributes of links rendered in the control bar. Useful for localization.

v0.7.3 (11/30/2008)

  • Added IncludeDefaultCSS feature.

v0.7.2 (10/24/2008)

  • Updated embedded Highslide version to 4.0.7.

v0.7.1 (5/2/2008)

  • A more descriptive exception is now thrown when the <head> is inaccessible.

v0.7 (4/29/2008)

  • Updated embedded Highslide version to 3.3.17.
  • Improved caption rendering, using inline caption divs, instead of using the onclick parameter. This should result in more semantic markup, pairing your captions with your images.
  • Added HighslideManager property: NumberOfImagesToPreload. This allows you to control how many images are automatically preloaded.
  • Added HighslideManager property: FadeInOut. When true, this fades the enlargement in and out as it’s resizing.
  • Added HighslideManager property: RenderScriptInPlace. This allows you to control where on the page the Highslide JS script is inserted in your page.
  • Updated download to include a sample site, to make it a little easier to get up and running quickly.

v0.5 (1/11/2008)

  • Updated embedded Highslide version to 3.3.6.
  • Cleaned up Alt and Title attribute handling.
  • Added TitleText property to HighslideImage.
  • Added LinkTarget property to HighslideImage.

v0.4 (8/1/2007)

  • Updated embedded Highslide version to 3.2.10.
  • Embedded outlines in the control .dll (you can delete your GraphicsPath!).
  • Removed the GraphicsPath property.

v0.3 (6/3/2007)

  • Added support for the control bar.
  • Updated embedded Highslide version to 3.1.10.

v0.2 (5/5/2007)

  • Added support for replacing ~ with the current context’s application path in FullImageURL and GraphicsPath.
  • Added support for captions on zoomed images, using the Caption property.

v0.1

  • Initial release

3 Mentions Elsewhere

  1. Highslide JS .NET « DOT NET
  2. Bildvisare « Runat=”Server”
  3. Highslide JS .NET « Sanelite Technologies Pvt. Ltd.

216 Comments

Gabriel Rodriguez Subscribed to followup comments
1:44 pm - March 29, 2007

Great control, I just tested it on my personal site, and it works just fine, the only thing i noticed is that it first zooms the image and when its all zoommed, then it adds the outline… i just went to the original highslide page and it seems to zoom both the outline and the picture at the same time. Have you noticed this in your control, or is there any fix for this? Thanks a lot for sharing.

Reply to this comment
2:07 pm - March 29, 2007

Gabriel, I’m glad you like it.

On my test site, the outline does zoom with the image. It may be something to do with the GraphicsPath and/or the outlines directory.

An easy way to see if anything is having trouble loading is to open it in FireFox with FireBug running, watch the “net” tab, and see if anything is highlighted in red while you load/use the page. If your site is accessible, give me a link to it and I’ll take a look for you if you want.

In the next version, I hope to find a way to include the outline graphics as an embedded resource instead of dealing with it this way.

Reply to this comment
Mike Starkey Subscribed to followup comments
7:07 pm - March 29, 2007

Great Work !!! I am using your control and it works very nicely. Any chance of adding captions?

Reply to this comment
9:37 pm - March 29, 2007

I’m happy that it’s working well for you, Mike.

I’ll definitely be filling out the control with most of the functionality that Highslide JS offers ASAP (which includes captions on the zoomed image).

Reply to this comment
Josh Sterling Subscribed to followup comments
2:36 pm - April 10, 2007

Great Control!

Everything related to the control works great but I am having issues with the CSS on my page while using it. It still shows the CSS but it screws with the text sizes, padding, etc.

My web app. is written in C# using external CSS and utilizing master pages.

I can give you a test link if needed.

Thanks.

Reply to this comment
2:40 pm - April 10, 2007

Hmm, it’s possible that your CSS selectors and the ones Highslide use are conflicting.

Give me that test link, and I’ll take a look at what’s going on. If you’d rather keep the URL private, you can email me through the contact link at the top of the page.

Reply to this comment
Josh Sterling Subscribed to followup comments
3:34 pm - April 10, 2007

If it is an issue with the CSS would it be possible to change up the CSS in Highslide to use some non-standard CSS?

Thanks, I appreciate it.

Reply to this comment
8:55 pm - April 10, 2007

I emailed an updated version to your GMail address. Give it a try and let me know if it solves your problem (it should).

Reply to this comment
Josh Sterling Subscribed to followup comments
12:11 am - April 11, 2007

Thanks Dave!

I really appreciate your help and quick response.

It has solved my problem and everything looks good again :)

May I ask what the problem was?

Reply to this comment
12:25 am - April 11, 2007

The Highslide CSS had a font size setting for the * selector. That was superseding your CSS rules for the body font size.

There’s no real point to that, so I just removed it from the embedded Highslide CSS.

Thanks for bringing that to my attention.

Reply to this comment
Steve Subscribed to followup comments
5:17 pm - April 11, 2007

Hi there. Perhaps I am missing something, but how do I reference the dll? I tried different things but always get the error unknown server tag.

Reply to this comment
6:19 pm - April 11, 2007

If you’re using a web project, go to the “Website” menu in Visual Studio and choose “Add Reference…” You can locate and reference the dll file through the browse tab of the dialog window.

In your ASPX page(s), use this page directive:

<%@ Register Assembly="HighslideImage" Namespace="Encosia" TagPrefix="encosia" %>

Alternatively, you can add the control to your toolbox by right clicking it, and then drag and drop the controls onto the design view of your ASPX page(s).

Hope that helps.

Reply to this comment
Steve Subscribed to followup comments
11:14 pm - April 11, 2007

Thanks a bunch! I’ll never have to ask that question again :)

Reply to this comment
MR
9:55 am - April 12, 2007

Hi,
A couple of quick questions. First of all thanks for creating the .Net control. Now my questions..
1. Do you have to add each picture individually or can you just link it to the picture folder?
2. Do you have to have thumbnails, or can it create thumbnails automatically?

Thanks

Reply to this comment
10:21 am - April 12, 2007

1. Each picture needs to have a separate HighslideImage control.
2. The thumbnails need to already exist.

I think #1 is beyond the scope of what I’m trying to do here, but #2 is a great idea. I’ll see about adding that in a future version.

Reply to this comment
Steve Subscribed to followup comments
2:44 pm - April 12, 2007

I have built an ashx to generate thumbnails on the fly, I think it would be pretty simple to hook that up to your component. then you can just send one (large image) file name and an option “generate_thumbnail=yes” or something. Write out the thumbnails to disk for caching, then it would be slow only first time.

Reply to this comment
12:35 pm - April 17, 2007

For that matter, you could also point the ImageURL to the thumbnailing ashx and FullImageURL to the full image.

Reply to this comment
Josh Sterling Subscribed to followup comments
5:16 pm - April 17, 2007

Two Things.

1.)In order to get this to work properly I must use this format

Notice the lack of the ~ in the FullImageURL and GraphicsPath command. You cannot add the root symbol ~ to those fields or it parses it as a folder and adds it to the URL. Is this by design?

2.)Is there any plan to add a description field?

Thanks

Reply to this comment
Joshua Sterling Subscribed to followup comments
5:20 pm - April 17, 2007

Ok, I cant get the code tag to work, sorry.

My 1st question involves the fact that you cant use the ~ in the FullImageURL and GraphicsPath fields but can use in the ThumbURL field.

Sorry again

Reply to this comment
5:47 pm - April 17, 2007

I just uploaded a new version that should handle the application path (~) character correctly in FullImageURL and GraphicsPath.

Give it a try (download from the regular link above) and let me know if that fixes it for you.

I plan to add a property to caption the images, in the next update. Hopefully, very soon.

Reply to this comment
Josh Sterling Subscribed to followup comments
12:45 pm - April 23, 2007

The new .dll removes the application path alotogether on my test site.

Reply to this comment
3:17 pm - April 23, 2007

That’s strange. I changed my test code to this:

<encosia:HighslideManager runat="server" 
  OutlineType="RoundedWhite" GraphicsPath="~/HighslideTest/highslide/" />
<encosia:HighslideImage runat="server" 
  ImageUrl="Thumbnail-1.jpg" FullImageURL="~/HighslideTest/Image-1.jpg" />
<encosia:HighslideImage runat="server" 
  ImageUrl="Thumbnail-2.jpg" FullImageURL="Image-2.jpg" />

The new version handles all of the app paths for that test code.

Could you give me an example of one of the HighslideImage control declarations you’re using, so I can test with exactly the path you are?

Reply to this comment
jc
8:14 am - May 16, 2007

Do you think to support the controlbar (NEXT/PREVIOUS/CLOSE) soon ?

Reply to this comment
1:24 pm - May 16, 2007

I’ll put that on my list of things to do. It shouldn’t be very hard.

Reply to this comment
jc
1:45 pm - May 16, 2007

Thanks for the answer, do you have an estimated time to add this feature ?

Reply to this comment
9:40 pm - May 16, 2007

It will probably be a couple of weeks.

Reply to this comment
Teresa Subscribed to followup comments
3:26 pm - June 22, 2007

This code is awesome. One problem I have is that my header is in flash so when my images expand they go under the flash header. Anyone else had this problem or know how to fix it?

Thanks!

Reply to this comment
Josh Sterling Subscribed to followup comments
4:38 pm - June 22, 2007

Are you using the free version (2.4) of “Flash Control for ASP.Net”?

I have not tested it with the pro version but I have seen this issue as well using te free version.

I am testing some other controls for flash and will let you know.

Reply to this comment
Anonymous Subscribed to followup comments
4:53 pm - June 22, 2007

I am using the free version. Thank you for your help!

Reply to this comment
5:49 pm - June 22, 2007

Try adding:

STYLE=”z-index: -1;”

To whatever flash related element you can (its containing DIV, or whatever makes sense in your implementation).

Reply to this comment
3:45 pm - August 1, 2007

Version 0.4 is released and available for download.

Outlines are now self contained in the .dll and you can eliminate the entire GraphicsPath directory (along with that property of the HighslideManager).

Enjoy!

Reply to this comment
Adrian
2:22 am - August 6, 2007

Great control, it just made my life happier!

When will it have support for “hs.expandHtml()” and other good stuff?

Reply to this comment
8:30 am - August 6, 2007

The full Highslide JS library is included by the HighslideManager control. So, you should be able to use the full range of Highslide JS properties and methods against Highslide JS .NET images.

Reply to this comment
9:35 am - August 13, 2007

This controls is perfect. It works like a charm with a data bound control such as the DataList or Repeater.

On one of the sites I’m getting object not set to ….

[NullReferenceException: De objectverwijzing is niet op een exemplaar van een object ingesteld.]
Encosia.HighslideManager.OnPreRender(EventArgs e) +305
System.Web.UI.Control.PreRenderRecursiveInternal() +77
System.Web.UI.Control.PreRenderRecursiveInternal() +161
System.Web.UI.Control.PreRenderRecursiveInternal() +161
System.Web.UI.Control.PreRenderRecursiveInternal() +161
System.Web.UI.Control.PreRenderRecursiveInternal() +161
System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +1360

Don’t know what’s causing it though. On another site it works just fine.

Reply to this comment
9:50 am - August 13, 2007

There’s not very much code in HighslideManager.OnPreRender. I’m not sure what would be doing that.

Could you send me the code for that page, so I can step through it in the debugger?

Reply to this comment
9:53 am - August 13, 2007

I just found out when I get the nullreference exception.
It happens when you use the control on a child page with a Master Page in ASP.NET 2.0

Any ideas?

Reply to this comment
Riley Subscribed to followup comments
3:29 am - August 16, 2007

hm.. ive tryed to download it from here and the site it originally came from but it doesn’t work :(..

Reply to this comment
3:32 am - August 16, 2007

What do you mean it doesn’t work?
You’ll need this file:
http://encosia.com/controls/highslide/HighslideJS.NET.zip

You will have to create a highslide directory in your web application’s root directory as well.

Reply to this comment
Riley Subscribed to followup comments
4:59 am - August 16, 2007

nope. still doesnt work. it just has 2 files, one is a ‘dll’ and the other is a ‘pdb’

Reply to this comment
Timothy Subscribed to followup comments
5:13 am - August 16, 2007

Yes, and the DLL file is all you need, you add a reference to it from your project. If you’re using Visual Web Developer (Express version is free) or Visual Studio that’s very easy.

Then you can addd the controls to your page,
have you gotten this far? And if so, do you get any excpetions?

Reply to this comment
6:52 am - August 16, 2007

Timothy’s right, Riley. All you need to do is reference that DLL in your page and then you can start using the Highslide JS .NET controls in your page. Assuming you’ve made the reference to the DLL already, add this code to the top of your .aspx:

<%@ Register Assembly="HighslideImage" Namespace="Encosia" TagPrefix="encosia" %>

Then, you can declare the Manager and Images just like in my sample code above.

If you prefer the design mode editor, you can add the DLL to your toolbox and then drag/drop the controls onto your page. Visual Studio will automatically handle the registration for you, in that scenario.

Hope that helps.

Reply to this comment
rasul Subscribed to followup comments
10:20 am - August 18, 2007

Hi, thanks it’s a awesome tools, but i have a problem, when i want to use this dll and add the scripts needed for using that,showing a “loading” text on my thumbnail pic and after clicking twice it shows my image on the onother page? anybody knows why? help me, thanks in advanced

Reply to this comment
12:44 pm - August 18, 2007

When you say that you add the scripts needed, do you mean you’re manually referencing some of the Highslide JS scripts? If so, drop those. The HighslideManager control embeds all that you need and handles everything automatically for you.

Reply to this comment
2:10 pm - August 20, 2007

Hey Dave,

I tried to implement it in an existing site that uses the HttpHandler method discussed above. I set the handler to serve a thumbnail for the ImageUrl, and a full size image for the FullImageUrl.

When I click the image, I get the loading indicator, but that’s it. No JS error, no full size image loads, no HS window opens at all. I use this handler in another page, so I’m sure the code is not in error here.

Any ideas?

Reply to this comment
3:07 pm - August 20, 2007

NVM….path issue. Works now :)

Reply to this comment
martin Subscribed to followup comments
5:53 am - September 6, 2007

Very nice, works great in a repeater…
Any chance of caption allowing html? Either ITemplate or just string html- “AB”…
I’d like to put in a close button (as in http://vikjavev.no/highslide/example-slideshow-captions.html)

Reply to this comment
11:19 am - September 6, 2007

I haven’t tried passing HTML in to the caption property before. That might work. You’d just need a link/button in your caption that called hs.close(this) in its OnClick.

Reply to this comment
martin Subscribed to followup comments
6:53 am - September 13, 2007

BTW you’re using 3.2.1, it’s not up to 3.2.10 yet :)
Torstein fixed some bugs I was experiencing in 3.2.6 (latest is 3.2.7) – when you have time can you upgrade to use the latest? Thanks

Reply to this comment
10:46 am - September 13, 2007

I updated the download with a version built against 3.2.7. It should work, but I didn’t get a chance to test it. Let me know if you have any trouble.

Reply to this comment
martin Subscribed to followup comments
4:26 am - September 14, 2007

looks good – my only comment is that the highslide credit shows up (showCredits: true); you had turned it off before.

Reply to this comment
12:08 pm - September 14, 2007

Oops, sorry. The download is updated with a version that fixes that.

Reply to this comment
martin Subscribed to followup comments
8:20 am - September 17, 2007

i ran into a conflict between HighslideManager and the asp ajax ScriptManager with localization enabled.

The script block gets reused (Page.ClientScript.RegisterClientScriptBlock) so the scriptmanager __cultureinfo gets appended to the hs.registerOverlay. There is a javascript error and highslide can stop working.

The solution is easy- change the RegisterClientscriptBlock for hs.registerOverlay by appending a “;” to terminate the javascript line, so any bits of js that get appended are okay.

Reply to this comment
2:09 pm - September 17, 2007

I just uploaded a new version that should correct that problem. Thanks for pointing it out to me.

Reply to this comment
9:52 am - September 17, 2007

Hi, I would change text language in control bar (NEXT-> AVANTI, PREV -> INDIETRO, CLOSE -> CHIUDI

How can I achieve this?

TIA
Danilo – Padova

Reply to this comment
2:12 pm - September 17, 2007

For the time being, the best way to use a custom control bar is to create your own control bar div, then call hs.registerOverlay() manually to use the custom control bar.

I plan to allow easier customization of the control bar, but it won’t be in the immediate future.

Reply to this comment
Datman Subscribed to followup comments
3:25 pm - September 20, 2007

Try to add the control to the toolbox in vs2005 but all I get is a message telling me that highslideimage.dll is not a .net component.

Anyone else had this problem or any ideas on how to sort the problem.

Reply to this comment
3:36 pm - September 20, 2007

I just tried adding it to my toolbox in 2005 by dragging and dropping the DLL onto the toolbox pane. That worked for me.

Try downloading the file again, just in case it got corrupted somehow during the download.

Reply to this comment
Stefan
2:50 pm - September 28, 2007

Hi, first off, awesome control. I used the orignal javascript version before but yours is just way easier to work with.

The problem I’m having is I’m rewriting some of my URLs for example the page ~/ViewPost.aspx?post=test is rewriting to ~/View/Test.aspx.

The control works fine on pages I don’t rewrite but and soon as I use the rewritten URL the control no longer “Pops up” but just redirects to the full size image. The only thing I can think of is that the reference to the embeded javascript is getting messed up but I have no idea how to fix it.

Any ideas?

Regards
Stefan

Reply to this comment
4:19 pm - September 28, 2007

If you can, exclude WebResource.axd from rewriting.

Reply to this comment
muhanad YOUNIS
2:49 pm - October 8, 2007

hi there;
thank you very much for this efforts.
here i have a problem that i’m not able to bind the photos with highslid inside datalist. when i show the themp. of the photos i get an excetiopn that says “the photo id that is requested is wrong” and when i debug the system, i found out that handler.ashx is throwing that exception, because the photo id that is passed from the highsilde is wrong. here is my line of code.
<encosia:HighslideImage runat=”server” ImageUrl=’Handler.ashx?PhotoID= &Size=S’ FullImageURL=’Handler.ashx?PhotoID= Size=L’ CssClass=”photo_198″ style=”border:4px solid white” />

the ıd that is sent to the handler is ” <% ” and that is wrong. so how i can solve the problem so the highslide show will request the right id not the server tages!!!
thanks in advanse

Reply to this comment
5:22 pm - October 8, 2007

I don’t think that came through how you intended. I’m assuming you have some inline script code where the spaces are after PhotoID?

You can use HTML pre tags to post code here.

Reply to this comment
muhanad YOUNIS
3:57 pm - October 9, 2007

thank you for your replay; what ever i have done i was not able to do it right. below is the orjinal code that i’m trying to fix to use highslide
a href=’Details.aspx?AlbumID=&Page=’>
<img src=”Handler.ashx?PhotoID=&Size=S” class=”photo_198″ style=”border:4px solid white” alt=’Thumbnail of Photo Number ‘ />

and here is what i have done;

<encosia:HighslideImage ID=”HighslideImage1″ runat=”server” Caption=”slm” CssClass=”photo_198″ FullImageURL=’Handler.ashx?PhotoID=’
ImageUrl=’Handler.ashx?PhotoID=’ />

the point here that i have a handler that return the image url and the id. but when i use highslide image i found out that the handler is not recieving the needed argument! ” <%” is sent to the handler. and that means that the highside is not excepting the binding!.
i hope that we can find a solution for that so it will help you to improve the highslide. thanks again for your help and waiting for your replay

Reply to this comment
3:59 pm - October 9, 2007

sory the line is like this
ImageUrl=’Handler.ashx?PhotoID=’
comment is not excepting “<%#”. :D

Reply to this comment
4:00 pm - October 9, 2007

ImageUrl=’Handler.ashx?PhotoID= Eval(“PhotoID”)&Size=S ‘

i removed the server tags

Reply to this comment
1:04 am - November 18, 2007

Hi! How to add photos dynamically from code?
Will it be aviable in next versions? I mean somethink like that:

Encosia.HighslideImage hsI = new Encosia.HighslideImage();
hsI.Add(“path1″, “path2″, “caption”);

Reply to this comment
9:58 am - November 19, 2007

Something like this should work:

Encosia.HighslideImage hsl = new Encosia.HighslideImage();
 
hsl.ImageURL = "thumbnail.jpg";
hsl.FullImageURL = "full.jpg";
hsl.Caption = "My Picture";
 
Page.Controls.Add(hsl);
Reply to this comment
1:23 am - November 18, 2007

Also, it would be good to add an opportunity to do databinding to SqlDataSource and XMLDataSource controls. ;-)

Reply to this comment
10:01 am - November 19, 2007

DataBinding is beyond the scope of this control for the foreseeable future. However, it does work in a DataBound, templated control (Repeater, DataList, GridView, etc).

Reply to this comment
10:54 am - December 19, 2007

This control is really awesome. Although I like the idea of DataBinding for this control I have to admit, that my use in a GridView fulfills all my needs atm.
Thanks for the great work :)

Reply to this comment
Chris Haines
5:54 am - December 21, 2007

Hey great control. Any way we can

(1) Change the “Highslide JS” alt tag
(2) Change the “Click to enlarge” title tag
(3) With javascript turned off, force the link to the full-sized image to open in a new window?

Thanks

Chris

Reply to this comment
9:31 am - December 24, 2007

1. You can do that by putting this JavaScript code anywhere on your page:

hs.showCredits = 0;

2. That’s currently hard coded, but I’ll add a property to set it declaratively in the next build.

3. That’s a good idea. I’ll try to add that in as an option in the next build.

Reply to this comment
Chris Haines
12:17 pm - January 7, 2008

Thanks Dave

Any idea when the next build will be due?

Chris

Reply to this comment
10:09 am - January 8, 2008

I’ll try to get one out this week if I can.

Reply to this comment
Netanel Lev Subscribed to followup comments
11:51 am - January 23, 2008

Hi, Great Control!
Is there any way to rotate the images?

Reply to this comment
1:19 pm - January 23, 2008

Not currently.

Do you want to rotate the image in a sequence or actually rotate it around an axis?

Reply to this comment
Chris Haines
5:52 am - February 13, 2008

Hi Dave

We’re having some problems with Operation Aborted in IE. Basically if you click to expand an image before the DOM has finished loading, it causes this serious IE error that then redirects the user to a blank page.

I believe this is a well-known issue with IE if any nodes are manipulated before the DOM has finished loading.

Have you come accross this and got any ideas for work-arounds?

Reply to this comment
Chris Haines
6:04 am - February 13, 2008

On this…. Waiting for window.onload is a safe bet. However there are times when that is not good enough. The DOM itself is ready for manipulation before window.onload, because window.onload waits for all binary content to also be downloaded… i.e. images et al.

This might be of interest to you …. http://dean.edwards.name/weblog/2005/09/busted/

Reply to this comment
Chris Haines
6:05 am - February 13, 2008

Another issue we’re having is cached image sizes. This is a known issue for IE apparently…

http://vikjavev.no/highslide/forum/viewtopic.php?t=791&highlight=flush

However, the work around involves editing the javascript code – which isn’t possible with the encapsulated dll…

Reply to this comment
guenter Subscribed to followup comments
12:06 pm - April 18, 2008

Hi,
I hope i´ve understand your solve right. (Your link) This solves the problem only for yourself.

But also all users of your website have the same Problem! Once the user load the site, the it remembering image-size.

So you can solve the problem for all user and yourself too:

IE dont remember the image-size if you give the link to the picture a “?” and a random number at the end, i.e. mypicture.jpg?…
This number must always differ! So, the best way is to make it with a timestep:

Change your site-extension from *.htm to *.php, write in the htm-source this php-snippet:


You can also code it in javascript.

Reply to this comment
guenter Subscribed to followup comments
1:03 pm - April 18, 2008

$timestamp = time();

so you have to make sure there is always a different number at the end of the link

i.e.: full.jpg?var=$timestamp…

Reply to this comment
Chris Haines
9:36 am - February 13, 2008

One more question — is it possible to change the way the large images display, i.e. to not show an expanding image growing, but rather just immediately show the larger image?

The reason for this is if the smaller image isn’t exactly the same cut / ratio as the larger image, it looks a bit strange when it expands.

Reply to this comment
10:44 am - February 13, 2008

Chris, thanks for the feedback. I’m traveling this week, but I’ll take a look at those issues ASAP when I get back in town.

Reply to this comment
10:59 am - March 19, 2008

I’m using this control in a repeater or datagrid. If number of images is low (about 20 or less) it works fine; but if number of images is higher I have some problems in IE7 (only IE7)

Anyone has problems with IE7 in a page with large number of pictures?

Bye

Luca
Italy

Reply to this comment
5:41 pm - March 21, 2008

What kind of problem are you having? Slowness? A particular error?

Reply to this comment
Chris Haines
4:54 am - April 1, 2008

I also have experienced slowness with large numbers of image

I think this is (a) due to the browser having to load large number of images! and (b) due to memory leaks… check out your memory usage as you navigate through the site

Reply to this comment
4:13 am - April 1, 2008

i got a problem, i use iframe to show pm msg form in a popup way, when the user sumited ,”msg send !”msg shown in the frame,and the highslide popup frame can not closed automatically,(it should be.)and ,when the user click the close tag on the top of highslide popup frame,it closed,but, when u click the same tag which popup the frame cantain pm msg form again, guess what? the “msg send !”msg screen still there!!
i think u guys get what i meant already, i don’t know enough English too make myself clear,but , for u clever guys,maybe it’s enough clear.
help me! pal . if and one nicely give me some help,please contact me @ captaincoo@live.cn

Reply to this comment
Justin
3:09 pm - April 29, 2008

Hey Dave, thanks very much for putting this component together, looks great so far.

The only problem I’m having is that when I put it within an update panel, clicking a thumbnail opens the full image as if you specified the image’s URL in the address bar (e.g. browser navigates to http://www.domain.com/myimage.jpg) instead of performing the normal Highslide expand effect. When I take the control out of the update panel, everything works as expected.

Do you know if there’s a way to include your control within an update panel?

Thanks,
Justin

Reply to this comment
3:52 pm - April 29, 2008

One of my test cases includes using it in an UpdatePanel, and is working. So, it’s definitely doable.

The behavior you’re seeing usually indicates that the Highslide script isn’t being loaded or is being altered. If you have FireBug, check the net tab and make sure that the WebResource isn’t being blocked or interfered with somehow.

If you want to email me a representative sample, I’ll take a look at it.

Reply to this comment
Justin
3:37 am - April 30, 2008

Thanks for the tip Dave, that helped.

The update panel I’m including the component in isn’t visible by default so I don’t think script was being loaded properly once the panel’s visibility property got set to true. Everything started working as expected once I moved the HighslideManager element outside the update panel.

I also tried registering the Highslide script with the script manager to see if that would have the same affect, to no avail. I pointed the script manager to the HighslideImage assembly and all of the possible script names I could find (e.g. “highslide.js”, “highslide.packed.js”, “highslide-full.js”, etc.) but was never able to find the right combo.

If it’s not too much trouble, would you mind letting me know the name of the script you’ve compiled into the assembly or better yet, how I might be able to find it in Firebug?

Thanks again for your help and your terrific control!

Justin

Reply to this comment
10:23 am - May 2, 2008

The embedded script name is highslide.min.js, but you’ll see it come down in a WebResource.axd call. It’ll be the one that begins with “var hs={“.

I’d suggest placing the HighslideManager outside the UpdatePanel. It and the HighslideImages don’t need to be in any particular proximity to each other. The way the Highslide script works, it doesn’t need to be injected by the same response that makes the images visible.

Reply to this comment
Rasul Subscribed to followup comments
5:05 am - June 7, 2008

Hi I want to know why it’s impossible to use your beautiful component with a tag like:
‘< %# Eval("Filename", "Gallery/{0}") %>‘
could you help me?

Reply to this comment
1:03 pm - June 7, 2008

You can use it in an ITemplated databound control. A very basic Repeater sample, for example:

protected void Page_Load(object sender, EventArgs e)
{
  Hashtable imgs = new Hashtable();
 
  imgs.Add("~/img/encosia-thumb.jpg", "~/img/encosia-full.jpg");
  imgs.Add("~/img/highslide-usage-thumb.jpg", "~/img/highslide-usage-full.jpg");
 
  Images.DataSource = imgs;
  Images.DataBind();
}
<asp:Repeater runat="server" ID="Images">
  <ItemTemplate>
    <encosia:HighslideImage runat="server" 
      ImageUrl='<%# Eval("Key") %>'
      FullImageURL='<%# Eval("Value") %>' />
  </ItemTemplate>    
</asp:Repeater>
Reply to this comment
Rasul Subscribed to followup comments
3:14 pm - June 7, 2008

Sorry i think that i forgor the highslide manger, but i wanna know that could you share the assembly, is there any way to change the control bar style?

Reply to this comment
Mario Subscribed to followup comments
2:14 am - July 17, 2008

Hey there,

Im using your control, and it working fine.
I have a masterpage, and i added the runat=server to my head-tag (like you suggested).
However my pages doesn’t show the title anymore (now i have the “Untitled Page” on each page)

Is this an know error? Do you know any workaround this?

my head tag now

Behind The Border

Thank you,

Reply to this comment
Mario Subscribed to followup comments
2:15 am - July 17, 2008

Behind The Border

Reply to this comment
Mario Subscribed to followup comments
2:16 am - July 17, 2008

Sorry tag didn’t paste correctly, let me know if you want to see my head tag.

Reply to this comment
Mario Subscribed to followup comments
2:23 am - July 17, 2008

Oke found the problem, have to specify on each page in the masterpage-tag the Title again.

Reply to this comment
10:57 am - July 17, 2008

That sounds like the issue that comes up when the Master’s <head> doesn’t have a runat=”server” attribute. Without that, if the control is located in a content page, it can’t register Highslide’s CSS on the Master.

So, you might be able to just add that and fix it without having to re-add title tags on the content pages.

Reply to this comment
Doug Subscribed to followup comments
1:34 pm - August 30, 2008

This control is great! How do I go about centering the full image in the browser?

TIA

Reply to this comment
eduard
3:59 pm - September 10, 2008

Hi everyone. I am trying to get the same control load few images. Sort of an array of images. Does anyone know? Thanks

Reply to this comment
7:09 am - September 23, 2008

Has anybody been able to get this working with the ASP.NET MVC framework?

Reply to this comment
7:52 am - September 23, 2008

I haven’t tried it, but it shouldn’t be entirely impossible for it to work with MVC. It doesn’t require ASP.NET AJAX and it doesn’t rely on the postback model at all.

Did you try it with ASP.NET MVC and have trouble?

Reply to this comment
7:59 am - September 23, 2008

(Something wrong with the comments, not seeing what the mail described… anyway…)

While using it in a MVC view, the images are simply downloaded when you click on them… I’ll check it again…

Reply to this comment
8:03 am - September 23, 2008

(Caching)

That makes sense. I’m registering the script using a method of the “Page”, which wouldn’t be available in MVC.

I’m planning on updating it with the v4.0 Highslide JS ASAP anyway. I’ll address MVC support at the same time. Shouldn’t be difficult.

Reply to this comment
10:17 am - October 8, 2008

This is the exactly what I needed. Thanks so much to you and Torstein for this awesome control!

Reply to this comment
Ron
12:12 am - November 9, 2008

Hi,
Can I use this control to open a aspx on top of the page? like the modal dialog in ajax toolkit?
Any sample to opening html (or any other) page?

Thanks,
Ron

Reply to this comment
9:35 pm - November 17, 2008

Highslide does offer that sort of functionality, but I haven’t included a .NET interface to it (yet).

Reply to this comment
5:19 pm - November 24, 2008

I have this working a treat (thanks!), but I want to use a different icon set for the controls. I know the CSS I need to use from a previous implementation of HS but I’m having trouble knowing exactly how to get it to work with this control.

I’ve used RenderScriptInPlace=”false” which results in the to the CSS file being output in the head, but as the very last thing in the head. This means the .controlbar styles in it override mine in a CSS file called before it.

If I put them in a block in the body of the page it works, but that of course is not good practice.

I have tried changing the specificity of my selectors by using the ID of a containing div, e.g.

#frame .controlbar

but that’s not making a difference.

Do you have an example of how to do it?

Thanks

Reply to this comment
1:20 pm - November 30, 2008

I just added a property, IncludeDefaultCSS, to the HighslideManager class to prevent it from registering the default CSS include. If you set that to false, you can provide your own, custom CSS without it interfering.

Reply to this comment
Rob Kittredge
5:15 pm - December 8, 2008

Hi, I just downloaded the new version that is supposed to have the IncludeDefaultCSS property, but it does not. After further investigation the dll that is included in the new file still says 7.2 not 7.3?

Thank you for your work on this excellent tool!

Reply to this comment
5:29 pm - December 8, 2008

The version linked above is correct now. Sorry about that. Thanks for making me aware of it.

Reply to this comment
10:13 am - December 14, 2008

Thanks for resolving my last issue in v7.3, now I have another one for you.

The link to the stylesheet is something like

… &t= …

Unfortunately the ampersand causes the page to fail XHTML validation. Could it be changed to

… &amp;t= …

which is how other resource libraries are loaded by asp.net by the looks of things?

Thanks!

Huw

Reply to this comment
Huw Millington
10:17 am - December 14, 2008

I’m making a right mess of this!

I’ll start again:

Could the ampoersand in the call to the CSS

 

be changed to

 ... &t= ...
Reply to this comment
dachir
8:35 am - January 12, 2009

do the control work only on image? what about form, html ajex and so on?

Reply to this comment
9:34 am - January 12, 2009

Currently, just images.

Reply to this comment
dachir
2:26 pm - January 12, 2009

just to bad.

Reply to this comment
Stefan Krüger Subscribed to followup comments
9:34 am - January 18, 2009

Phantastic control!

Please allow me two questions:

– how can i change the controlbar text (previous next…) to german

– is it possible to create a semi-transparent background behind the enlarged image?

Thanks
Stefan

Reply to this comment
4:59 pm - January 20, 2009

Hi,

nice control to use highslide, but I have one problem with it. I am trying to use it “programmatically”, but it should be with using rendercontrol. RenderControl on HighslideManager just went OK, but when I try on HighslideImage I got this error:

[NullReferenceException: Object reference not set to an instance of an object.]
Encosia.HighslideImage.Render(HtmlTextWriter writer) +22
System.Web.UI.Control.RenderControlInternal(HtmlTextWriter writer, ControlAdapter adapter) +27
System.Web.UI.Control.RenderControl(HtmlTextWriter writer, ControlAdapter adapter) +99
System.Web.UI.Control.RenderControl(HtmlTextWriter writer) +25
Render.Page_Load(Object sender, EventArgs e) in C:\inetpub\wwwroot\zju3.com\Render.aspx.vb:62
System.Web.UI.Control.OnLoad(EventArgs e) +99
System.Web.UI.Control.LoadRecursive() +50
System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +627

This is how I try to render control:

Dim eimg As New Encosia.HighslideImage
eimg.ID = “ImageE”
eimg.ImageUrl = “~/Thumb_2.jpg”
eimg.FullImageURL = “~/2.jpg”
eimg.Caption = “Naslov”
eimg.AlternateText = “Text”

Dim SB As New StringBuilder()
Dim SW As New StringWriter(SB)
Dim htmlTW As New HtmlTextWriter(SW)
eimg.RenderControl(htmlTW)

Looking forward to hearing from you and thank you in advance.

Reply to this comment
5:13 pm - January 20, 2009

I’m able to reproduce that error. The reason is because the control uses the instance of the Page on which it resides to call ResolveUrl(). When you imperatively render it, the control doesn’t have a Page instance within that context.

I might be able to rework that bit, but I still don’t think it would work if you’re rendering the controls to strings. The HighslideManager needs to be able to register JS and CSS, which doesn’t happen in its Render event (nor is part of its directly rendered output).

Reply to this comment
5:07 am - January 21, 2009

Thanks.
The reason why I want to render to string is that i am using REGEX match and then Replace. For example I have this text string “This is my photo [hgal:2] from somewhere”, then I want to make replacement with eimg control for [hgal:2] (above code) … of course in real example there are many replacements. That is why I am using REGEX match.

CODE:
Public Shared ReadOnly REGEX As New Regex(“\[hgal:(.*?)\]”, RegexOptions.Compiled Or RegexOptions.IgnoreCase)

Public Shared Sub ReRender(ByVal txt As String)
If Not txt.Contains(“[hgal:”) Then
Exit Sub
End If

For Each match As Match In REGEX.Matches(txt)
Dim photoId As String = match.Groups(1).Value.Trim()
Dim embed As String = RenderHtml(photoId)
txt = txt.Replace(match.Groups(0).Value, embed)
Next
End Sub

Please note RenderHtml calls rendercontrol function.

Any other possible way to do this kind of replacement using your control?

Reply to this comment
12:52 am - February 26, 2009

I look forward to using this control. Something strange on my implementation, or maybe I am missing something basic. When using the code as you suggest OutlineType=”RoundedWhite” or removing this tag, when you click on the image to zoom, the image hangs with a loading image. However, when I put =beveled the control works fine.

Am I missing something? What are the options for the OutlineType ? Is this an issue on how I am using the control?

Thank you
pw

Reply to this comment
12:59 am - February 26, 2009

That’s strange. You should only be presented with the four valid OutlineTypes (Beveled, DropShadow, OuterGlow, and RoundedWhite) as options there.

It retrieves those outline images from the assembly using a WebResource.axd handler. Can you check in Firebug’s net tab (or something like it) and make sure there aren’t any 40x errors related to the WebResource.axd requests?

Reply to this comment
3:29 am - February 26, 2009

Good day sir,

First off I would like to say thanks to this amazing control! Tried using it today, I added the images dynamically by doing a recursive directory search on my images folder and parsed the file individually, I pasted the code behind that I created in doing this, one thing dear sir, is there a way of displaying the full size of the image? for now I could see that its constricted to a certain size.
Thanks again.

Sincerely,
gbert

Private Sub GetImages()
Dim files() As String
Dim filethumb() As String
Dim i As Integer
files = Directory.GetFiles(Server.MapPath(“~/medrecord/100016″), “L_*.jpg”, SearchOption.AllDirectories)
filethumb = Directory.GetFiles(Server.MapPath(“~/medrecord/100016″), “sm_*.jpg”, SearchOption.AllDirectories)

For i = 0 To files.Length – 1
Dim lbl As New Label

Dim TrimPath As String = files(i)
Dim sTrimPath As String = filethumb(i)
TrimPath = TrimPath.Substring(TrimPath.IndexOf(“medrecord”)).Replace(“\”, “/”)
sTrimPath = sTrimPath.Substring(sTrimPath.IndexOf(“medrecord”)).Replace(“\”, “/”)
Dim s As String = “

lbl.Text = s ‘the string is displayed as HTML on the panel on the web form named PnlThumbs
PnlThumbs.Controls.Add(lbl)
Next

End Sub

Reply to this comment
4:59 pm - February 26, 2009

I’m not sure that I understand what you’re asking. If you’re looking for automatic thumbnailing, that’s outside of the scope of this control. You could do that fairly easily with an ashx handler though.

Reply to this comment
8:53 pm - February 26, 2009

thanks for the fast reply sir! Concerning my issue, I was just wondering if I could make it display the actual size of the image (w/c is at 1277x1755dpi), as I could see now, the size of the pop up image is restricted by the browser’s window (viewport) or at width:400 (I think). Is there a way to override this behavior?
Thanks again sir for giving the time to answer my post.

sincerely,
gbert

Reply to this comment
Stefan Krüger Subscribed to followup comments
4:22 am - February 26, 2009

I asked some weeks ago, if it would be possible to change the (hover) texts in the enlarged images (previous next and so on) to something else (in my case to german)

Thank you for your help
Stefan

Reply to this comment
4:57 pm - February 26, 2009

I don’t believe so (at least not easily) currently, but something that I’m working on will allow you to customize that soon.

Reply to this comment
7:27 pm - February 26, 2009

Another question. I am able to get the beveled outlinetype to work the way we want. However, the image covers the next/previous/close icons in the upper right of the image. Is there a setting we need to set to have the icons on top of the image? Maybe we need to resize the image within the control?

I am using the controlbar=”True”. It appears weather this is true or false, I get the same results.

Thank you
Patrick

Reply to this comment
8:07 pm - February 26, 2009

This is going to be related to the same issue that I emailed you about (WebResource.axd resulting in a 404 on your server).

Reply to this comment
Bubba
8:26 pm - March 5, 2009

I am a .NET programmer – trying to use HighSlide without many problems. Thought about trying your control.

We are not using HighSlide to display images – but to contain regular asp.net controls that appear to pop up.

Have you tried your .NET control with this?

Thanks

Bubba

Reply to this comment
12:18 am - March 6, 2009

Unfortunately, not yet. Just images.

Reply to this comment
4:33 am - March 10, 2009

hi,
iam using highslide control for displaying images in datalist control.Iam generating thumbnails dynamically and setting path for imageurl and for fullimageurl iam displaying original image. But the problem is thumnails and not displaying in datalist. But in zooming original image is displaying. Pls can u tell me where is the problem?

code: DataList1_ItemDataBound
HighslideImage img = (HighslideImage)e.Item.FindControl(“img”);
img.FullImageURL = img.FullImageURL = ConfigurationManager.AppSettings[“ImagePath”] + img.ImageUrl.ToString();
img.ImageUrl = (“Thumbnail.aspx?name=”, ConfigurationManager.AppSettings[“ImagePath”] + img.ImageUrl.ToString());

where “imagepath” is a path where iam storing images within a network

<encosia:HighslideImage ID=”imgDownload” runat=”server” ImageUrl=” />

Thanks in advance

joohitha

Reply to this comment
9:07 am - March 10, 2009

I believe your thumbnailer will need to be an ASHX handler for that to work, not an ASPX page.

Reply to this comment
alen
5:20 am - March 11, 2009

hi,

nice control to use highslide, but I have one problem.Instead of using zoomout in ur control can i write my own java script to code for zoom out. like on mouseout event can i write javascipt code for zoomout.

function zoomout()
{
HighslideImage.style.width=100px;
HighslideImage.style.height=100px;
}

thks
alen

Reply to this comment
not2cre8ive Subscribed to followup comments
10:24 pm - March 11, 2009

Great control!

Hopefully just a simple question…

I was just wondering if you had a list of descriptions for all the properties of HighslideManager and HighslideImage in the current version.

Thanks.

Reply to this comment
8:46 pm - March 15, 2009

The properties described above are kept up to date. Keep in mind that the HighslideImage control additionally has all of the properties of the usual asp:Image control. Those are unchanged in HighslideImage.

Reply to this comment
prakash Subscribed to followup comments
2:56 am - March 12, 2009

hi,

nice control to use highslide, but I have one problem.How do i zoomout the zoomed in images on click on any part of the webpage…

Presently if we click on the zoomed image only the image gets zoomed out..

Reply to this comment
8:44 pm - March 15, 2009

By default, that’s not how Highslide works. You could write some custom JavaScript to trigger the appropriate event when clicking in other elements, but that’s beyond the scope of this control.

Reply to this comment
karla
4:47 am - March 12, 2009

hi,

great control

Reply to this comment
alex
6:55 am - March 18, 2009

Hi! I have this problem:

in your example the Page Language is “C#” and it works all correctly.
But, my page language is “VB” and I try the example and it doesn’t works.

Could you show the same example in VB? please…
or writing me how can I do?

I try several hours but, nothing!

Please help me!

Reply to this comment
Dave Subscribed to followup comments
12:34 pm - March 30, 2009

Love the control!

My question is, is it currently possible or will future releases support the positioning of the full sized image? Right now it appears directly over the image that was clicked on.

If have a colum of images along the left side of the page and would like the full sized image to be offset to the right of the thumbnails, thus keeping the thumnails visible.

Reply to this comment
3:11 am - April 8, 2009

Hi,
I have 0.7.3 version it doesn’t accepts data from database in Datagrid whereas tags shows image and images on loading fall behind the flash header footers please help i am using free version

Reply to this comment
3:13 am - April 8, 2009

one more thing there is an javascript error icon on my page that says this._form is null or not an object

Reply to this comment
Mike Clarke Subscribed to followup comments
9:33 am - June 6, 2009

I am evaluating the Highslide .NET component on my photo gallery website and what I want to know is how implement a facility to update an image counter when an image is shown?

I have created a new usercontrol that inherits the Encosia.HighslideImage, but how to I override the click event so I can call my own method to update the image counter for the image that is being shown in the window?

Thanks in advance.

Reply to this comment
11:57 am - June 6, 2009

Since there isn’t an OnClick event firing on the server side, it’s not as simple as overriding an event. You could change how the client-side onclick renders, to fire a callback on enlargements, but I’m not sure that would be very reliable.

The easiest way to accomplish this might be to serve your images through an ASHX handler which updates a view counter every time it serves an image.

Reply to this comment
Mike Clarke Subscribed to followup comments
2:00 pm - June 6, 2009

Thanks for the comments Dave. I will try going down the ASHX route as this does sound the better solution.

Thanks again.

Reply to this comment
Mike Clarke Subscribed to followup comments
2:16 pm - June 6, 2009

Dave, just realised that using an ASHX handler is not going to work for me, unless I am missing something.

Basically, when I have got is a photo gallery and when the user selects an image and it is expanded I want to update the view count for that image.

If I used an ASHX handler to serve the image it will update the view counter for all images when the page loads rather than when the user clicks on the image.

I am looking to modify the highslide.js script to create an additional function to use AJAX and call a web service to perform the update of the view counter.

Regards.

Reply to this comment
3:07 pm - June 6, 2009

If you set the HighslideManager’s NumberOfImagesToPreload to 0 and only increment your counters when the ASHX serves the enlarged image, you should get an accurate count.

Reply to this comment
Mike Clarke Subscribed to followup comments
5:08 am - June 7, 2009

Hi I have just tried your suggestion and set NumberOfImagesToPreload to 0.

It is almost working now. Instead of a single image being served when I expand an image it is serving two images and updating the counter for both images.

When I put a breakpoint in the ASHX code it is doing it twice instead of the once as it should.

Is there anything else I need to do to stop this from happening?

Reply to this comment
Mike Clarke Subscribed to followup comments
6:10 am - June 7, 2009

Also, the handler stops getting served once all images are clicked on. It seems Highslide is caching the images once they have loaded.

I guess the only true way of updating the image count is by modifying the javascript code and create another expand method to do just this.

Reply to this comment
12:33 pm - June 7, 2009

I don’t think it’s going to be as robust as getting the handler working, but you could try using the base library’s onAfterExpand event to make a callback to your counter.

I haven’t included that part of Highslide in the embedded JavaScript though, to minimize the payload size. If you’d like me to compile a version of the control that includes the events portion of Highslide, I can.

Send me an email if so (I think we’re beyond the scope of the comments on the control itself here).

Reply to this comment
Dave Subscribed to followup comments
11:43 am - June 7, 2009

I’ve asked this question before. Will there be a future enhancement to control where the image is positioned? I’d really like to have the image centered in the middle of the page. Also a property to specify click vs hoverover.

Thanks

Reply to this comment
12:19 pm - June 7, 2009

Sorry, I missed your question earlier.

You could use the hs.marginLeft property of the base library to avoid the images positioning over your strip of thumbnails.

Reply to this comment
Dave Subscribed to followup comments
3:43 pm - June 7, 2009

I already got the full blown hs libray in production and doing the centering and onclick. I was just hoping for something “property settings” wise, to make life easier.

thanks

Reply to this comment
3:48 pm - June 7, 2009

You can still use the control to make everything else simple. Just include a script element like this somewhere after the embedded script reference that HighslideManager renders:

<script type="text/javascript">
     // Overrides Highslide JS .NET's default.
     hs.marginLeft = 200;
</script>
Reply to this comment
Mike Clarke Subscribed to followup comments
3:49 pm - June 7, 2009

Property settings are a good idea, but if it is possible to include events as well it would make the component a lot more flexible.

Looking forward to the next version :)

Regards.

Reply to this comment
Dave Subscribed to followup comments
5:55 pm - June 8, 2009

Dave, I’ll pay you to do that for me. How much. :-)

Reply to this comment
cengiz canturk Subscribed to followup comments
1:03 am - June 28, 2009

is there a way to change zoomed image TitleText?

Reply to this comment
11:48 am - June 28, 2009

The bit that says “Click to close image, click and drag to move. Use arrow keys for next and previous”?

Reply to this comment
cengiz canturk Subscribed to followup comments
12:41 pm - June 28, 2009

yes. i couldn’t find how can i change it.

Reply to this comment
12:51 pm - June 28, 2009

The control doesn’t directly expose that right now. What you can do is add this script somewhere toward the end of your page:

<script type="text/javascript">
  hs.lang.restoreTitle = 'Click to close image.';
</script>

And that title will be changed to “Click to close image.”

Reply to this comment
cengiz canturk Subscribed to followup comments
2:29 pm - June 28, 2009

thank u. i was looking for this.

Reply to this comment
3:49 am - July 11, 2009

Hey Dave

Was just wondering if you knew any reason why a vb version wouldn’t work? I’m just trying a basic implementation and its not showing the images (and I’m almost sure their references are correct)

If its not a vb problem do you have any idea what it could be?

Thanx

Reply to this comment
3:55 am - July 11, 2009

wait never mind got it to work

^_^”

Reply to this comment
2:30 pm - July 18, 2009

great script for .NET. Saved lots of js includes in page.

Reply to this comment
Zeeshan Hassan
3:53 am - July 21, 2009

hi! i’m an undergraduate student n i’m making my degree project in asp.net in which i wanna use this beautiful control to enlarge my asp:images. with sorry, i did’nt understand how to use this all. even i dont know from where to start.please help me or give me the links to the whole tutorial or video or html examples with full implementation. it’ll be realy appreciated.Thanks in advance

Reply to this comment
3:38 am - September 25, 2009

This is a very cool control. I do not seem to be able to get CenterEnlargements to work though. I do not want them centered on the image, but rather on the page. Thanks for your help.

Reply to this comment
deniz
6:05 pm - December 23, 2009

Hi EveryBody! I have a problem with “highslide”.
Error is;
‘javascript malfunction.hs undefined.’
for Exm. With this code.

hs.graphicsDir = ‘../highslide/graphics/';
hs.wrapperClassName = ‘wide-border';

best regards.

Reply to this comment
PashaMS Subscribed to followup comments
2:39 am - January 29, 2010

Hi Dave, i’ve tried CenterEnlargements but it doesn’t work. Could u help me? Below is my code , please give me your comments

Reply to this comment
maxcredits Subscribed to followup comments
10:59 pm - February 4, 2010

Is there anyway to implement the background dimming feature? I tried adding the dimmingOpacity and setting the .highslide.dimming background style to black but it doesn’t work.

Reply to this comment
Dries
10:06 pm - March 30, 2010

Hi, I am using your control and I love it.

But I did notice a problem. I set the image path in the code behind file like this:

HighslideImage1.FullImageURL = iVertisement.iVertisement.ImagePath1.Replace(“Thumbnails/”, “”)
HighslideImage1.ImageUrl = iVertisement.iVertisement.ImagePath1

This all works fine until I do a postback, then it turns into a normal image that I can not click on anymore. I will not expand.

Could it be that you are not saving the image path in viewstate so it gets lost on a postback?

Reply to this comment
9:30 am - April 2, 2010

That’s right; I’m not currently using a ViewState backing for the control’s properties.

Reply to this comment
Dries
2:25 pm - April 2, 2010

Ok, do you have any plans to start using viewstate for backing the controls properties? If not, do you see any other solution for my problem?

Reply to this comment
5:31 pm - April 4, 2010

I don’t have plans to add ViewState backing in the very next version. I’ll keep in mind for later.

Are you able to re-set those properties on each PostBack? That’s almost always a better way than relying on ViewState. That’s all ViewState is doing anyway, but bloats your rendered markup with all that information.

Reply to this comment
Dries
9:07 pm - April 7, 2010

The properties are comming from a database fields so I want to avoid reconnecting to the database on each postback. I will work around the problem by adding the properties to the ViewState manually. Thanks.

Reply to this comment
Rahul
5:02 pm - April 14, 2010

Hi,

I want to use it for my personal blog site. Do I have to purchase it? It is non-commercial site, like a simple blog site.

Please reply as soon as possible.
Thanks

Reply to this comment
5:07 pm - April 14, 2010

This is Torstein’s description of who qualifies for free usage:

Do you want to use Highslide for a personal website, a school site, your family’s photo album or a non-profit organisation? Then you don’t need the author’s permission, just go on and use Highslide.

So, you should be fine.

Reply to this comment
Rahul
3:06 pm - April 19, 2010

Thanks Dave !

I appreciate your quick response.

Reply to this comment
Andrew
12:06 pm - April 26, 2010

Dave,

Thank you for creating the control for the Highslide JS. It works great and was an easy transition from my previous thumbnail viewer.

I’d like to implement the gallery viewer that comes with Highslide JS. It doesn’t seem like your .NET control has that functionality (you seem to be using highslide.min.js, whereas I’d probably want to use highslide-with-gallery.js).

I’m kind of new at .NET, so I was wondering if you could share how you made the class library (how you made the DLL) for Highslide, and I can try and make it work with a gallery.

Thanks again and warm regards,
-Andrew

Reply to this comment
Andrew
10:39 am - April 29, 2010

I guess I found a workaround, but it doesn’t help with the ASP.Net control.

I used my photo gallery with just the JS for Highslide gallery, but I’d like to have the full version of highslide in the DLL. Maybe you could implement that in your next build?

I mean, your tool works really well, even though it’s just the highslide-min, but it would be nice to have the full functionality of highslide in your control.

Thanks,
-Andrew

Reply to this comment
Rajendra Prasad Panchati Subscribed to followup comments
1:43 am - May 21, 2010

Your control is working great for all the images placed in a site page but i think there is no flexibility of grouping the images to show like different galleries?

Reply to this comment
11:34 am - May 21, 2010

Since the HighslideImage control is just an enhanced asp:Image control, you can place it in a Repeater or ListView to create a gallery just like you would with regular ASP.NET controls. Building all of that into the HighslideImage control itself is beyond the scope of this project.

Reply to this comment
bary Subscribed to followup comments
7:16 am - May 27, 2010

Hello

First of all, thank you for this nice control.

the control works perfectly without routing, but with webform routing, there is a problem.

the problem is, when i click on the image, it does not open in full size, i have included
routes.Ignore(“{resource}.axd/{*pathInfo}”)

Is there any workground for this problem.

thnaks in advance

Reply to this comment
bary Subscribed to followup comments
9:53 am - May 27, 2010

hello once more

i found when the problem occures

if i have a route like this

routes.MapPageRoute(“Images”, “page”, “~/images.aspx”) everything is ok

but when i route like this

routes.MapPageRoute(“Images”, “page/subpage”, “~/images.aspx”) the image does not open in full size.

any idea?

Reply to this comment
10:39 am - May 27, 2010

Keep in mind that routing affects the path to your images. Make sure that the path you’re providing for FullImageURL is correct. It sounds like you may be specifying something like /page/Image1.jpg when you should give it /page/subpage/Image1.jpg for your routing configuration.

Reply to this comment
bary Subscribed to followup comments
10:49 am - May 27, 2010

I’m sure that the path is ok, the strange thing is that when i click on the small image for the first time, the image does not open in full size, after that when i hover the mouse over the small image, in the status bar of IE i see the path of the full image, and the path is correct, and when i click the small image for the second time, it opens the full size but not like expected, it open’s in the same page, ulike the usual way with popup.

thanks for your reply

Reply to this comment
11:36 am - May 27, 2010

That indicates that the control’s JavaScript isn’t being loaded. If you take a look at the network requests in something like Firebug, I think you’re going to find that a reference to WebResource.axd is failing due to the routing.

Reply to this comment
bary Subscribed to followup comments
11:52 am - May 27, 2010

You are right, in firebug when loading the page that contains the control, i get 500 Internal Server Error for WebResourse.axd, then where is the problem with routing, i’m ignouring routes for WebResource.axd like this
routes.Ignore(“{resource}.axd/{*pathInfo}”)

or the problem is the path for the image.

Reply to this comment
9:47 am - July 20, 2010

A useful control;

One feature that would be useful would be to make the HighslideImage URL properties browsable in the property pages (as I often mistype url’s!)

I think this could be done by adding

 _
Reply to this comment
9:51 am - July 20, 2010

Sorry – 3rd attempt, without the angle brackets!

EditorAttribute(GetType(System.Web.UI.Design.ImageUrlEditor), GetType(UITypeEditor))

Reply to this comment
9:48 am - July 20, 2010

Whoops – the code disappeared!
_

Reply to this comment
Marko Subscribed to followup comments
5:00 pm - November 1, 2010

Please,
I have one big problem with Highslide… In short it doesn’t work on my site that I am working on now… Problem is bigger because it does not work because CSS style that I have, this is just a guess but with foundations… I have tested on default empty ASP.NET web page and everything is working just fine!

I just need some hint where to look for the error and what to do…

Reply to this comment
Marko Subscribed to followup comments
5:05 pm - November 1, 2010

Sorry for another post, but I forgot to describe how it dos not work on my site… I thing that javascript is not lodaed because everything is displayed just right on the page, but when I click on thumbnail it displays itself in regular popup window and nothing more… Also if I set property RenderScriptsInPlace to true then I get “Loading” text above the image but nothing more then that… full image naver shows up…
so… please help… anybody…

Reply to this comment
John Subscribed to followup comments
5:13 am - November 2, 2010

Probably you are missing the tag on the page…

Reply to this comment
John Subscribed to followup comments
5:15 am - November 2, 2010

Probably you are missing tag on the page

Reply to this comment
And79 Subscribed to followup comments
5:11 am - December 9, 2010

I try to insert Highslide image script in Asp: calendar in cell DayRenderEventArgs,
I do how to?

Reply to this comment
Antegtvn Subscribed to followup comments
10:19 am - December 17, 2010

Is it a problem to run it in asp.net 4.0?

I ask because I have ASP.Net 4.0 on site that I made.

Everything seems to work fine, I can see the small images in gallery when I load a page with your control, even I can see the alt tags.

But when I click on some of the small images to became bigger it just start to “LOADING” the picture but it never upload the image to full size, even after few minutes.

I check it out, there is nothing wrong in my code, because when I use ordinary image asp.net control everything works fine (it open a picture, but on blank page)

So what seem to be a problem?

Reply to this comment
Antegtvn Subscribed to followup comments
1:17 pm - December 17, 2010

I looked in my code and everything seem to be fine or maybe I’m wrong?

The code of one of the picture is:

But I discover when I click on the image I have this:

javascript:;

Like there is no javascript function that is called (but I did’t block javascript at all). I do not understand why this is happening?

Reply to this comment
Antegtvn Subscribed to followup comments
10:34 am - December 18, 2010

OK, I have discover one more thing.

LOADING…. means in Highslide non existing image. Loading label keeps showing.

But I even try to use only javascript from Highslide on normal HTML hyperlinks and I still have the same problem. Again I see only Loading… but no image upload at all.

The funny part is when I click on image while it shows LOADING… all the time, the image is open on blank page in same window.

One more time I even less understand the problem.

Reply to this comment
Antegtvn Subscribed to followup comments
10:45 am - December 19, 2010

After few days I finally found what cause a problem.

I use UrlRewritingNet to overwrite my links for products pages in address bar.

When UrlRewritingNet is active the page do not load the full image and when it is inactive everything works fine.

Any advice about this problem?

Reply to this comment
8:32 pm - December 19, 2010

The rewriting is interfering with some of the control’s embedded resource URLs. Exempt *.axd from rewriting and that should fix it (specifically WebResource.axd and ScriptResource.axd, if your rewriter doesn’t allow wildcard exemptions).

Reply to this comment
Antegtvn Subscribed to followup comments
8:30 am - December 20, 2010

My rewriter allowed wildcard exemptions from begining.

But I checkout in files, or even in my source code of the page, but there is no mention there is any kind of .axd files.

Or am I wrong and it is generate automaticlly?

And have is the best whay to exempt *.axd from rewriting, I mean where should I put it in webconfig?

Reply to this comment
9:31 am - December 20, 2010

WebResource.axd and ScriptResource.axd are two of ASP.NET’s HTTP Handlers for serving assets (like the Highslide JS script, images, and CSS). They aren’t files that you’ll find on disk anywhere. But, if a URL rewriter intercepts the request for WebResource.axd and changes it, ASP.NET won’t recognize that the request should be routed to that HTTP Handler.

I’m not sure how exactly the configuration for the URL rewriter you’re using works, but you just need to make sure your rewrite condition doesn’t match any *.axd URLs.

Reply to this comment
alok Subscribed to followup comments
2:25 am - February 19, 2011

hi Dave,
everything is said about images.but can i use it to show another webpage in .net. ive used it to view the images. n im thinkin of using it to view webpages. how can that be done?

Reply to this comment
Elham Subscribed to followup comments
10:56 am - March 30, 2011

Hi, First Thanks alt for the great control!
I have a question though
why is it that I can’t get it work like your example in site. I mean when I set it to show me the fullImage on MouseOver, It works perfectly but when I set it to act on Click, It shows the image in another window and not in a modal kindda view.
what am I missing here?

Reply to this comment
5:12 pm - March 31, 2011

When Highslide images open in a new window, that usually indicates that the Highslide script didn’t get included correctly or that there’s a JavaScript error somewhere preventing it from parsing/loading. It’s strange that the MouseOver option would work, but Click would not though.

I just updated the control with Highslide JS 4.1.12, which includes a few compatibility fixes. Download the control again above and give this new version a try.

Reply to this comment
Elham Subscribed to followup comments
3:51 am - April 1, 2011

Dear Dave,
Thanks for your respond! I just tested the new version, it works fine in Firefox but the same problem remains with IE 8 and the thing is that the click open photos in new window without generating any error. I wonder why ….

Reply to this comment
11:07 am - April 1, 2011

There must be a JavaScript error on the page in IE. I don’t think there’s anything else that could cause it to work in some browsers, but not in IE. The error wouldn’t necessarily have to be near the Highslide code and wouldn’t have to be raised immediately when you click the Highslide image. It’s more likely an error earlier in the page that’s happening right as the page loads.

Reply to this comment
Elham Subscribed to followup comments
5:36 am - April 2, 2011

wanna hear the weirdest part? I tested it in IE 8 with the same sample page which I’ve downloaded here! I didn’t add any other line to it.

Reply to this comment
10:59 am - April 2, 2011

I just double checked the sample site in IE6-9 and it’s working in all of them for me. Is it possible that your security settings or an Internet security addon is blocking the script in IE?

Reply to this comment
Rodolphe Subscribed to followup comments
4:17 am - July 12, 2011

Hi Dave,

First of all, thank you for your great library, highslide had to be ported to .Net and you did a great job !
We were using your libary without anly problem on our developpement machines but when we deployed them on our production servers (Azure), we couldn’t use it anymore. It seems that your scripts included as webresources.axd returns 404 errors. After some searchs I found these two interesting posts.
http://stackoverflow.com/questions/4948517/does-anyone-know-a-workaround-for-the-windows-azure-webresource-axd-timezone-bug
and
http://www.nayyeri.net/webresource-axd-and-time-zone-issue

Indeed I’ve got the same symptoms, as I am GMT+2 and my servers are GMT time, my application is broken for 2 hours and then works properly….

Do you think there is a way to include a fix directly in the dll instead of having to fix it at the deployement state ?

Thanks !
Rodolphe

Reply to this comment
11:23 am - July 12, 2011

Hi Rodolphe,

I’ve been bitten by those timezone issues around WebResource.axd in the past myself, so I know your pain. Unfortunately, I’m not aware of a way to solve that problem within the control. I’m just making a call to GetWebResourceUrl() to get the appropriate resource URL, so I don’t have much control over the internals.

Reply to this comment
Kursat Konak Subscribed to followup comments
5:08 am - May 31, 2012

How can i disable dragging of images in gallery through highslide js .net? I couldn’t find a setting for it

Reply to this comment
Kursat Konak Subscribed to followup comments
5:40 am - May 31, 2012

hs.Expander.prototype.moveTo = function () {
return false;
}

adding this script at the end of body, solved my problem, thanks anyway

Reply to this comment
vig Subscribed to followup comments
9:32 am - September 19, 2014

Using

<%@ Register Assembly="HighslideImage" Namespace="Encosia" TagPrefix="encosia" %>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder2" Runat="Server">
                            <encosia:HighslideManager   ID="HighslideManager1" runat="server" OutlineType="RoundedWhite" MarginTop="100" AnchorPosition="TopLeft" BlockRightClick="True"  ExpandEvent="MouseOver" FadeInOut="true"/>
                            <encosia:HighslideImage     ID="imgPhoto1" runat="server" Caption="Image One" AlternateText=""
                            ImageUrl="~/Media/MailTemplates/mailimages/vauxhall/Adam Slam 1.JPG" Width="120px"  FullImageUrl="~/Media/MailTemplates/mailimages/vauxhall/Adam Slam 1_Large.JPG" />

which works great if placed at the start of the Content as above.
However when HighSlideManager and HighSlideImage are placed within a RadMultipage\RadViewpage then the Click event doesn’t. Any ideas please? Would be a shame to have to drop this bit of functionality.

Reply to this comment
9:39 am - September 19, 2014

I’m not very familiar with the inner workings of those Telerik controls, so I’m not sure exactly what might be going wrong there. The first thing I’d check is whether nesting the HighslideManager/Image inside them cause any JavaScript errors when the page loads, and then similarly look for JS errors when clicking on a HighslideImage.

If that doesn’t turn up anything, if you can send me a project that reproduces the issue (as simplified as possible), I’ll take a look at it and see if it’s something that can be fixed.

Reply to this comment

Leave a Reply

Basic HTML is allowed (e.g. <a>, <blockquote>, <strong>, <em>, etc).

To post formatted code blocks, use <pre lang="x">code</pre>, where x is asp, csharp, html, javascript, or xml.

s