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.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
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.
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.
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.
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?
You can use it in an ITemplated databound control. A very basic Repeater sample, for example:
<asp:Repeater runat="server" ID="Images"> <ItemTemplate> <encosia:HighslideImage runat="server" ImageUrl='<%# Eval("Key") %>' FullImageURL='<%# Eval("Value") %>' /> </ItemTemplate> </asp:Repeater>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?
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,
Behind The Border
Sorry tag didn’t paste correctly, let me know if you want to see my head tag.
Oke found the problem, have to specify on each page in the masterpage-tag the Title again.
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.
This control is great! How do I go about centering the full image in the browser?
TIA
Hi everyone. I am trying to get the same control load few images. Sort of an array of images. Does anyone know? Thanks
Has anybody been able to get this working with the ASP.NET MVC framework?
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?
(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…
(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.
This is the exactly what I needed. Thanks so much to you and Torstein for this awesome control!
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
Highslide does offer that sort of functionality, but I haven’t included a .NET interface to it (yet).
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
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.
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!
The version linked above is correct now. Sorry about that. Thanks for making me aware of it.
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
… &t= …
which is how other resource libraries are loaded by asp.net by the looks of things?
Thanks!
Huw
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= ...do the control work only on image? what about form, html ajex and so on?
Currently, just images.
just to bad.
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
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.
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).
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?
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
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?
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
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.
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
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
I don’t believe so (at least not easily) currently, but something that I’m working on will allow you to customize that soon.
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
This is going to be related to the same issue that I emailed you about (WebResource.axd resulting in a 404 on your server).
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
Unfortunately, not yet. Just images.
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
I believe your thumbnailer will need to be an ASHX handler for that to work, not an ASPX page.
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
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.
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.
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..
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.
hi,
great control
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!
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.
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
one more thing there is an javascript error icon on my page that says this._form is null or not an object
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.
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.
Thanks for the comments Dave. I will try going down the ASHX route as this does sound the better solution.
Thanks again.
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.
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.
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?
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.
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).
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
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.
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
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:
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.
Dave, I’ll pay you to do that for me. How much. :-)
is there a way to change zoomed image TitleText?
The bit that says “Click to close image, click and drag to move. Use arrow keys for next and previous”?
yes. i couldn’t find how can i change it.
The control doesn’t directly expose that right now. What you can do is add this script somewhere toward the end of your page:
And that title will be changed to “Click to close image.”
thank u. i was looking for this.
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
wait never mind got it to work
^_^”
great script for .NET. Saved lots of js includes in page.
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
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.
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.
Hi Dave, i’ve tried CenterEnlargements but it doesn’t work. Could u help me? Below is my code , please give me your comments
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.
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?
That’s right; I’m not currently using a ViewState backing for the control’s properties.
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?
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.
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.
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
This is Torstein’s description of who qualifies for free usage:
So, you should be fine.
Thanks Dave !
I appreciate your quick response.
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
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
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?
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.
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
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?
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.
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
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.
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.
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
Sorry – 3rd attempt, without the angle brackets!
EditorAttribute(GetType(System.Web.UI.Design.ImageUrlEditor), GetType(UITypeEditor))
Whoops – the code disappeared!
_