Jag vill göra en sida som gör följande.

Visar detaljer om en viss produkt, detta är inga problem och fungerar.

Jag vill också att det ska laddas in fem bilder. Jag vill att dessa ska visas som små bilder och en stor, när man sen klickar på en av de små ska den bli stor och visas där den stora bilden visas. Nu har jag det i en tabell så här:
<code>
<asp:Repeater ID="Repeater1" runat="server" DataSourceID="sqlGetAdPics">
<ItemTemplate>
<table>
<tr>
<td colspan="5">
<img src='graphics/Advertise/<%#Eval("advertisePic") %>' width="240px" />
</td>
</tr>
<tr>
<td><img src='graphics/Advertise/<%#Eval("advertisePic") %>' width="42px" /></td>
</tr>
</table>
</ItemTemplate>
</asp:Repeater>
</code>
Hur kan jag få detta att fungera? Det är just "bytet" av bild jag inte klarar av, jag vill helst ha en updatPanel också så inte hela sidan laddas om.

Hej,

Även med updatePanel så laddas det om fast du upplever det inte så.

Jag skulle ev gjort på följande sätt.

Haft en <asp:Image...> för stora bilderna och flera för små.
Kopplat click event på de små mot samma Command med olika CommandArgument, dvs
ev stora bildernas namn. I min Command metod skulle jag leta reda på <Asp:Image....> som skall innehålla den stora bilden och sätta den på image sourcen... och image sourcenm dvs filnmanet får jag via commandArgumenetes värde...

Mvh Johan

Hej Johan
Jag funderade på att göra typ så, men då får jag inte nån stor bild från börjen, eller kan jag på nåt sätt fixa det?

Du kan ju alltid ha en "prefered" kolum i databasen med idt på den bild som du vill visa som stor. Då kan du ju välja vilken som skall visas, eller så kan du helt enkelt bara vilken som av de bilderna som returneras när du får fram din lista.

Vill du dynamiskt visa bilden? dvs du vill ladda in bägge i minnet med en gång?
Du kan ju typ lösa det med javascript, men frågan är om du vinner så mkt på det, det tar ju en del minne på klienten och sidan kommer bli seg o starta om alla skall laddas till klienten vid sidstart.

Jag skulle nog kört på att låta Ajax hämta in rätt bild istället när personen trycker på sin miniatyr.
Vem vet kunden kanske inte vill se någon stor bild alls, eller vara en... Att då "Tvinga" användaren att ladda in alla miniatyrer som stora i minnet tycker jag är lite fel.

Mvh Johan

Jag trodde jag fattade hur jag skulle göra, men det gör jag inte. Har suttit skitlänge med detta nu.
jag har följande kod. Den först bilden visas, men som ni ser är den hårdkodad, jag har ändrat i min SP så jag får med en bild i den som jag tänkte skulle visas från början. den första bilden "Image1" ligger i en DetailView också.
<code>
protected void Page_Load(object sender, EventArgs e)
{
Image Image1 = (Image)DetailsView1.FindControl("Image1");
Image1.ImageUrl = "graphics/Advertise/sadel2.jpg";
}
</code>
<code>
<table style="background-color: #E4F9DF; margin: 10px 0px 0px 0px; border: 1px solid green;
width: 545px; border-collapse: collapse;">
<tr>
<td class="BoldText" colspan="2" style="border-bottom: 1px solid green; background-color: #b0eda2;
text-align: center;">
Bilder
</td>
</tr>
<tr>
<td style="text-align:center">
<asp:Image ID="Image1" Width="530px" runat="server" />
</td>
</tr>
<tr>
<td>
<asp:Repeater ID="Repeater1" DataSourceID="sqlGetAdPics" runat="server">
<ItemTemplate>
<asp:Image ID="Image2" runat="server" ImageUrl='graphics/advertise/<%#Eval("advertisePic") %>' />
</ItemTemplate>
</asp:Repeater>
</td>
</tr>
</table>
</code>
Johan - att användaren inte vill se bilden tror jag inte har så stor betydelse i detta fall. Eftersom det är annonser som visas och det visas klart och tydligt innan de klickar på länken att se detaljer att det finns bilder.

Om det skall ske i realtid allt, dvs med en gång upplevelse så är det kanske bäst o göra allt detta med javaScript. Dvs ett sctipt som laddar in alla bilderna, sen registrerar du ett script via codebehind för att där även skapa scriptet så du får rätt image ID (detta för att .Net kan ge olika idn beroende på hur kontrolträdet ritas upp så blir det svårt att hårdkoda ett).

På lilla bildens <asp:Image.... lägger du ett OnClick="<din javascriptsmetod('bigpicture.jpg')"

