image gallery or slideshow type system - what control?

Question

User-820071533 posted

I'm trying to design a Details page that will include a few pictures. I am using a FormView to display and lay out the data from the record.  Included in the data are paths to a number of images.

I'd like to show one large image with a row of thumbnails below it.  When a thumbnail is clicked, the large image changes.

I can do this using an iFrame but I think there must be a better way using either a (modified) SlideShow type control that shows the thumbnails instead of numbers and arrows, or an UpdatePanel that uses Image Buttons or standard Image Controls wrapped in Hyperlink Controls.

I've been reading about UpdatePanels all day but I cannot see how to pass the parameter to the Image Control that is in the UpdatePanel. 

Am I going about this wrong?  What controls should I be using to create this?   

Answer 1

User-128063356 posted

Hi,

Here are some examples

 

http://www.codeproject.com/KB/web-image/ImageGallery.aspx

http://www.codeproject.com/KB/custom-controls/ImageGalleryImageManager.aspx

http://www.codeproject.com/KB/web-image/CatalogViewPhotoGallery.aspx

http://www.codeproject.com/KB/aspnet/imagegalleriesasp.aspx

http://www.codeproject.com/KB/web-image/CPImageGallery.aspx

http://www.codeproject.com/KB/web-image/Photo_gallery.aspx

http://www.codeproject.com/useritems/ImageSlideShow.asp

http://aspnet.4guysfromrolla.com/articles/081303-1.aspx

 

Answer 2

User-820071533 posted

Thanks for the samples, but they don't seem to have what I need.  They each might have a portion of what I want to accomplish, but none seem to be close enough that I can use them as a start to understanding what I should be doing.

I just want a single picture with a row of thumbs below it.  Click a thumb and change the picture refreshing/updating only the picture, not the whole page.  This is why I think I need to use an UpdatePanel somehow.

Cars.com and AutoTrader.com use things that are similar to what I want to accomplish.

 

Answer 3

User2022958948 posted

 Hi,

Based on my understanding, you want to implement the slide images . If I have misunderstood you, please feel free to let me know.

There is a sample you can check. Of course, it is implemented by AJAX.

http://www.asp.net/AJAX/AjaxControlToolkit/Samples/SlideShow/SlideShow.aspx

You can download it at http://www.codeplex.com/Wiki/View.aspx?ProjectName=AtlasControlToolkit

As to the thumbs of images, you can show them under the single picture by loop.

Hope this can help.

 

Answer 4

User-820071533 posted

Thanks for following up on this thread.  I can get SlideShows working but cannot see a way to make a row of thumbnails below the SlideShow that users can click to select images.

Today I have gotten closer to what I want to do using a MultiView.  I've got a View for each picture in the MultiView.  Outside the MultiView I have placed a row of ImageButtons.  This works to change the Views and display the different images, but the whole page is refreshing/reloading in IE7.  Firefox seems to be ok, although maybe it is just faster calls from cache that makes it look ok.

The MultiView is inside of a FormView Item Template.  Does this make a difference?  It did when I had to figure out how to find the control.

I guess now my question is this:  Is MultiView the best for what I want, or should I work on using a SlideShow?  And if MultiView is best, how can I stop the full page refresh/reload?  I thought it should just change the View. 

 

Answer 5

User2022958948 posted

Hi,

Based on your description, you want to achieve it with no-refresh. If so, you can use AJAX.1.

(Please install the 'ASP.NET 2.0 AJAX Extensions 1.0':  http://www.microsoft.com/downloads/details.aspx?FamilyID=ca9d90fa-e8c9-42e3-aa19-08e2c027f5d6&displaylang=en)

        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                 <asp:Image ID="Image1" runat="server" />
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="ImageButton1" EventName="Click" />
                <asp:AsyncPostBackTrigger ControlID="ImageButton2" EventName="Click" />
            </Triggers>
        </asp:UpdatePanel>
        <asp:ImageButton ID="ImageButton1" runat="server" Height="147px" 
            ImageUrl="~/images/Ad1.gif" onclick="ImageButton1_Click" Width="162px" />
        <asp:ImageButton ID="ImageButton2" runat="server" Height="147px" 
            ImageUrl="~/images/Ad2.gif" onclick="ImageButton2_Click" Width="160px" />

 You can add imageButton and add trigger of UpdatePanel with UpdatePanel1.Triggers.Add in Code Behind in order to achieve  dynamically adding imageButton controls and triggers of UpdatePanel .

 

Answer 6

User-820071533 posted

Thanks for your continued efforts on this Vince.  This suggestion is similar to where I started, but I still cannot figure out how to complete the task. 

I've got the page appearing, and when I click a thumbnail the main image changes, but the whole page is reloading instead of just the UpdatePanel.  I am also seeing an error in the bottom left corner of IE7 and in the Error Console of Firefox. 

	'Sys' is undefined Lines 91 & 127.  Those lines contain the following:

	Sys.WebForms.PageRequestManager._initialize('ctl00$ContentPlaceHolder1$ScriptManager1', document.getElementById('aspnetForm'));

Do I have to do something to get the Script Manager to work?  I think I need to try something in the Page_Load.  I tried

	ScriptManager1.RegisterAsyncPostBackControl(ImageButton1);

 but it failed.  I tried to add FindControl in a few combinations, but couldn't get it to work.  Am I headed in the right direction?

I can post code if necessary. 

Answer 7

User2022958948 posted

Hi,

It's ok, you are on the way. This is the common error appear in AJAX, and here is the solution.

1.If you install the old version of any Ajax for asp.net, and then install the 'ASP.NET 2.0 AJAX Extensions 1.0':  http://www.microsoft.com/downloads/details.aspx?FamilyID=ca9d90fa-e8c9-42e3-aa19-08e2c027f5d6&displaylang=en If you install just now, ignore it.

2.Please put the followings into  <system.web> in Web.config

    <httpHandlers>
      <remove verb="*" path="*.asmx"/>
      <add verb="*" path="*.asmx" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
      <add verb="GET" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler" validate="false"/>
    </httpHandlers>
    <compilation debug="true">
      <assemblies>
        <add assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
      </assemblies>
    </compilation>

3.If it can't work, try this:

    <httpHandlers>
      <remove verb="*" path="*.asmx"/>
      <add verb="*" path="*.asmx" validate="false" type="Microsoft.Web.Script.Services.ScriptHandlerFactory, Microsoft.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
      <add verb="GET" path="ScriptResource.axd" type="Microsoft.Web.Handlers.ScriptResourceHandler" validate="false"/>
    </httpHandlers>
    <compilation debug="true">
      <assemblies>
        <add assembly="Microsoft.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
      </assemblies>
    </compilation>

After that, try your page again. It should work.

 

Answer 8

User-820071533 posted

Thank you!  It's finally working. 

Step 2 in the above post is the one that fixed the problem with the page reload and the error re:'Sys' that was showing in the browsers.

Thanks again for your time and patience.

 

 

Answer 9

User-667608363 posted

 Hi I did get the same error you had but I am using VS2008 3.5

My web config setting is

    <httpHandlers>
            <remove verb="*" path="*.asmx"/>
            <add verb="*" path="*.asmx" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
            <add verb="*" path="*_AppService.axd" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
            <add verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" validate="false"/>
        </httpHandlers>

but your version is 1. something. What do I do now?

Answer 10

User-1487494846 posted

I have 3.5 too and I am afraid downgrading this would mess up other parts of my project.