HTML Gallery change, open in new window using C#

Topics: Developer Forum, Localization Forum, User Forum
Apr 16, 2009 at 9:47 AM
Hi Guys,

I would like to make a little change in the HTML Gallery.
When you click the thumbnail, it goes to the Big Picture.

However, I would like to get a popup in a new window, showing the whole image.
This is because the picture a the gallery itself is just to small.
The Silverlight version works perfect, but I want to have something simulair for the HTML Gallery.

Something like: javascript: OpenPictureWindow


Second, I would like to make the thumbnails a little bit bigger.

Could anyone help please?

Thanks in advance
Apr 16, 2009 at 12:58 PM
I found the Thumbnail size in the skin.skin file, located in the Theme dir.

Now still working on the new window to open.


I think it should be somewhere in

<

 

asp:DataList runat="server" ID="lstGallery" DataKeyField="Guid"

 

 

OnItemCommand="lstGallery_ItemCommand" SkinID="gallery"

 

 

onselectedindexchanged="lstGallery_SelectedIndexChanged">

 

 

<ItemTemplate>

 

 

<asp:LinkButton runat="server" ID="btnDetails" CommandName="ShowDetails" CausesValidation="false">

 

 

<cc1:ResizedImage runat="server" ID="imgThumbnail" ImageUrl='<%#Eval("Filename", "{0}")%>' SectionId='<%#getSectionId()%>' PageId='<%#getPageId()%>' SkinID="galleryThumbnail"></cc1:ResizedImage>

 

 

</asp:LinkButton>

 

 

</ItemTemplate>

 

 

</asp:DataList>

 


And in


 

protected void lstGallery_ItemCommand(object source, DataListCommandEventArgs e)

 

{

 

if (e.CommandName == "ShowDetails")

 

{

ViewState[

"detail"] = lstGallery.DataKeys[e.Item.ItemIndex].ToString();

 

}

}



But no luck to change it so far.

Apr 18, 2009 at 8:34 PM
if I add onclick="window.open(this.src);"  at the end of

<cc1:ResizedImage runat="server" ID="imgThumbnail" ImageUrl='<%#Eval("Filename", "{0}")%>' SectionId='<%#getSectionId()%>' PageId='<%#getPageId()%>' SkinID="galleryThumbnail"></cc1:ResizedImage>


Then I get a new window, just with the small thumbnail, and in the background, the site still goes to the details view of the photo.


Anyone a good idea how to modify the window.open to open a full screen of the pic?
And how to make the gallery not go to the details view of the picture?


Thanks
Apr 18, 2009 at 10:52 PM
I'll just keep on going talking ;-)

I've now modified it to:

asp

 

:DataList runat="server" ID="lstGallery" DataKeyField="Guid" OnItemCommand="lstGallery_ItemCommand" SkinID="gallery">

 

 

<ItemTemplate>

 

 

<asp:LinkButton runat="server" ID="btnDetails" CommandName="ShowDetails" CausesValidation="false" OnClientClick="javascript:window.open('WHATDOIPUTHERE?','','left=250px, top=245px, width=700px, height=450px, scrollbars=no, status=no, resizable=no');return false;">

 

 

<cc1:ResizedImage runat="server" ID="imgThumbnail" ImageUrl='<%#Eval("Filename", "{0}")%>' SectionId='<%#getSectionId()%>' PageId='<%#getPageId()%>' SkinID="galleryThumbnail" ></cc1:ResizedImage>

 

 

</asp:LinkButton>

 

 

</ItemTemplate>

 

 

</asp:DataList>



This does what I want, with just one minor miss..... there is no picture
So what do I need to put in "WHATDOIPUTHERE?" in the code, for the picture to show up in the new window?

I'am trying to get the detailview picture in there, and modify the size in the skin.skin file to a bigger one.... but how?


Thanks

 

Apr 19, 2009 at 7:31 AM
If I just put in this code:

