Support forums » Products » ASP.Net Image Gallery » Re: Set Paging to Image Gallery (Classic Layout)

Set Paging to Image Gallery (Classic Layout)

Last post 12-16-2013, 8:23 AM by Kenneth. 1 replies.
Sort Posts: Previous Next

  •  12-16-2013, 1:10 AM 78600

    Set Paging to Image Gallery (Classic Layout)

    Reply Quote

    Hi,

                  I am Using Image Gallery (Classic Layout). I want to set paging functionality (asynchronously) to that image gallery.

     

    How can I achieve this.. 

     

    Please Try to give Quick Reply... 

    Regards,
    Narendra

  •  12-16-2013, 8:23 AM 78609 in reply to 78600

    Re: Set Paging to Image Gallery (Classic Layout)

    Reply Quote

    Hi narendrababu,

     

    Please open file "CuteSoft_Client\Gallery\Layout\Classic\Code.js", clean all the code then use the new code below.

     

    The first line "var GRIDSHOW_PAGESIZE=5;" use to set how many images to show in 1 page. 

    1. var GRIDSHOW_PAGESIZE=5;  
    2. function GalleryLayout(gb)  
    3. {  
    4.     this.Browser=gb;  
    5.   
    6.     this.dng_photolist=this.Browser.FindElement("dng_photolist");  
    7.       
    8.       
    9.       
    10.     this.Browser.Control.style.minHeight=this.Browser.Control.style.height;  
    11.     this.Browser.Control.style.height="";  
    12.       
    13.     var uploadercontainer=this.Browser.GetUploaderContainer();  
    14.     if(uploadercontainer)  
    15.     {  
    16.         this.Browser.FindElement("dng_uploaderholder").appendChild(uploadercontainer);  
    17.     }  
    18.     else  
    19.     {  
    20.   
    21.     }  
    22.       
    23.     this._categories=this.Browser.GetCategories();  
    24.   
    25.     this.DrawUI();  
    26. }  
    27.   
    28. GalleryLayout.prototype.DrawUI=function _GalleryLayout_DrawUI()  
    29. {  
    30.     clearTimeout(this._animationTimerid);  
    31.       
    32.     this.dng_photolist.innerHTML="";  
    33.       
    34.     var photos=[];  
    35.     for(var i=0;i<this._categories.length;i++)  
    36.     {  
    37.         photos=photos.concat(this._categories[i].Photos);  
    38.     }  
    39.     var page=this._page||1;  
    40.     var size=GRIDSHOW_PAGESIZE;  
    41.     var start=(page-1)*size;  
    42.         for(var i=0;i<size;i++)  
    43.     {  
    44.         var photo=photos[start+i];  
    45.         if(!photo)  
    46.             break;  
    47.         var div=this.CreatePhotoDiv(photo);  
    48.         this.AttachItemEvent(div);  
    49.         this.dng_photolist.appendChild(div);  
    50.     }  
    51.         var pagecount=Math.ceil(photos.length/size);  
    52.     if(pagecount==0)  
    53.         return;  
    54.     if(pagecount==1&&page==1)  
    55.         return;  
    56.         //draw pager :  
    57.     var pager=document.createElement("DIV");  
    58.     pager.style.textAlign="left";  
    59.     pager.style.clear="both";  
    60.     this.dng_photolist.appendChild(pager);  
    61.     var layout=this;  
    62.     function SetupButton(btn,btnpage)  
    63.     {  
    64.         if(page==btnpage)  
    65.         {  
    66.             btn.style.fontWeight="bold";  
    67.         }  
    68.         btn.innerHTML="["+btnpage+"]";  
    69.         btn.href="#";  
    70.         btn.onclick=ToDelegate(layout,function()  
    71.         {  
    72.             this._page=btnpage;  
    73.             this.DrawUI();  
    74.             return false;  
    75.         });  
    76.     }  
    77.       
    78.     for(var i=0;i<pagecount;i++)  
    79.     {  
    80.         var btn=document.createElement("A");  
    81.         SetupButton(btn,i+1);  
    82.         pager.appendChild(btn);  
    83.         pager.appendChild(document.createTextNode(" "));  
    84.     }  
    85.       
    86. }  
    87.   
    88. GalleryLayout.prototype.CreatePhotoDiv=function _GalleryLayout_CreateItemDiv(photo)  
    89. {  
    90.     var div=document.createElement("DIV");  
    91.     div.className="GalleryPhotoItem";  
    92.     div.dngphoto=photo;  
    93.     var t=document.createElement("TABLE");  
    94.     t.style.width="100%";  
    95.     t.style.height="100%";  
    96.     t.border=0;  
    97.     t.cellSpacing=0;  
    98.     t.cellPadding=0;  
    99.     var c1=t.insertRow(-1).insertCell(-1);  
    100.     var c2=t.insertRow(-1).insertCell(-1);  
    101.     c1.className="GalleryItemImageCell";  
    102.     c1.onselectstart=new Function("","return false");  
    103.     c2.style.textAlign="center";  
    104.     var scale = Math.min(128/photo.Width, 96/photo.Height);  
    105.     var img=this.Browser.CreateThumbnail(photo.Thumbnail,Math.floor(photo.Width * scale),Math.floor(photo.Height * scale));  
    106.     c1.appendChild(img);  
    107.     img.style.cursor="hand";  
    108.     img.onclick=ToDelegate(this,function()  
    109.     {  
    110.         this.Browser.ShowViewer(div.dngphoto);  
    111.     });  
    112.       
    113.     c2.innerHTML="<span class='GalleryItemText'></span>";  
    114.     var titltText=photo.Title;  
    115.     if(titltText&&titltText.length>30)titltText=titltText.substring(0,30)+"..";  
    116.     c2.firstChild.appendChild(document.createTextNode(titltText));  
    117.       
    118.     if(this.Browser.Param.AllowShowComment)  
    119.     {  
    120.         var cs=photo.Comments;  
    121.         if(cs&&cs.length)  
    122.         {  
    123.             c2.innerHTML+="<br/><span class='GalleryItemNumComments'>"+cs.length+" "+GalleryLocalize.NUMCOMMENTS+"<span>";  
    124.         }  
    125.     }  
    126.       
    127.     div.appendChild(t);  
    128.     return div;  
    129. }  
    130.   
    131. GalleryLayout.prototype.AttachItemEvent=function _GalleryLayout_AttachItemEvent(div)  
    132. {  
    133.     function SetDivClass(div)  
    134.     {  
    135.         var clsname;  
    136.         if(div.dngselected&&div.dnghover)  
    137.             clsname=" GalleryItemHoverSelected";  
    138.         else if(div.dngselected)  
    139.             clsname=" GalleryItemSelected";  
    140.         else if(div.dnghover)  
    141.             clsname=" GalleryItemHover";  
    142.         else  
    143.             clsname="";  
    144.         div.className="GalleryPhotoItem "+clsname;  
    145.     }  
    146.     div.onmouseover=ToDelegate(this,function()  
    147.     {  
    148.         div.dnghover=true;  
    149.         SetDivClass(div);  
    150.         this.Browser.ShowPhotoTooltip(div.dngphoto,div,this);  
    151.     });  
    152.     div.onmouseout=ToDelegate(this,function()  
    153.     {  
    154.         div.dnghover=false;  
    155.         SetDivClass(div);  
    156.     });  
    157.     div.ondblclick=ToDelegate(this,function()  
    158.     {  
    159.         this.Browser.ShowViewer(div.dngphoto);  
    160.     });  
    161.     div.oncontextmenu=ToDelegate(this,function(event)  
    162.     {  
    163.         event=event||window.event;  
    164.         this.Browser.ShowPhotoMenu(div.dngphoto,div,event,this);  
    165.         if(event.preventDefault)event.preventDefault();  
    166.         event.cancelBubble=true;  
    167.         return event.returnValue=false;  
    168.     });  
    169. }  
    170.   
    171. GalleryLayout.prototype.Ajax_Result=function _GalleryLayout_Ajax_Result(ret,param,method)  
    172. {  
    173.     if(method=="GetAllCategoryData"||method=="GetCategoryData")  
    174.     {  
    175.         this._categories=this.Browser.GetCategories();  
    176.         this.DrawUI();  
    177.     }  
    178. }  
    Regards,

     

    Ken 

     

     
View as RSS news feed in XML