Since you're only returning a URL, I'd suggest using the Client Callback to request the URL from the DB and then put the returned value into an HTML IMG element. Either that, or if you're dynamically populating the ten pictures in the modal popup, write out an onclick (client side) function to put the larger image URL in the IMG element.
Client callback:http://dotnetjunkies.com/Article/E80EC96F-1C32-4855-85AE-9E30EECF13D7.dcik
Rough idea of other suggestion:
function changeURL(url)
{
document.getElementById('large_img').src=url;
}
<img id="large_img" href="http://links.10026.com/?link=">
<img href="http://links.10026.com/?link=small_image1.jpg" onclick="changeURL('large_image1.jpg')">
<img href="http://links.10026.com/?link=small_image2.jpg" onclick="changeURL('large_image2.jpg)">
This type of change should be easy to do on the client side. However, you should be able to call the Show method of the modal in your server side code to show it again.
Hope this helps.
Any chance of getting some vb .net code for this? I'm not too advanced with javascript or C#... also, is there any specific reason you're using html img's instead of asp img's?
The point of using client-side javascript is so you won't waste server resources or the user's time by performing a postback for a simple operation. Web applications should never be 100% server-side code.
I suggest using a HTML element ONLY (ASP Image controls render into HTML elements before writing to the response anyway) because they will consume server resources (Viewstate, etc) when you may not need them to.
Let's say you have 10 thumbnails plus the larger main display image. Your image URLs are coming from a data source. In your ASPX page, use a data repeater control, and in the template include a HTML img element:
<img id="large_image" src="http://pics.10026.com/?src=" />
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<img src='<%#Eval("thumb_url") %>' onclick="changeURL('<%#Eval("full_url") %>')" />
</ItemTemplate>
</asp:Repeater>
(thumb_url should be changed to the column of your table with the thumbnail url and full_url to the large image url)
In your <head> add the function changeURL (from my previous post) to change the source of the large image element.
Then in your code behind, databind the repeater.
This will be a very quick way for you to change the pictures without postback.
Now, if you're looking to save the user's choice to a database, you could change the large_image element to an ASP image control and change the javascript to:
function changeURL(url)
{
document.getElementById('<%=large_image.ClientID%>').src=url;
}
But, like I said in the previous post, if you really want to go for the VB only solution, call the Show method of your modal extender control in your thumbnail click event.
OK, i think i get the idea now... but when i put :
functionchangeURL(url)
{
document.getElementById('large_img').src=url;
}
In the <head> section of my masterpage, it displays in text...
Acctually... duh... i had to put it in <script>...so anyways, here's my code:
<scripttype="text/javascript">function changeURL(url){
document.getElementById('large_img').src=url;
}
</script>
Here's the ASP:
<asp:RepeaterID="Repeater1"runat="server"DataSourceID="SqlDataSource1"><ItemTemplate>
<imgsrc='<%#Eval("PersImageThumb") %>'onclick="changeURL('<%#Eval("PersImageURL") %>')"/><imgsrc='<%#Eval("Pic2Thumb") %>'onclick="changeURL('<%#Eval("Pic2Big") %>')"/><imgsrc='<%#Eval("Pic3Thumb") %>'onclick="changeURL('<%#Eval("Pic3Big") %>')"/><imgsrc='<%#Eval("Pic4Thumb") %>'onclick="changeURL('<%#Eval("Pic4Big") %>')"/><imgsrc='<%#Eval("Pic5Thumb") %>'onclick="changeURL('<%#Eval("Pic5Big") %>')"/><imgsrc='<%#Eval("Pic6Thumb") %>'onclick="changeURL('<%#Eval("Pic6Big") %>')"/><imgsrc='<%#Eval("Pic7Thumb") %>'onclick="changeURL('<%#Eval("Pic7Big") %>')"/><imgsrc='<%#Eval("Pic8Thumb") %>'onclick="changeURL('<%#Eval("Pic8Big") %>')"/><imgsrc='<%#Eval("Pic9Thumb") %>'onclick="changeURL('<%#Eval("Pic9Big") %>')"/><imgsrc='<%#Eval("Pic10Thumb") %>'onclick="changeURL('<%#Eval("Pic10Big") %>')"/>
</ItemTemplate>
</asp:Repeater>
It still isnt showing the big picture when i debug... any reason for that?
nevermind.. figured that one out too.. it's working now, but it still has an issue.
1) When it loads, the user is shown the 10 image thumbnails. when a thumbnail is clicked, it makes the modalpopup misaligned and the only way to re-center it is to scroll.. this can be solved by loading the 1st big image on the thumbnail list when it loads... but how do i do that?
2) If the user only uploads 3 out of the 10 allowed images, how do i make the other 7 not visible? this is easily acheived in vb .net code, but with this im not sure.
Also, i have a image "caption" that the user can type in when uploading an image... how can i make that change with the picture as well?
The changeURL in the image needs to have a closing single quote and parenthesis.
Also, your table has a column for each image? The repeater won't help if your structure is like that. A normalized table would have at least two columns, one for the big picture url and one for the small one. Then rows would be added under those columns with the urls. That's where a repeater control would help you.
juneof44:
The changeURL in the image needs to have a closing single quote and parenthesis.
Also, your table has a column for each image? The repeater won't help if your structure is like that. A normalized table would have at least two columns, one for the big picture url and one for the small one. Then rows would be added under those columns with the urls. That's where a repeater control would help you.
I know the way i set up my database wasnt the best... but to change it now will take a reallllllly long time. I used the repeater to just add the 10 images, considering thats how many i allow... obviously this isnt the best way, because now if i have only 3 images, i will show 7 images with X's... (except in firefox, cause they're SMART)
And oh yea, did you read my last post right above yours? about the not centering and the captions?
2) If the user only uploads 3 out of the 10 allowed images, how do i make the other 7 not visible? this is easily acheived in vb .net code, but with this im not sure.
Why not set the style attribute of display = none to the remaining 7 images? You could do this serverside or client side.
Do you have an example in vb how to do this on the server side using standard <img tags?
If you change the image to server Image controls you may be able to do something like:
myimage.Attributes.Add("display","none")
But i thought earlier in this thread we discovered that to make the images switch with the bigger image, it needed to use standard <img tags... if i was able to use server image tags, i could just as easily say myimage.visible = false...
I see. I thought if it were visible = false it would not be rendered. By using css its there just invisible. Sorry for the confusion.
No comments:
Post a Comment