<asp:DataList runat="server" ID="lstGallery" DataKeyField="Guid" OnItemCommand="lstGallery_ItemCommand" SkinID="gallery">
                    <ItemTemplate>
                         <asp:LinkButton runat="server" ID="btnDetails" CommandName="ShowDetails" CausesValidation="false" OnClientClick="javascript:window.open('http://www.MYURL.com/1.jpg','','left=250px, top=145px, width=750px, height=525px, scrollbars=no, status=no, resizable=no');return false;">
                            <cc1:ResizedImage runat="server" ID="imgThumbnail" ImageUrl='<%#Eval("Filename", "{0}")%>' SectionId='<%#getSectionId()%>' PageId='<%#getPageId()%>' SkinID="galleryThumbnail"></cc1:ResizedImage>
                        </asp:LinkButton>
                    </ItemTemplate>
                </asp:DataList>

All the gallery pics come up with the same picture, the 1.jpg.

So I think I'am close, but just not close enough.
Still need the bigview picture of the thunbnail in the new window..


Apr 19, 2009 at 3:20 PM
Am just guessing, but try replacing:
<asp:LinkButton runat="server" ID="btnDetails" CommandName="ShowDetails" CausesValidation="false" OnClientClick="javascript:window.open('http://www.MYURL.com/1.jpg','','left=250px, top=145px, width=750px, height=525px, scrollbars=no, status=no, resizable=no');return false;">

with

<asp:LinkButton runat="server" ID="btnDetails" 
    CommandName="ShowDetails" 
    CausesValidation="false" 
    OnClientClick='<%# Eval("Filename", "javascript:window.open('{0}','','left=250px, top=145px, width=750px, height=525px, scrollbars=no, status=no, resizable=no');return false;") %>'  >

In effect, your OnClientClick script is created using an Eval statment holding the picture location details.  The Eval statement includes a format string, (the script itself), and the url is added into this, (at the point where the {0} is).

You'll need to double-check the quotations, but something like this should get the photo you're after...


hth,
Jim
Apr 19, 2009 at 4:42 PM
Thanks for your reply!


I've made your change, as I had made a few hundred different look-a-likes, but unfortunally:

Parser Error

Description: An error occurred during the parsing of a resource required to service this request. Please review the following specific parse error details and modify your source file appropriately.

Parser Error Message: The server tag is not well formed.

Source Error:

Line 68:                 <asp:DataList runat="server" ID="lstGallery" DataKeyField="Guid" OnItemCommand="lstGallery_ItemCommand" SkinID="gallery">
Line 69:                     <ItemTemplate>
Line 70: <asp:LinkButton runat="server" ID="btnDetails" CommandName="ShowDetails" CausesValidation="false" OnClientClick='<%# Eval("Filename", "javascript:window.open('{0}','','left=250px, top=145px, width=750px, height=525px, scrollbars=no, status=no, resizable=no');return false;") %>' >Line 71:                             <cc1:ResizedImage runat="server" ID="imgThumbnail" ImageUrl='<%#Eval("Filename", "{0}")%>' SectionId='<%#getSectionId()%>' PageId='<%#getPageId()%>' SkinID="galleryThumbnail"></cc1:ResizedImage>
Line 72:                         </asp:LinkButton>



So there is a ' or " or () or ; somewhere not ok.

But we're close....

Is the <%#Eval("Filename", "{0}")%> statement the link to the original picture?


Hope you've got another idea ;-)

Apr 19, 2009 at 5:47 PM
mmh... if I put in this code:

<asp:LinkButton runat="server" ID="btnDetails" CausesValidation="false" OnClientClick='<%# Eval("Filename", "{0}")%>'>

Then it resolves in the source code from the website to:

