none
DataList(xml)の画像を拡大表示する RRS feed

  • 質問

  • DataList(xmlにバインド)で画像の表示をしているのですが画像(イメージボタンでWidth=160pxに設定)をクリックすると、別ページに拡大画像(オリジナル画像)を表示させたく試行しています。

    現在以下のようになっていますが、DatalistページのImageUrl=Eval(link)のところがわかりません。

    ”DataListで選択された値を取得”などで調べたりしてるのですが、、、。Evalの使用でいいのかな?

    すみませんご指導お願いします。

    Datalistページに

     protected void ImageButton1_Click(object sender, ImageClickEventArgs e)
        {   DataListItem Item = DataList1.SelectedItem;
            Response.Redirect("~/ImageZoom.aspx?ImageUrl=Eval(link)");

    ImageZoomページに

     protected void Page_Load(object sender, EventArgs e)
        {   String s = Request.QueryString["ImageUrl"];
            Image1.ImageUrl = s;
            Image1.DataBind();   }

    DataListのItemTemplateは

                        <ItemTemplate>
                            <asp:ImageButton ID="ImageButton1" runat="server"
                                ImageUrl='<%# Eval("link") %>' onclick="ImageButton1_Click" Width="160px" />
                            <br />
                            <asp:Label ID="Label4" runat="server" Text='<%# Eval("name") %>'></asp:Label>
                        </ItemTemplate>

    xmlデータは
    <root>
    < dir0 name="AA" id="1" >
    < dir1 name="S" >
    < file name="001.jpg" path="/images/AA/S/001.jpg" />
    < file name="002.jpg" path="/images/AA/S/002.jpg" />
    < /dir1 >
          <dir1 name="T" >
              <file name="001.jpg" path="/images/AA/T/001.jpg" />
          </dir1 >
    </dir0>
      <dir0 name="BB" id="2" >
        < dir1 name="S" >
          < dir2 name="S-1" >
             < file name="001.jpg" path="/images/BB/S/S-1/001.jpg" />
          < /dir2>

    *画像のnameは一意ではありません。dir0のidは一意です。dir1、dir2のnameはdir0の中では一意です。

     

     

     


    2011年11月21日 11:26

回答

  • 失礼ながら、はっきり言ってめちゃくちゃです。本など読んで、体系的に勉強
    することをお勧めします。

    TreeView のノードを選択して width="160px" に縮小表示された画像をクリック
    してオリジナル画像を表示したいのなら、ImageButton も ImageButton1_Click
    ハンドラも ImageZoom ページも不要で、DataList の ItemTemplate を以下のよ
    うにするだけで目的を果たせます。

    <ItemTemplate>
      <a href='<%# Eval("path") %>' target="_self">
        <img src='<%# Eval("path") %>' alt='<%# Eval("name") %>' width="160px" />
      </a>
      <br />
      <asp:Label ID="nameLabel" 
        runat="server" 
        Text='<%# Eval("name") %>' />
    </ItemTemplate>
    
    

    オリジナル画像を別ページに表示したいなら target="_blank" に変更すれば可能
    です。

    なお、オリジナル画像を 160px に縮小して表示するのは、オリジナル画像のサイ
    ズにもよりますが、非常にムダです。できればサイズの小さいサムネイルを作っ
    た方が良いです。

    • 回答としてマーク taka_toshi 2011年11月23日 0:13
    2011年11月21日 13:23

すべての返信

  • 失礼ながら、はっきり言ってめちゃくちゃです。本など読んで、体系的に勉強
    することをお勧めします。

    TreeView のノードを選択して width="160px" に縮小表示された画像をクリック
    してオリジナル画像を表示したいのなら、ImageButton も ImageButton1_Click
    ハンドラも ImageZoom ページも不要で、DataList の ItemTemplate を以下のよ
    うにするだけで目的を果たせます。

    <ItemTemplate>
      <a href='<%# Eval("path") %>' target="_self">
        <img src='<%# Eval("path") %>' alt='<%# Eval("name") %>' width="160px" />
      </a>
      <br />
      <asp:Label ID="nameLabel" 
        runat="server" 
        Text='<%# Eval("name") %>' />
    </ItemTemplate>
    
    

    オリジナル画像を別ページに表示したいなら target="_blank" に変更すれば可能
    です。

    なお、オリジナル画像を 160px に縮小して表示するのは、オリジナル画像のサイ
    ズにもよりますが、非常にムダです。できればサイズの小さいサムネイルを作っ
    た方が良いです。

    • 回答としてマーク taka_toshi 2011年11月23日 0:13
    2011年11月21日 13:23
  • ありがとうございます。
    htmlの基本的なことを利用すればよかったのですね。その辺はすっ飛ばしていました。
    今後htmlも疎かにせず並行して調べてゆきたいと思います。
    とりあえず拡大表示ができホッとしています。


    >できればサイズの小さいサムネイルを作った方が良いです。
    ここが今悩ましいところです。
    現在xmlのpathとnameにはオリジナルの画像が記述されています。これからサムネイルを作ってオリジナルと使い分けてやろうとは思っているのですが、、、、。


    1.サムネイルをどこに保存するか。オリジナルと同じフォルダに保存するかどうか。(次の2番と関わります)
    2.xmlに登録する際、dirやnameやpathなどオリジナルと特に区別する配慮が必要か。
    3.TreeViewで画像が入っているdir1などを展開した場合にファイル名001.jpgなどがかなりの数(数百)表示されるが、現在の動きを損なわずにこのファイル名を非表示にできるか。(dir1をクリックすると画像を全て表示できるため、TreeViewでファイル名を1つずつ選択して表示できなくてよい。)


    別に質問を立てた方がよいかとは思いますが、アドバイスいただければ嬉しいです。

    2011年11月22日 6:37
  • > 別に質問を立てた方がよいかとは思いますが、

    そうしてください。

    その前に、ASP.NET Web アプリ開発の関する基本的な知識を習得さ
    れることをお勧めします。

    その上で、どうするのが適切か方針を決めて、技術的に実現可能か
    の見通しを立てて、本や MSDN ライブラリなどをよく調べながら見
    通しを具体化して、どうしてもわからない点だけを整理して質問す
    るようにしていただければと思います。

    結局その方が解決に要する時間が少なくて済むと思います。

    とにかく、今のやり方は、はっきり言ってフォーラムが質問者さん
    以外の役に立ってないと思います。

     

     

    2011年11月22日 13:18
  • ありがとうございます。

    すみません全体的なことを考えず、自分のことばかりになってしまい、、、。

    ど素人なため、やりたいことは判っているのですが、暗い迷路を進んで、明るい道が見えた時点で新たな問題が生じている状況です。

    見切り発進である点は否めないのですが(完璧に隅々までプランが建っていない)、経験知識ともほとんどないためどうかご容赦ください。

    今後もご指導いただければありがたいと思います。

     

    2011年11月23日 0:13