NotesForGallery: ASP.NET AJAX Photo Gallery Control

<< Feedback on TinyMce and SharePoint (pitfalls with Compatible mode) | NotesForGallery future release: Release notes 2.0 (expected summer 2009) >>

May 07

NotesForGallery: ASP.NET AJAX Photo Gallery Control

Asp.NET | ASP.NET AJAX 93 Comments »

NotesForGallery Project
NotesForGallery is a simple photo gallery control based on asp.net Ajax and JQuery (LightBox plugin thanks to Leandro Vieira Pinho). The objective of this control is to build a gallery easily and quickly. (2 lines of codes)

See project in codeplex: http://notesforgallery.codeplex.com/

Current functionalities

Auto generates thumbnails.
Animated Slide Show
Display images in modal dialog

More Informations:

Live Example: http://notesfor.net/page/Demo-NotesForGallery.aspx
Bugs: If you're using it and found a bug, please check the "Issue Tracker" tab prior posting it.
Latest Bits: If you want to download the latest stable version, use the "Releases" tab, and if you want to get the latest source codes, check out the "Source Code" tab.
Future release: Release notes 2.0 (expected summer 2009)

How to install?

Add the NotesFoGallery.dll reference in your web site (WebSite >> AddReference…)

<httpHandlers>
…
<add verb="*" path="ThumbnailHandler.ashx" type="NotesFor.ThumbnailHandler, NotesForGallery"/>
…
</httpHandlers>

<%@ Register Assembly="NotesForGallery" Namespace="NotesFor" TagPrefix="ctl" %>

Add a Script Manager:

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

Add the control on your page:

<ctl:Gallery runat="server" ID="Gallery1" FolderUrl="~/Images/1/" Size="100" />

NotesForGallery 2.0

NotesForGallery is an open source control on top of the Microsoft ASP.NET AJAX framework for easy di...

How to create a client-side instance from an Asp.NET controls?

This post show you how to create a client-side instance of an Asp.NET controls.

9 ASP.NET Frequently asked questions of August 2009

This post is gives you some solutions for 9 real life application problems in asp.net: How to dis...

Comments

Posted on Monday, 18 May 2009 21:44

xzxZX

Nivash Singh

Posted on Tuesday, 19 May 2009 07:57

This is the best control i have used for a gallery.

khalil

Posted on Wednesday, 20 May 2009 03:02

plz, try it with google chrome,when i tested it with chrome the modal dialog not working good.

Helori

Posted on Saturday, 23 May 2009 16:25

I had tested with chrome 1.0.154.65, and all seems correct.
Please try the test page: http://notesfor.net/NotesforGallery/Default.aspx.
If the problem persists please send me a printscreen.

Thanks,
Helori.

Ed Elfreth

Posted on Sunday, 24 May 2009 08:28

Great control. Very easy to get going and looks fantastic.

Petros

Posted on Thursday, 28 May 2009 04:24

Hi, very usefull control. Thanks

I have a problem (i Thing) , i can't set backcolor to control
Any help

John

Posted on Thursday, 28 May 2009 11:09

Turns out, in my website (IIS7 integrated pipeline mode and .net 3.5), the handler needs to be registered in a different section of the web config as follows:

<system.webServer>
    <handlers>
            <add name="ThumbnailHandler" type="NotesFor.ThumbnailHandler" verb="*" path="ThumbnailHandler.ashx"/>
    </handler>
</system.webServer>

Hope this helps somebody.
John

kubal5003

Posted on Monday, 1 June 2009 21:35

Hello,
I've developed a DataBound version of this control. What is more it uses pre-generated thumbnails instead of generated by handler, so it's more suitable for use with bigger sites.
It's also more flexible because you can specify virtually any DataSource for images to come from.
I've created it for use with SqlDataSource returning a subset of images stored in some folder, but this can be quickly changed - don't specify FolderUrl property and instead return full paths in your sql.
If anyone is interested in getting one please e-mail me on my nick at gmail.
Thanks, kubal5003

Christiana

Posted on Friday, 5 June 2009 16:04

Hi I am trying to use the notes for gallery control with a .net 3.5 application. I have followed the installation and have made sure that I have completed all steps. However, when I run my application nothing happens the pages shows the heading titles and no images. Why would this be?

Helori

Posted on Monday, 8 June 2009 03:05