<td class="gallerycell">
<a onclick="PICTURE.jpg;"
id="ctl00_mainContent_ctl01_lstGallery_ctl00_btnDetails" href="javascript:__doPostBack('ctl00$mainContent$ctl01$lstGallery$ctl00$btnDetails','')">
<img id="ctl00_mainContent_ctl01_lstGallery_ctl00_imgThumbnail" src="ImageHandler.ashx?pg=226e106f-6621-4308-8054-a04f8b2337c9&amp;section=cb4fcd0c-ba2a-4ea4-ac8a-4e3d1fb1a94b&amp;image=PICTURE.jpg&amp;height=100&amp;width=100"
alt="" align="middle" style="border-width:0px;" />
</a>

So it does looksup the correct image.

Now I need to get window.open to work ;-)


Apr 20, 2009 at 12:58 PM
Can't I modify the gallery.ascx.cs file to let it open a new window?

Something in here:


DataRow

 

entry = null;

 

 

if ((!IsPostBack) && (Request.QueryString["detail"] != null))

 

 

{

entry = _section.GetGalleryEntry(Request.QueryString[

"detail"]);

 

 

if (entry != null)

 

{

ViewState[

"detail"] = Request.QueryString["detail"];

 

}

}

 

if ((entry == null) && (ViewState["detail"] != null))

 

{

 

entry = _section.GetGalleryEntry(ViewState[

"detail"].ToString());

 

}

 

if (entry != null)

 

{

litTitle.Text = (

string)entry["Title"];

 

imgGalleryBigView.SectionId = _section.SectionId;

imgGalleryBigView.PageId = Request.QueryString[

"pg"];

 

imgGalleryBigView.ImageUrl = (

string)entry["Filename"];

 

litComment.Text = (

string)entry["Comment"];

 

lnkDownload.NavigateUrl = ResolveUrl(

string.Format("~/DownloadHandler.ashx?pg={0}&section={1}&file={2}", Request.QueryString["pg"], _section.SectionId, HttpUtility.UrlEncode((string)entry["Filename"])));

 

multiview.SetActiveView(readonlyDetailsView);

 

string previousId = _section.GetPreviousEntryId((Guid)entry["Guid"]);

 

 

if (previousId != string.Empty)

 

{

btnPrevious.CommandArgument = previousId;

btnPrevious.Visible =

true;

 

}

 

else

 

{

btnPrevious.Visible =

false;

 

}

 

string nextId = _section.GetNextEntryId((Guid)entry["Guid"]);

 

 

if (nextId != string.Empty)

 

{

btnNext.CommandArgument = nextId;

btnNext.Visible =

true;

 

}

 

else

 

{

btnNext.Visible =

false;

 

}

}

 

else

 

{

lstGallery.DataSource = _section.GetGalleryEntries();

lstGallery.DataBind();

multiview.SetActiveView(readonlyView);

}

}

}



Thanks

Apr 20, 2009 at 1:30 PM
Hi,

Try:

<asp:LinkButton runat="server" ID="btnDetails" 
    CommandName="ShowDetails" 
    CausesValidation="false" 
    OnClientClick='<%# Eval("Filename", "javascript:window.open(\"{0}\",\"\",\"left=250px, top=145px, width=750px, height=525px, scrollbars=no, status=no, resizable=no\");return false;") %>'  >

Regarding changing Gallery.ascx.cs - afaik, the only way to change the dimensions of the browser on load are via javascript, so you'll need a bit of JS either way. 

hth,

Jim
Apr 20, 2009 at 2:03 PM
Edited Apr 20, 2009 at 2:49 PM
thanks!... Now we're pretty close.

It opens a new window, with the filename.
However, it looks into the root of the website. And there are no pics there.

We need to add something, so that it is going to look in the app_data/_download folder.


 

Server Error in '/MWPSK' Application.

The resource cannot be found.

Description: HTTP 404. The resource you are looking for (or one of its dependencies) could have been removed, had its name changed, or is temporarily unavailable.  Please review the following URL and make sure that it is spelled correctly.

Requested URL: /MWPSK/DSC03897.JPG


Apr 20, 2009 at 2:50 PM
Hi,

Try

