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
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.
FadeInOut: A boolean which enables a fade effect while the image resizes.
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.
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.
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
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
Comments
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.
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.
Great Work !!! I am using your control and it works very nicely. Any chance of adding captions?
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).
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.
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.
This is a link to what the pages CSS should look like.
http://tmnew.totalmed.com/TotalPM.aspx
This is a link to the page with your control. As you can see the control works fine but the CSS is all tweaked.
http://tmnew.totalmed.com/TotalNotes.aspx
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.
I emailed an updated version to your GMail address. Give it a try and let me know if it solves your problem (it should).
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?
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.
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.
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:
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.
Thanks a bunch! I’ll never have to ask that question again :)
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
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.
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.
For that matter, you could also point the ImageURL to the thumbnailing ashx and FullImageURL to the full image.
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
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
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.
The new .dll removes the application path alotogether on my test site.
That’s strange. I changed my test code to this:
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?
Do you think to support the controlbar (NEXT/PREVIOUS/CLOSE) soon ?
I’ll put that on my list of things to do. It shouldn’t be very hard.
Thanks for the answer, do you have an estimated time to add this feature ?
It will probably be a couple of weeks.
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!
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.
I am using the free version. Thank you for your help!
Try adding:
STYLE=”z-index: -1;”
To whatever flash related element you can (its containing DIV, or whatever makes sense in your implementation).
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!
Great control, it just made my life happier!
When will it have support for “hs.expandHtml()” and other good stuff?
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.
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.
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?
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?
hm.. ive tryed to download it from here and the site it originally came from but it doesn’t work :(..
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.
nope. still doesnt work. it just has 2 files, one is a ‘dll’ and the other is a ‘pdb’
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?
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:
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.
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
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.
these codes that you write here:
http://wikipages.homelinux.org/index.php/Sandbox:codefordave
You don’t need to wrap the HighslideManager around the images like in that code. I don’t know if that could be causing you trouble or not, but try it structured like my usage example at the top of the page.
it says Expected ‘;’
Where? Build error? JavaScript error?
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?
NVM….path issue. Works now :)
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)
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.
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
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.
looks good - my only comment is that the highslide credit shows up (showCredits: true); you had turned it off before.
Oops, sorry. The download is updated with a version that fixes that.
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.
I just uploaded a new version that should correct that problem. Thanks for pointing it out to me.
Hi, I would change text language in control bar (NEXT-> AVANTI, PREV -> INDIETRO, CLOSE -> CHIUDI
How can I achieve this?
TIA
Danilo - Padova
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.
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.
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.
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
If you can, exclude WebResource.axd from rewriting.
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
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.
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
sory the line is like this
ImageUrl=’Handler.ashx?PhotoID=’
comment is not excepting “<%#”. :D
ImageUrl=’Handler.ashx?PhotoID= Eval(”PhotoID”)&Size=S ‘
i removed the server tags
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”);
Something like this should work:
Also, it would be good to add an opportunity to do databinding to SqlDataSource and XMLDataSource controls. ;-)
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).
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 :)
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
1. You can do that by putting this JavaScript code anywhere on your page:
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.
Thanks Dave
Any idea when the next build will be due?
Chris
I’ll try to get one out this week if I can.
Hi, Great Control!
Is there any way to rotate the images?
Not currently.
Do you want to rotate the image in a sequence or actually rotate it around an axis?
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?
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/
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…
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.
$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…
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.
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.
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
What kind of problem are you having? Slowness? A particular error?
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
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
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
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.
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
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.