Thumbnail Viewer

Page 1 of 2 12 LastLast
  1. #1

    Thumbnail Viewer

    Hi,

    I´m trying to get a thumbnail viewer.
    Is there any example or post in Ext.Net to tell me how?

    Thanks.
  2. #2
    Can you point to an example online somewhere of a thumbnail viewer?
    Geoffrey McGill
    Founder & CEO
  3. #3
    Hi Geoffrey,

    There are a lot of pages with a thumnail viewer.
    For example:

    http://highslide.com/
    http://www.dynamicdrive.com/dynamici...thumbnail2.htm
  4. #4
    Hi,

    This is the code I got so far:

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="xample.aspx.cs" Inherits="xample" %>
    <%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>
    <%@ Register src="xample_popup.ascx" tagname="xample_popup" tagprefix="uc2" %>
    
    <script runat="server">
        protected void btnPhotos_Click(object sender, DirectEventArgs e)
        {
            //Shows photos of employee 1
            Employee empl;
            xample_popup.Complete(empl.getEmployee(1));
            xample_popup.Show();
        }
    
    </script> 
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>Example</title>
        <link rel="stylesheet" type="text/css" href="css/dataview.css" /> 
    </head>
    <body>
       <form id="xample1" runat="server">
                   
       <ext:ResourceManager ID="ResourceManager1" runat="server" />
       
       <ext:Button ID="btnPhotos" runat="server" Text="View Photos">
            <DirectEvents>
                <Click OnEvent="btnPhotos_Click" />       
            </DirectEvents>
        </ext:Button>
       
       <uc2:xample_popup ID="xample_popup" runat="server" />
                   
       </form>  
    </body>
    </html>
    
    <%@ Control Language="C#" AutoEventWireup="true" CodeFile="xample_popup.ascx.cs" Inherits="xample_popup" %>
    <%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>
    
    <script runat="server">
        public void Show()
        {
            window1.Show();
        }
    
        public void Complete(Employee empl)
        {       
            store_photos.DataSource = empl.getPhotos;
            store_photos.DataBind();
        }    
    </script>
    
    <link rel="stylesheet" type="text/css" href="css/dataview.css" />
    <script type="text/javascript">
        
           function showPhoto(url)
           {         
              photoOrg.ImageUrl = url;
           }
        
    </script>
    
    <ext:Store ID="store_photos" runat="server">
          <Reader>
             <ext:JsonReader>
                <Fields>               
                   <ext:RecordField Name="getDescr" />
                   <ext:RecordField Name="getUrl" />                       
                </Fields>
             </ext:JsonReader>
          </Reader>                      
       </ext:Store>
    
     <ext:Window ID="window1" runat="server" Title="Details" Width="535" Height="500" Hidden="true">              
       
          <Items>
             
             <ext:TabPanel ID="TabPanel1" runat="server" ActiveTabIndex="0" Border="false" DeferredRender="false">
             
                <Items>
                   
                   <ext:Panel ID="tabPhotos" runat="server" Title="Photos" Icon="Image" >
                      
                      <Items>
                   
                         <ext:Panel ID="panelThumb" runat="server" Cls="images-view" Border="false" Width="535" Height="100" >
                            <Items>
                               <ext:DataView ID="dataView1" runat="server" StoreID="store_photos" AutoHeight="true" 
                                             OverClass="x-view-over" ItemSelector="div.thumb-wrap" EmptyText="No images">
                                  
                                  <Template ID="Template1" runat="server">
                                     <Html>
                                        <tpl for=".">
                                           <div class="thumb-wrap" id="{getDescr}">
                                              <div class="thumb">
                                                 <img src="{getUrl}" title="{getDescr}" alt="{getDescr}" onclick="showPhoto('{getUrl}')">                                               
                                              </div>
                                              <span class="x-editable">{getDescr}</span>
                                           </div>
                                        </tpl>
                                     </Html>        
                                  </Template>
                                                                                                                
                               </ext:DataView> 
                            </Items>
                         </ext:Panel>
                         
                         <ext:Panel ID="panelPhotoOrg" runat="server" Border="false" Padding="5" Width="535" Height="370">
                            <Items>                           
                               <ext:Image runat="server" ID="photoOrg" />                                         
                            </Items>
                         </ext:Panel>
                                 
                      </Items>
                   </ext:Panel>
                </Items>      
             </ext:TabPanel>
          </Items>         
       </ext:Window>
    I want to achieve that clicking on the thumbnail to load the picture into the Image 'photoOrg'.

    This code shows a javascript Error ( photoOrg is not defined) when click a photo.

    I need your help.

    Thanks.
    Last edited by walle; Dec 07, 2010 at 10:01 PM.
  5. #5
    Hi,

    Any idea about it?

    Thanks.
    Last edited by walle; Dec 07, 2010 at 9:07 PM.
  6. #6
    Hi,

    I can't achieve that clicking on the thumbnail to load the picture into the Image photoOrg.

    I tried this but doesn´t work.

    <img src="{getUrl}" title="{getDescr}" alt="{getDescr}" onclick="photoOriginal.ImageUrl='{getUrl}'">
    Can anyone help me?

    Thanks.
    Last edited by walle; Dec 08, 2010 at 9:46 AM.
  7. #7
    Hi,

    Please use the .setImageUrl(url) method to change an image.
  8. #8
    Hi Daniil,

    Sorry, I tried what you said:
    <img src="{getUrl}" title="{getDescr}" alt="{getDescr}" onclick="photoOrg.setImageUrl('{getUrl}');">
    but get the same error:
    This code shows a javascript error when click a photo: ('photoOrg is not defined').

    I tried this but doesn´t work either:

    <script type="text/javascript">
         
       function showPhoto(url)
       {        
          photoOrg.setImageUrl(url);
       }
         
    </script>
    
    ...
    
    <img src="{getUrl}" title="{getDescr}" alt="{getDescr}" onclick="showPhoto('{getUrl}')">
    
    ...
    
    <ext:Panel ID="panelPhotoOrg" runat="server" Border="false" Padding="5" Width="535" Height="370">
       <Items>                           
          <ext:Image runat="server" ID="photoOrg" />                           
       </Items>
    </ext:Panel>
    I get the same javascript error: 'photoOrg is not defined'.

    Note:

    I have verified that without user control (all in one aspx page) it works fine.

    How can i get to work fine with a user control?
    Last edited by walle; Dec 08, 2010 at 12:29 PM.
  9. #9
    Hi,

    Please provide a full code to test, see Example (Very Helpful) here:

    http://forums.ext.net/showthread.php...ing-New-Topics
  10. #10
    Hi Daniil,

    The full code to test you can see it in post #4 of this thread.
    The others posts are changes to this code but have not worked fine.
Page 1 of 2 12 LastLast

Similar Threads

  1. Crystal Report Viewer is not showing?
    By sadeque in forum 1.x Help
    Replies: 6
    Last Post: Nov 10, 2011, 4:43 PM
  2. Custom Report Viewer
    By harinarayanan123 in forum 1.x Help
    Replies: 0
    Last Post: Aug 19, 2010, 11:47 AM
  3. [CLOSED] Image Viewer
    By cobiscorp in forum 1.x Premium Help
    Replies: 3
    Last Post: Jul 28, 2010, 11:28 AM
  4. [CLOSED] [1.0] PDF Viewer in Tab
    By rcaunt in forum 1.x Premium Help
    Replies: 6
    Last Post: May 17, 2010, 11:49 AM
  5. Crystal Report Viewer Overlap
    By EzaBlade in forum 1.x Help
    Replies: 0
    Last Post: Sep 23, 2009, 2:26 PM

Posting Permissions