<asp:LinkButton runat="server" ID="btnDetails" 
    CommandName="ShowDetails" 
    CausesValidation="false" 
    OnClientClick='<%# Eval("Filename", "javascript:window.open(\"app_data/_download/{0}\",\"\",\"left=250px, top=145px, width=750px, height=525px, scrollbars=no, status=no, resizable=no\");return false;") %>'  >


I can't test this, so you may need to tweak it a bit to get the url spot-on.  In essence, you're adding in the required url stem to the format string.


hth,

Jim.
Apr 20, 2009 at 2:54 PM
I came up with another questions...

How can I make the new window Height en Width relative.
So that it would always be the defined values, 750px 525px, and just looking at the source, the picture.
No I have some white borders, or an image that is just to big, and crops with a magnifier glass.
I want to resize the image before upload, so that won't be to hard, but if the image is smaller then 750 I don't want to see a white border ;-)

Also, how can I make the new window to autoclose if you click next to it?


Thank you very much for your time!

Apr 20, 2009 at 2:59 PM
<quote>
Hi,

Try

<asp:LinkButton runat="server" ID="btnDetails" 
    CommandName="ShowDetails" 
    CausesValidation="false" 
    OnClientClick='<%# Eval("Filename", "javascript:window.open(\"app_data/_download/{0}\",\"\",\"left=250px, top=145px, width=750px, height=525px, scrollbars=no, status=no, resizable=no\");return false;") %>'  >


I can't test this, so you may need to tweak it a bit to get the url spot-on.  In essence, you're adding in the required url stem to the format string.


</quote>


This I also tried, however, the client doesn't have access to that folder. It comes up with No Permission in that folder.
Second, for each gallery there is another folder....

Or I need to add the pics with the Gallery control, and second, I need to upload all the images to a folder which is accessable and all the pictures in it.

Thanks

Apr 20, 2009 at 3:13 PM
So this needs to be added in the javascript:

SectionId

 

='<%#getSectionId()%>' PageId='<%#getPageId()%>'

 


Then it knows which session and page we're in, and in that folder the picture is located... I think.

Apr 20, 2009 at 4:01 PM
Edited Apr 20, 2009 at 4:06 PM
Hi,

You're right regarding the "No permission" issue - should have spotted that.  App_Data is a protected folder.

try:

<asp:LinkButton runat="server" ID="btnDetails" 
    CommandName="ShowDetails" 
    CausesValidation="false" 
    OnClientClick='<%# Eval("Filename", "javascript:window.open(\"imagehandler.ashx?image={0}\",\"\",\"left=250px, top=145px, width=750px, height=525px, scrollbars=no, status=no, resizable=no\");return false;") %>'  >


This may or may not work.

For the other functionality, you're looking at a fair bit of javascript to get it together; in some cases, yu'll need dynamically-written javascript to solve the image sizing issues, etc.  It amy be worth looking at something like MooTools, to see if that has the basics of what you want.  Then, you could integrate this library into the website, and call the required functions.

Javascript isn't really my strong-point :/

hth,

Jim.

Apr 20, 2009 at 4:47 PM
Hi

Unfortunally it doesn't work.

If I put in the complete url like http://localhost:2469/MWPSK/ImageHandler.ashx?pg=226e106f-6621-4308-8054-a04f8b2337c9&section=cb4fcd0c-ba2a-4ea4-ac8a-4e3d1fb1a94b&image=PICTURE.jpg&height=100&width=100 it shows.

Then the picture is shown, but if I delete the &height=100&width=100 at the end, the picture is gone.....


But what if we edit something in the Upload procedure?
That if the I add pictures to the Gallery, the picture is put in the App_Data'_Download folder, AND in f.e. the folder Images.
Then if I put in this code:

<%# Eval("Filename", "javascript:window.open(\"images/{0}\",\"\",\


The image will be loaded from the _Download folder for the Thumnail, and loaded from the Images folder for the Big Picture.
The filename will be the same.

Otherwise I need to upload the pictures seperate with ftp to the /images folder.

Just a thought ;-)


Thanks a lot Jim

Apr 20, 2009 at 5:18 PM
Hi,

