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

Set Paging to Image Gallery (Classic Layout)

Last post 01-07-2014, 11:33 PM by Anonymous. 2 replies.
Sort Posts: Previous Next

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

    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:22 AM 78608 in reply to 78599

    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 

     

     

  •  01-07-2014, 11:33 PM 78714 in reply to 78599

    Re: Set Paging to Image Gallery (Classic Layout)

    Reply Quote
     I usually tested and used image pages sorting of image paging functionality. We can exchange the pages position as exactly what we like, such as in inverted order or arbitrary range. As to other pages fucntions, to be honest, i m not familar.
View as RSS news feed in XML