Question

Is the $(“.slides_container”).append(liHtml) correctly syntaxed? No 1 (browser client) is complaining.

<link rel="stylesheet" href="_layouts/jquery/global.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="_layouts/jquery/slides.min.jquery.js"></script>


<script>
        $(function(){
            $('#slides').slides({
                preload: true,
                preloadImage: '_layouts/jquery/loading.gif',
                play: 5000,
                pause: 2500,
                hoverPause: true,
                animationStart: function(current){
                    $('.caption').animate({
                        bottom:-50
                    },100);
                    if (window.console && console.log) {
                        // example return of current slide number
                        console.log('animationStart on slide: ', current);
                    };
                },
                animationComplete: function(current){
                    $('.caption').animate({
                        bottom:0
                    },200);
                    if (window.console && console.log) {
                        // example return of current slide number
                        console.log('animationComplete on slide: ', current);
                    };
                },
                slidesLoaded: function() {
                    $('.caption').animate({
                        bottom:0
                    },200);
                }
            });
        });
</script>

<div id="container">    
    <div id="slides">
        <div class="slides_container"></div>
        <a href="#" class="prev"><img src="_layouts/jquery/arrow-prev.png" width="24" height="43" alt="Arrow Prev"></a>
        <a href="#" class="next"><img src="_layouts/jquery/arrow-next.png" width="24" height="43" alt="Arrow Next"></a>
    </div>
    <img src="_layouts/jquery/example-frame.png" width="739" height="341" alt="Example Frame" id="frame">
</div>      

<script>

  function GetAllImages()
    {
       $("#slideshowPicturePlaceholder").css("display", "block");
       var soapEnv = "<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'><soapenv:Body><GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'>";
       soapEnv += "<listName>Splash Image Rotator</listName>";
       soapEnv += "<query><Query><Where><Eq> <FieldRef Name='Active'/> <Value Type='Boolean'>1</Value> </Eq> </Where><OrderBy Override='TRUE'><FieldRef Name='Created' Ascending='FALSE' /></OrderBy></Query></query>";
       soapEnv += "<viewFields><ViewFields><FieldRef Name='Title'/><FieldRef Name='ows_FileLeafRef'/><FieldRef Name='NewsLink'/></ViewFields></viewFields><rowLimit></rowLimit>";      
       soapEnv += "</GetListItems></soapenv:Body></soapenv:Envelope>";

       var port = window.location.port;
       if (port.length <= 0)
       port = "";
       else
       port = ":" + port;
       var webservice = window.location.protocol + "//" + window.location.hostname + port + L_Menu_BaseUrl + "/_vti_bin/lists.asmx";

       $.ajax(
       {
          url : webservice,
          type : "POST",
          dataType : "xml",
          data : soapEnv,
          complete : processQueryResults,
          contentType : "text/xml; charset=utf-8",
          error : function (xhr)
          {
             alert('Error!  Status = ' + xhr.status);
          }
       });   
    }
    function processQueryResults(xData, status)
    {
       var port = window.location.port;
       if (port.length <= 0)
       port = "";
       else
       port = ":" + port;

       var imageURL = window.location.protocol + "//" + window.location.hostname + port + L_Menu_BaseUrl + "/Splash Image Rotator/";           
       $(xData.responseXML).find("z\\:row").each(function ()
       {
          var title = $(this).attr("ows_Title");          
          var imageLink = imageURL + $(this).attr("ows_FileLeafRef").substring($(this).attr("ows_FileLeafRef").indexOf('#') + 1);         
          var itemLink = $(this).attr("ows_NewsLink");
          var liHtml = "<div class='slide'><a href='"+itemLink+"' target='_blank' border='0'><img width='420' height='220'  src='" + imageLink +"'/></a>" + "<div class='caption' style=\"bottom:'0'\"><p>" + title + "</p></div></div>";

        $(".slides_container").append(liHtml);      
        });

    }             
GetAllImages();

</script>

Answer 1

I used the W3C validator to check your markup (a bit edited) against the HTML5 doctype:

<!DOCTYPE html>
<html>
  <head>
     <title>asdf</title>
  </head>
  <body>
    <div class='slide'><a href='asdf' target='_blank' border='0'><img width='420' height='220'  src='asdf'/></a><div class='caption' style='bottom:0'><p>asdf</p></div></div>
  </body>
</html>

This gives the following errors:

• an anchor does not have a border attribute. Did you mean to style it like <a style="border:0;">?
• an image should have an alt tag

So yes, your markup at liHtml is invalid, but easy to fix.