Hi Christiana,

Is it to run the solution in debug mode (F5) or to deploy it ?
If it's when you deploy, please check the httpHandler registration in the web.config:

<httpHandlers>
…
<add verb="*" path="ThumbnailHandler.ashx" type="NotesFor.ThumbnailHandler, NotesForGallery"/>
…
</httpHandlers>

And

<system.webServer>
<handlers>
<add name="ThumbnailHandler" type="NotesFor.ThumbnailHandler" verb="*" path="ThumbnailHandler.ashx"/>
</handler>
</system.webServer>

I hope it solve your problem,
Regards,
Helori.

Brian Krebs

Posted on Saturday, 13 June 2009 02:02

How difficult would it be to get the control to work with subdirectories? I'm attempting to create a photo gallery of my kids and I have a folder directory that contains subdirectories such as Christmas, Halloween, 4th of July, etc. I would like to be able to point the FolderUrl to the root directory and have it recursively figure out and create new galleries based on the subdirectories.

Helori

Posted on Monday, 15 June 2009 03:00

Brian,

We will integrate this functionality it in the new version.
The new beta version will be distributed on the blog before the end of this month.

Thanks for your feedback,
Helori.

brian.gullo

Posted on Saturday, 20 June 2009 19:38

I'm gettting this error when i use the photo gallery with a page that as a master page:

The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).
Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

Exception Details: System.Web.HttpException: The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).

Source Error:

An unhandled exception was generated during the execution of the current web request. Information regarding the origin and location of the exception can be identified using the exception stack trace below.

Stack Trace:

[HttpException (0x80004005): The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).]
   System.Web.UI.ControlCollection.Add(Control child) +8677431
   NotesFor.Gallery.RegisterCss(String css) in D:\Projects\MVP\NotesForLibrary\Sources\NotesForGallery\NotesForGallery\Gallery.cs:114
   NotesFor.Gallery.OnInit(EventArgs e) in D:\Projects\MVP\NotesForLibrary\Sources\NotesForGallery\NotesForGallery\Gallery.cs:100
   System.Web.UI.Control.InitRecursive(Control namingContainer) +333
   System.Web.UI.Control.InitRecursive(Control namingContainer) +210
   System.Web.UI.Control.InitRecursive(Control namingContainer) +210
   System.Web.UI.Control.InitRecursive(Control namingContainer) +210
   System.Web.UI.Control.InitRecursive(Control namingContainer) +210
   System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +378

I plan to look at this tonight.  I'll post my findingd.

Raghunandan

Posted on Saturday, 20 June 2009 19:59

One of its best.
I had a look at it and no seconds thoughts its in my website.

Posted on Thursday, 25 June 2009 01:28

Tried this and it works great! Thank you. You do have to add the entry to both the handlers and httphandler area of the web.config to make it work in II7 and .Net 3.5. I am trouble changing the background color though.

Posted on Thursday, 25 June 2009 01:35

Meant to say, I can't change the background color. It just displays as gray no matter what value I make the BackColor attribute. Can you help?

Rosi

Posted on Friday, 26 June 2009 11:04

Hello, i am using the NotesForGallery control in an application where i need to create a gallery in runtime... is there a way to add this control programmatically and have it work right?