That would work - shouldn't be too tricky to work out how to duplicate the image file - remember to delete them both at the same time too :)

It's either that, or create the "open window" javascript fragment in the code-behind file, (Gallery.asx.cs), which will give you access to PageId variables, etc, when building it. 

Ideally, turn it into a javascript function, with image size params.  Then you could register the script with the page, attach function calls to the individual DataList items, (images) using the
DataList.ItemBound event.  This would give you the ability to have various settings for different images, and still use a link to the ImageHandler.ashx, which would save
you needing two copies of the images.

Hope you see what I mean...

Jim
Apr 20, 2009 at 6:19 PM
Hi,

I know exactly what you mean.

That would be much more better!

But how on earth am I going to code it...


Ok,

I changed it into:

 

<asp:LinkButton runat="server"  ID="btnDetails" CausesValidation="false" OnClick="ShowPicture_Click">

 

 

<cc1:ResizedImage runat="server" ID="imgThumbnail" ImageUrl='<%#Eval("Filename", "{0}")%>' SectionId='<%#getSectionId()%>' PageId='<%#getPageId()%>' SkinID="galleryThumbnail" ></cc1:ResizedImage>

 

 

</asp:LinkButton>

 



Next, I've added this to the .cs file:

 

protected void ShowPicture_Click(object sender, EventArgs e)

 

{

 

}


Now we have to code the opening window, resolve the complete url and put the picture in it..... pretty simple to just write it down on here, but on the codefile it's something different.
That is pretty much where my knowledge of the programming stops for now ;-)


Thanks Jim

Apr 20, 2009 at 8:40 PM
This is a small beginning I think

 

protected void ShowPicture_Click(object sender, EventArgs e)

 

{

Response.Write(

 

"<script> window.open( 'test.nl' ); </script>");

 

Response.End();

}



However, the window behind (the Gallery) turns to blank with this code:

<script> window.open( 'test.nl' ); </script>



So it's no good at all...;-)


 

Apr 20, 2009 at 9:08 PM
Isn't this part of the gallery.ascx.cs file that is responsable for the picture view in BigView on the second page?

 

DataRow entry = null;

 

 

if ((!IsPostBack) && (Request.QueryString["detail"] != null))

 

 

{

entry = _section.GetGalleryEntry(Request.QueryString[

"detail"]);

 

 

if (entry != null)

 

{

ViewState[

"detail"] = Request.QueryString["detail"];

 

}

}

 

if ((entry == null) && (ViewState["detail"] != null))

 

{

 

entry = _section.GetGalleryEntry(ViewState[

"detail"].ToString());

 

}



So there is just a few modifications needed for this to pop-up in a new window?
Now to figure out how ;-)

Apr 21, 2009 at 3:13 PM
Can I do anything with this?:

function openPictureWindow_Fever(imageName,imageWidth,imageHeight,alt,posLeft,posTop) {
newWindow = window.open("","newWindow","width="+imageWidth+",height="+imageHeight+",left="+posLeft+",top="+posTop);
newWindow.document.open();
newWindow.document.write('<html><title>'+alt+'</title><body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginheight="0" marginwidth="0" onBlur="self.close()">');
newWindow.document.write('<img src='+imageName+' width='+imageWidth+' height='+imageHeight+' alt='+alt+'>');
newWindow.document.write('</body></html>');
newWindow.document.close();
newWindow.focus();



Just looking around...

Or maybe a whole different Gallery? For in the EasyControl?


Apr 22, 2009 at 10:12 AM
I've now changed the upload dir to "/pictures"

So that is accessable for the client.

Now... it still uses a SectionId, so the pic is dropped in the section ID.

1. Disable the sectionId.... how?

or

2. Get the SectionId in the javascript.

OnClientClick

 

='<%# Eval("Filename", "javascript:window.open(\"Pictures/{0}\",\"\",\"left=250px, top=145px, width=750px, height=525px, scrollbars=no, status=no, resizable=no\");return false;") %>'


Almost there.....