Ajax Loop Photos

-
function GetPhotos() {
    var row = "<div class='w3-container w3-row-padding'>";
    var itemcount = 0;
    $.ajax({
        url: '/Photos/PhotoList',
        type: 'GET',
        contentType: 'application/json',
        data: "{}",
        dataType: "json",
        success: function (data) {
            var count = Object.keys(data).length;
           // var row = "";
            

            $.each(data, function (item) {
               
            
                if (itemcount % 6 != 0) {
                    row += "<div class='w3-left w3-padding-16'><div class='w3-container w3-center' style='width: 150px;'><img class='w3-round-xlarge' alt='"+ itemcount +"' onclick=" + "if(event.shiftKey){document.getElementById('dispImage')" + ".src='" + data[item].photoSrc + "';" + "document.getElementById('id01')" + ".style.display='block';}else{if(event.ctrlKey||event.metaKey){$(this).toggleClass('csam');}else{$(this).toggleClass('rev');}}" + " id='" + data[item].photoId + "' src=" + data[item].photoSrc + " data-src=" + data[item].photoSrc + " style='width: 100px;' /></div></div>";

                }
                if (itemcount % 6 == 0) {
                    row += "</div>";
                    row += "<div class='w3-container w3-row-padding'>";
                    row += "<div class='w3-left w3-padding-16'><div class='w3-container w3-center' style='width: 150px;'><img class='w3-round-xlarge' alt='" + itemcount + "' onclick=" + "if(event.shiftKey){document.getElementById('dispImage')" + ".src='" + data[item].photoSrc + "';" + "document.getElementById('id01')" + ".style.display='block';}else{if(event.ctrlKey||event.metaKey){$(this).toggleClass('csam');}else{$(this).toggleClass('rev');}}" + " id='" + data[item].photoId + "' src=" + data[item].photoSrc + " data-src=" + data[item].photoSrc + " style='width: 100px;' /></div></div>";

                }
                itemcount++;
              
            });
            row += "</div>";
            $("#photos").html(row + " itemcount=" + itemcount);


        },
        error: function (result) {
            alert("Error");
        }

Comments

Post a Comment

Popular posts from this blog

Grouping with Data Entities

-
I am really loving the data entity in my new projects but have come across a couple of issues already. Tonight I learned about using a field that is not a part of your database and not in the entity but is a consolidation field from a group.  Once I found some good samples it worked incredibly well and I had a little summary grid on the page in just a couple of minutes.  So here is what I did  using (myEntityName context = new myEntityName())     { //First I declared a couple of variables because I was looking at data between specific dates          DateTime startdate = DateTime.Parse("2014-02-01");             DateTime enddate = DateTime.Parse("2014-02-01");          var dbRecords = (from c in context.myTableName                           where (c.MemberStartDate >= startdate && c.MemberStart...
Read more

Localizer in Controller

-
Localizer in Controller Using using Microsoft.Extensions. Localization; Includes private readonly IStringLocalizer< AppAccessController>  _localizer; Resource file must be in a Controller Folder in Resources Method example public Dictionary<string,string> GetRoleList(string appName, bool includeX) { //Code here return allItems.ToDictionary<string, string, string>(i => i, i =>  _localizer[i] ); }
Read more

Sticky Footer made simple

-
CSS Footers are simple but people tend to overthink them.  Here is how it works You have two pieces A container that all your other stuff is in A footer that you want to always stay at the bottom of the page In Blazor I put this container on my content pages and not my host page because I didn't want my left hand nav to be involved <div class="container"> All my content </div> <footer> Centered footer content </footer> And the CSS .container {     width:100%;     padding: 0 15px; } footer {     font-size: 12px; (you could also use a vw value here)     padding-top:20px;     background-color: #xxx;     color: #fff;     margin: auto;     height: 60px;     width: 100%;     position: sticky; //absolute;     bottom: 0;     text-align: center; }
Read more