I tried with the simple code that's used to add any control to a web page but it doesn't seem to work. The following code is in the page load and i have added all the references to the page and to de web.config file... being a control i figured it should work (but it doesn't =/ )

        NotesFor.Gallery gallery = new Gallery();

        gallery.FolderUrl = "~/images";
        gallery.Enabled = true;

        Panel Panel1 = new Panel();
        Panel1.Controls.Add(gallery);

Any ideas? Please help...

Olivier

Posted on Sunday, 28 June 2009 11:11

Rosi: use this.ResolveClientUrl("~/images") instead. That will convert the ~ path

ajax.controlasp.net

Posted on Sunday, 28 June 2009 12:39

Pingback from ajax.controlasp.net

Free Download ASP.NET AJAX Photo Gallery Control – NotesForGallery « AJAX – Control Asp.Net

Ian Lee

Posted on Monday, 6 July 2009 11:51

I have a master page and a default page. In the default page I'm using obout:callbackplanel to load content pages. your gallery does not work within the callbackpanel. It gives no error but displays a blank page.

It works OK when debuging the content page itself. Is there a solution? It would be great if it works with the callbackpanel in the default.aspx when loaded as a content.

Thanks,
Ian

Matt

Posted on Tuesday, 7 July 2009 16:06

Has anyone used this with BlogEngine yet? The images get smashed to the bottom and don't work properly.

rockinthesixstring

Posted on Tuesday, 7 July 2009 23:16

Is there any way to get the behavior of the nfLightbox combined with the simplicity of the nfGallery?

IE:
auto generated thumnails (nfg)
image names (nfl)
nicer layout (nfl)
drag and drop control (nfg)

This would be a fantastic combination.

rockinthesixstring

Posted on Tuesday, 7 July 2009 23:17

Matt, Notesfor.net is powered by BlogEngine.. so they have obviously gotten it to work.

Posted on Saturday, 18 July 2009 01:27

I have been meaning to write something like this on one of my blogs and this has given me an idea. Cheers.

Hoodia

Posted on Sunday, 19 July 2009 12:28

Thanks.. Funny, I actually had this on my mind a few days ago..

Hoodia

Posted on Sunday, 19 July 2009 12:28

Thanks.. Funny, I actually had this on my mind a few days ago..

запознанства

Posted on Sunday, 19 July 2009 17:30

Thank you, for this code Cheers!

запознанства

Posted on Sunday, 19 July 2009 17:30

Thank you, for this code Cheers!

SEO

Posted on Monday, 20 July 2009 07:09

How to show the driving direction in yahoo map using AJAX API?

cjmUK

Posted on Tuesday, 21 July 2009 12:22

On both my development server (server2008) and my live server (Server2003), I've followed all the described steps, but when I call the page, I get an 'Object reference not set to an instance of an object' error.

To be clear, I've referenced the dll and registered the control in the page. I've added both the handler and the httphandler to Web.Config, and I've added in a ScriptManager.

I suspect it's a real noob error, but I'm stumped.

Medicare Advantage

Posted on Saturday, 25 July 2009 06:54

I can see that you are an expert at your field! I am launching a website soon, and your information will be very useful for me..

Mandeep

Posted on Saturday, 25 July 2009 13:02

can any one help
i am using vs 2008 and facing problem...

ASP.NET Ajax client-side framework failed to load

MICR Toner Cartridges

Posted on Sunday, 26 July 2009 19:39

hey, thanks for posting this. was always a big fan of lightbox despite some of its pitfalls. Will try this out, cheers.

Only Free Bonus

Posted on Thursday, 30 July 2009 01:50

Thanks for this excellent article, insurance re-visit your site, I am very pleased about what he said first

Free ipods

Posted on Thursday, 30 July 2009 22:18

Thanks for this, it's extremely useful.

andrwcris

Posted on Friday, 31 July 2009 10:39

This looks great and could be just what I am looking for....

(Newbie question alert!) - is it possible to integrate this into a blog engine driven site though so that an end user can use it? i.e. add it to a standard page where required?

andrwcris

Posted on Friday, 31 July 2009 10:56

actually can you just add steps 3 and 4 into the masterpage for blog engine and then just add step 5 (line below) into the html of a std BE page when you need it??

<ctl:Gallery runat="server" ID="Gallery1" FolderUrl="~/Images/1/" Size="100" />

....... having said that how then do you upload the images etc via BE....... Mmmm see Newbie alert warning above...lol

Helori

Posted on Friday, 31 July 2009 14:13

To use it in blog engine I have created a user control and I calling the user control in the page. by using [UserControl:...] (see blog engine documentation). I can send to you the user control if you want.

Regards,
Helori.

andrwcris

Posted on Friday, 31 July 2009 15:48

Hi Helori,

Thanks for the quick reply if you could send me the control that would be great because I am very new to programming and will struggle otherwise! lol

Will have a look at the documentation as well though.

Thanks

Andrew

la web design

Posted on Tuesday, 4 August 2009 02:45

That is the best plugin for my blog to manage home pictures. I really feel grateful.

susie

Posted on Tuesday, 4 August 2009 03:15

I mostly use online applications for such uses, saves on your bandwidth as well.

broadband

Posted on Thursday, 6 August 2009 01:35

The ASP.NET MVC Framework is the Microsoft's adoption of MVC for its ASP.NET technology for version 3.5 where it provides features required to build a web application based on MVC.

broadband

Posted on Thursday, 6 August 2009 01:35

The ASP.NET MVC Framework is the Microsoft's adoption of MVC for its ASP.NET technology for version 3.5 where it provides features required to build a web application based on MVC.

garage floor

Posted on Saturday, 15 August 2009 18:48

I would say thatit is the best image gallery control and creation tool.

srinivas

Posted on Wednesday, 19 August 2009 08:12

It's so nice to use this application but i am using ajax1.0 version it is giving error that version is different than the current version.

Learn German

Posted on Wednesday, 19 August 2009 14:18

One of the best plugins also I had some trouble installing it. Thanks a lot!

Waseem

Posted on Thursday, 27 August 2009 07:31

To change the background colour (or other elements).

I used the below css to change the background colour to be the same as my page #414141.

1. Set the CssClass attribute on the control - i just used nfGallery1
e.g.   <ctl:Gallery CssClass="nfGallery1"  runat="server" ID="Gallery2" FolderUrl="~/Images/family/" Size="100" />

2. Then add the following to your stylesheet...

.nfGallery1
{
  width: 100%;
  background-color: #414141;
  padding:5px;
}
.nfGallery1 ul
{
  list-style: none;
  background-color: #414141;
  margin:0px;
  padding:0px;
}
.nfGallery1 ul li
{
  margin: 5px;
  display: inline;
}
.nfGallery1 ul img
{
  padding: 10px;
  margin: 5px;
  border: 1px solid #333;
  background-color: #FFFFFF;
}
.nfGallery1 ul a:hover img
{
  padding: 10px;
  margin: 5px;
  border: 1px solid #666;
  background-color: #FFFFFF;
}
.nfGallery1 ul a:hover
{
  color: #fff;
}

That should do it.

Dissertation Writing

Posted on Friday, 28 August 2009 09:36

Ya I like the features of it. But how to install it.
Regards,

Essay Writing

Posted on Friday, 28 August 2009 09:39

It is a good application. I can use it in my network source.
Regards,

Custom Essay

Posted on Friday, 28 August 2009 09:41

The new version is really working good and thanks to share it.
Regards,

aryos

Posted on Thursday, 3 September 2009 10:24

hey... i am newbie in developing web site... just try the gallery and it's awesome... thank you very much...

quick question tho i am creating this community website(it won't go public tho... cos its only for my assignment) is there any way to open the file from the database instead of FolderUrl="~/Image/1? so every person will have different picture depends on the user upload...

as i said before i am newbie in developing website so kinda confuse on how to make that happen.... :p

many thanks

Helori

Posted on Thursday, 3 September 2009 11:12

Hello,

Currently it's not possible, but I will integrate this fonctionality in the new version.

Regards,
Helori.

Posted on Friday, 4 September 2009 01:27

COOLEST of the COOL Controls..... really an industry grade component .................... WOW!!!!!!!!!!!

San Diego Web Design

Posted on Friday, 4 September 2009 14:47

I really enjoyed the quality information you offer. Will be back often to check up on new stuff you post!

Olin

Posted on Sunday, 6 September 2009 03:44

i want to use the photogallery in my website. but when i uploaded the photos to my web, the thumbnail didn't work properly. but in my local computer everthing is ok. Anyway im using IIS 7.0.. please help me with this. im new in AJAX

Helori

Posted on Sunday, 6 September 2009 06:15

Hello,

Look the message Posted on Thursday, 28 May 2009 by John.

Hope it helps,
Helori.

jlee

Posted on Saturday, 12 September 2009 10:58

I am implimenting this gallery into blogengine for the first time. The testgallery works as it should. When i insert the gallery into my blogengine site the thumbnails view fine, but when clicked the preview doesn't show right. It isn't overlaying at all. It inserts a massive gap of space below the content and then shows the preview image at the bottom of the page.

What could I be missing?

jlee

Posted on Saturday, 12 September 2009 16:42

After 8 hours of searching and testing ... an added step that was missed above was to add CSS references to your page to:

    <link href="gallery.css" rel="stylesheet" type="text/css" />
    <link href="jquery.lightbox-0.5.css" rel="stylesheet" type="text/css" />

plus I had to manually place these css files in my website to get it to work.  I wasn't sure if CSS files could have been included in a build.  After trying to rebuild the project from the provided source code I found it interesting that the build failed because it "couldn't find" these CSS files in the project.  Not sure why.  Maybe I am missing something but this is what I had to do. But now it works!

Suzy Mac

Posted on Tuesday, 22 September 2009 21:00

Love your control and I have added it to a website. My only issue is that the thumbnails don't come up in Firefox. Does anyone have any suggestions?

Thanks a bunch!

Helori

Posted on Thursday, 24 September 2009 10:30

Hi Suzy,

I tried your site with fierefox and it worked. Can you send me the version of firefox you using. I know there is sometimes a problem with the style sheets, if it's the case copy them locally on the page and your problem will be solved.

Regards,
Helori.

Amit

Posted on Monday, 28 September 2009 14:46

Hi

Thanks for this wonderful component. I've incorporated it in my website but for some reason I'm unable to view the thumbnails. When I click a thumbnail the images are opening properly in modal panel. I've copied the contents of 'TestNotesForGallery' folder to my website's root directory , added the reference, edited webconfig and made necessary changes in source code. Am i missing something?

Thanks,
Amit

Amit

Posted on Monday, 28 September 2009 14:58

Hi

Please ignore my last post. I didn't enter the second 'handler' information in webconfig. Its working very well now. Thanks you very much.

Cheers!
Amit

Jon

Posted on Wednesday, 30 September 2009 08:31

It worked like a charm directly, but I cannot seem to make it see the photos when I put them in a virtual directory. Am I doing something wrong?

chary

Posted on Sunday, 11 October 2009 08:24

i am using photo galary control in .net 2.0 but it is not working why?my error is Assembly 'NotesForGallery, Version=2.0.3518.18060, Culture=neutral, PublicKeyToken=b48ae845d7fba581' uses 'System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35' which has a higher version than referenced assembly 'System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35'
my code in web.config
<assemblies>
        <add assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/></assemblies>
<httpHandlers>

      <add verb="*" path="ThumbnailHandler.ashx" type="NotesFor.ThumbnailHandler, NotesForGallery"/>

    </httpHandlers>

help me urgent

Apex Professionals LLC

Posted on Friday, 16 October 2009 08:43

well,this is a good post.. i have red your article it was pretty good post..you made some good points..i learned so much from your blog.
thanks for sharing good info.
regards,

Melbourne pet photography

Posted on Saturday, 24 October 2009 07:44

What is basically the difference between Windows Photo Gallery and Windows "Live" Photo Gallery?

Essay Help

Posted on Tuesday, 27 October 2009 08:42

well,this blog contains good stuff..and this is more innovative and informative..Thank you for sharing your blog, I found it interesting! Keep blogging and keep it up!
regards,

ruslan

Posted on Thursday, 29 October 2009 07:55

How install NotesForGallery in MOSS?

Buy Degree

Posted on Friday, 30 October 2009 05:31

Thanks you very much.

i take alot of xanax how long will they be in my system

Posted on Sunday, 1 November 2009 08:54

This is a nice photo gallery addition for ASP.NET. Having photo galleries always can be used for any type of site to add an interesting element and a more professional look. These instructions just made it a whole lot easier.

Artistic

Posted on Monday, 16 November 2009 08:19

Love these photos! Keep up the good work, have bookmarked this page.

ProtonLLC

Posted on Wednesday, 25 November 2009 21:58

Anyone managed to make this worrk in the MVC environment?  I'm getting the following error:
System.NullReferenceException: Object reference not set to an instance of an object.

[NullReferenceException: Object reference not set to an instance of an object.]
   NotesFor.Gallery.RegisterCss(String css) +252
   NotesFor.Gallery.OnInit(EventArgs e) +58
   System.Web.UI.Control.InitRecursive(Control namingContainer) +333
   System.Web.UI.Control.InitRecursive(Control namingContainer) +210
   System.Web.UI.Control.InitRecursive(Control namingContainer) +210
   System.Web.UI.Control.InitRecursive(Control namingContainer) +210
   System.Web.UI.Control.InitRecursive(Control namingContainer) +210
   System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +378

fringe purse

Posted on Tuesday, 15 December 2009 10:43

The photos that were posted was edited very well. I really want to be expert on photo editing, because I want to be a photographer on the latest fashion trends magazines like magazines about clothes,footwear and accessories. Do you know a site for a tutorial?

club penguin cheats

Posted on Wednesday, 16 December 2009 22:56