Modal Popup Question ?

I create a table programatically which displays images from the database in thumbail fashion.

for (int i = 1; i <= rows; i++) {// Create a new row and add it to the table. TableRow tRow =new TableRow(); Table1.Rows.Add(tRow);for (int j = 0; j < cells; j++) {if (count >= 0) {// Create a new cell and add it to the row. TableCell tCell =new TableCell(); tRow.Cells.Add(tCell); HyperLink link =new HyperLink(); link.NavigateUrl ="~/" + images[count].FullImage; link.ImageUrl ="~/" + images[count].ThumbnailImage; tCell.Controls.Add(link); tCell.Controls.Add(new LiteralControl("<br><br><b>Title</b> : " + getproducts[count].Name +"<br>"));/*Add Checkout and add to cart Images */ HyperLink wishlistLink =new HyperLink(); wishlistLink.ImageUrl="~\\images\\Add_to_wish_list.gif"; HyperLink checkoutLink =new HyperLink(); checkoutLink.ImageUrl ="~\\images\\Add_to_my_cart.gif";/*Add the Images to the cells*/ tCell.Controls.Add(wishlistLink); tCell.Controls.Add(checkoutLink); } } }

Now I want when user clicks on thumbnail it opens a modal popup extender and displays the full image with some other information . How this can be achieved ?

For something like this, I would recommendLighbox or aCSS only implementation. Both are geared specifically for graphics and are nice effects. However, take a look here:http://mattberseth.com/blog/2007/07/modalpopupextender_example_cre.html for how to use the ModalPopup for an image viewer.

-Damien

Hello Damien,

I was wondering for the lightbox, it says to activate you need rel="lightbox". My Question is as I'm creating the link and putting pictures programatically how that can be achieved.

Code snippet will be really appreciated.

Thanks,

Harsimrat

To add the rel attribute all you need to do is to assign the attribute using the Attributes.Add method. For example:

HyperLink link =new HyperLink();
link.Attributes.Add("rel", "lightbox");

-Damien

Hello Damien,

When I do something like this :

HyperLink link =newHyperLink();

//link.NavigateUrl ="~/" + images[count].FullImage;

link.ImageUrl ="~/" + images[count].ThumbnailImage;

//link.Attributes.Add("onclick", "ShowModalPopup('" + images[count].FullImage + "')");

link.Attributes.Add("a href","" + images[count].FullImage);

link.Attributes.Add("rel","lightbox");

1) Everything is shown at the end of the page with a close button, for some reason not as a javascript. Can you please let me know where I'm going Wrong.

2) Is there any way to show some extra buttons or pictures with the picture shown ?

3) And how can I adjust the Height and Width of the Image using link control ?

Thanks for your help.

In terms of rendering, are you doing this as part of your original code? For example (I shortened it up a bit):
...for (int j = 0; j < cells; j++)
{
// Create a new cell and add it to the row.
TableCell tCell =new TableCell();
tRow.Cells.Add(tCell);

HyperLink link =new HyperLink();
link.NavigateUrl ="~/" + images[count].FullImage;
link.ImageUrl ="~/" + images[count].ThumbnailImage;
link.Attributes.Add("rel", "lightbox");
...

Also, link.Attributes.Add("a href","" + images[count].FullImage); isn't correct. The attribute would behrefnota href, although your NavigateUrl will take care of this so you can exclude it.

In regards to your questions "Is there any way to show some extra buttons or pictures with the picture shown ?", you can add other controls to the cell. The HyperLink is a single control, if you want to add a button, you would need to add an asp:button. Not sure if this answers your question...

For sizing, look at the Width and Height properties; see:http://msdn2.microsoft.com/en-us/library/system.web.ui.webcontrols.hyperlink_properties.aspx

Hope this helps.

-Damien

For the second question, I should have been more clearer. When the lighbox opens I want to show stuff by its side as by default it only allows Title .

Oh, sorry. I'm not sure if you can add controls to the lightbox. I'm sure you can work something out to get that to work if you need to by modifying the JavaScript source, but the design of lightbox is simplicity (e.g. just showing a caption)

-Damien