Jag har inga script i huvudet eller kod så jag kan tyävrr inte visa hur du skall gå tillväga.

Här är kort ex hur du kan registrerar script:

string jScript="<script>alert ('Javascript block of code executed')</script>";
Page.RegisterClientScriptBlock("keyClientBlock",jScript);

Scriptet kommer läggas in aoutomatiskt i din HTML. Och det är här du måste skapa ditt script så
du får med rätt control ID. ex.

string fooScript = "<script> alert('" + image1.UniqueID + "');</script>";

Ställ gärna frågan ang hur JavaScriptet kan se ut under JavaScript här på forumet.

Mvh Johan

Blir det enklare om det inte sker i realtid? Hur löser jag i så fall det? Fattar inte att detta ska vara så svårt. Jag kommer att göra en funktion som förminskar bilderna till ca 80 - 90 kb, så det kommer inte att ta så lång tid när användaren laddar om sidan i alla fall.

Jag har kommit en liten bit på väg nu. Jafg får rätt bild att visas när jag klickar på den lilla bilden, då visas den som stor. problemet är att de små bilderna inte visas, det är som om sökvägen vore fel, jag vet inte hur jag ska lösa det. Jag kan ju inte skriva ImageUrl='graphics/Advertise/<%#Eval("advertisePic")%>' eftersom det är en serverkontroll, men på nåt sätt måste det ju gå att göra i CB.

När det gäller den stora bilden måste jag ju i CB kunna ange att "Image1" ska visa advertisePic som kommer från databasen, men i vilket event gör jag det? MIn kod ser ut så här nu:
<code>
protected void imgBtnChangePic_Click(object sender, RepeaterCommandEventArgs e)
{
if (e.CommandName == "changePic" && Page.IsPostBack)
{
Image Image1 = (Image)DetailsView1.FindControl("Image1");
Image1.ImageUrl = "graphics/Advertise/" + e.CommandArgument.ToString();
}
}

.ASPX

<asp:Repeater ID="Repeater1" OnItemCommand="imgBtnChangePic_Click" DataSourceID="sqlGetAdPics" runat="server">
<ItemTemplate>
<asp:ImageButton ID="ImageButton1" CommandName="changePic"
ImageUrl='graphics/Advertise/<%#Eval("advertisePic")%>'
CommandArgument='<%#Eval("advertisePic") %>'
runat="server"/>
</ItemTemplate>
</asp:Repeater>

</code>

Nu är det löst:)
.aspx
<code>
<asp:Repeater ID="Repeater1" OnItemDataBound="Repeater1_ItemDataBound" OnItemCommand="imgBtnChangePic_Click"
DataSourceID="sqlGetAdPics" runat="server">
<ItemTemplate>
<asp:ImageButton ID="ImageButton1" CommandName="changePic"
ImageUrl='<%#"graphics/Advertise/" + Eval("advertisePic")%>'
CommandArgument='<%#Eval("advertisePic") %>'
runat="server" Width="50px" BorderColor="black" BorderStyle="solid" BorderWidth="1px"/>
</ItemTemplate>
</asp:Repeater>
</code>

.aspx.cs
<code>
protected void imgBtnChangePic_Click(object sender, RepeaterCommandEventArgs e)
{
if (e.CommandName == "changePic" && Page.IsPostBack)
{
Image Image1 = (Image)DetailsView1.FindControl("Image1");
Image1.ImageUrl = "graphics/Advertise/" + e.CommandArgument.ToString();
}
}

protected void Repeater1_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
{
if(e.Item.ItemIndex == 0)
{
Image1.ImageUrl = "graphics/Advertise/" + DataBinder.Eval(e.Item.DataItem, "advertisePic");
}
}
}
</code>

Detta gör att rätt bild laddas från början när man kommer in på sidan. Sedan visas om det finns fler bilder som små bilder. Klickar man på en av dom så växlar bilderna och den man klickade på blir stor. Ska bara lösa så att bilden inte visas alls om det inte finns någon bild, nu visas bilden i sin helhet med det röda krysset uppe till vänstr.

:-)

Kul att du kom fram till en lösning. Om du kastar in AJAX kan du ju skapa en känsla av dynamik oxå.

Mvh Johan

Bilderna ligger i en updatepanel. Var det så du menade?

Ja... tror det :-)

Menade att när man trycker på den så blir det ingen Postback känsla, dvs sidan blinkar inte till...

Mvh Johan

Japp, så är det. Det blev faktiskt riktigt bra. Ska bara försöka fixa så det inte visas nåt när det inte finns nån bild att visa.