Need More Control Over Text Displayed

Last post 06-10-2011, 1:32 AM by Kenneth. 3 replies.
Sort Posts: Previous Next
  •  06-02-2011, 8:45 PM 67789

    Need More Control Over Text Displayed

    Earlier versions of DotNetGallery had an XML file that let me specify complete control over the display of photos which I needed. 
    Specifically:
    • I put the thumbnails and the accompanying photos in an arbitrary order of my choosing
    • Each thumbnail had a title
    • Each photo had a centered title under the photo
    • Each photo had a centered description in a smaller font under the title
    • File names, photo sizes, and file dates were intentionally kept hidden from the viewer.
    I would like to be able to use the current release of DotNetGalley as I did in the past but I have seen no demos of how I might do this or any evidence that XML files are still supported.  Is it possible to be able to accomplish what I've listed in the bullet points above with the current release of DotNetGallery?
     
    Thanks,
    --Mike
  •  06-02-2011, 9:26 PM 67792 in reply to 67789

    Re: Need More Control Over Text Displayed

    Hi mikek40,
     
    Which layout you want to use? I will show you how to achieve the requirements you mentioned.
     
    Regards,
     
    Ken
  •  06-03-2011, 1:36 PM 67800 in reply to 67792

    Re: Need More Control Over Text Displayed

    Hi Ken,
     
    The Classic Layout would be fine.  Thanks for your help.
     
    --Mike
  •  06-10-2011, 1:32 AM 67893 in reply to 67800

    Re: Need More Control Over Text Displayed

    Hi mikek40,
     
     
    I put the thumbnails and the accompanying photos in an arbitrary order of my choosing
     
    1. Open file "\CuteSoft_Client\Gallery\Layout\Classic\Code.js"
     
    2. Add the section below to the top of the page above
     
    function BubbleSort(arr)
        {
            var temp;
            var exchange;
            for(var i=0; i<arr.length; i++)
            {
                exchange = false;
                for(var j=arr.length-2; j>=i; j--)
                {
                    if((arr[j+1].Thumbnail) >(arr[j].Thumbnail))
                    {
                        temp = arr[j+1];
                        arr[j+1] = arr[j];
                        arr[j] = temp;
                        exchange = true;
                    }
                }
                if(!exchange) break;
            }
            return arr;
         }
     
    3. Find section below
     
        for(var i=0;i<this._categories.length;i++)
        {
            photos=photos.concat(this._categories[i].Photos);
        }
     
    4. Change to
     
        for(var i=0;i<this._categories.length;i++)
        {
            photos=photos.concat(this._categories[i].Photos);
        }
        photos=BubbleSort(photos);
     ----------------------------------------------------------------------------
    Now the photos order by the name.
     
    You can change the ">" below to switch the order
     
     if((arr[j+1].Thumbnail) >(arr[j].Thumbnail))
     ----------------------------------------------------------------------------
     
    5. Open file "\CuteSoft_Client\Gallery\Viewer\LightBox\Code.js "
     
    6. Add the code below to the top of the page 
     
    function BubbleSort(arr)
        {
            var temp;
            var exchange;
            for(var i=0; i<arr.length; i++)
            {
                exchange = false;
                for(var j=arr.length-2; j>=i; j--)
                {
                    if((arr[j+1].Thumbnail) >(arr[j].Thumbnail))
                    {
                        temp = arr[j+1];
                        arr[j+1] = arr[j];
                        arr[j] = temp;
                        exchange = true;
                    }
                }
                if(!exchange) break;
            }
            return arr;
         }
     
    7. Find section below
     
    for(var i=0;i<cs.length;i++)
        {
            photos=photos.concat(cs[i].Photos);
        }
     
    8. Change to
     
    for(var i=0;i<cs.length;i++)
        {
            photos=photos.concat(cs[i].Photos);
        }
        photos=BubbleSort(photos);
     
     ----------------------------------------------------------------------------
    Step 5-8 change the order when you click on the image to open the viewer mode
     
     ----------------------------------------------------------------------------
     
    Each thumbnail had a title
     
    Each photo had a centered title under the photo
     
    Each photo had a centered description in a smaller font under the title
     
    1. Open file "\CuteSoft_Client\Gallery\Layout\Classic\Code.js"
     
    2. Find section below
     
    for(var i=0;i<photos.length;i++)
        {
            var div=this.CreatePhotoDiv(photos[i]);
            this.AttachItemEvent(div);
            this.dng_photolist.appendChild(div);
         }
     
    3. Change to 
     
    for(var i=0;i<photos.length;i++)
        {
            var div=this.CreatePhotoDiv(photos[i]);
            this.AttachItemEvent(div);
            var divTitle=document.createElement("DIV");
            divTitle.innerHTML="MyTitle";
            var divDescription =document.createElement("DIV");
            divDescription.innerHTML="MyDescription";
            divDescription.style.fontSize="xx-small";
            div.appendChild(divTitle);
            div.appendChild(divDescription);
            this.dng_photolist.appendChild(div);
        
        }
     
     
     ----------------------------------------------------------------------------

    string MyTitle is the image title
    string MyDescriptionis the image description

      ----------------------------------------------------------------------------
     
    File names, photo sizes, and file dates were intentionally kept hidden from the viewer.
     
    Hide the file name
     
    1. Open file "CuteSoft_Client\Gallery\Viewer\LightBox\Code.js"
     
    2. Find section below and comment it
     
    this.phototext.appendChild(document.createTextNode(photo.Title));
     
    Hide the photo size
     
    1. Open file "CuteSoft_Client\Gallery\Viewer\LightBox\Code.js"
     
    2. Find section below and comment it
     
    this.toolbar.appendChild(this.photoinfo);
     
    Hide the photo comment
     
    Just need to set AllowShowComment="false" AllowPostComment="false"
     
     <DotNetGallery:GalleryBrowser runat="server" ID="GalleryBrowser1" Width="720" Height="430"
                Layout="Classic" AllowShowComment="false" AllowPostComment="false" />
     
     
    Regards,
     
    ken
View as RSS news feed in XML