Редактор контента веб -части Blank в jQuery Slideshow

Question

Теперь я не получаю никаких ошибок. Но редактор контента WP пуст (ну, за исключением изображения передачи). Любые идеи)??

<IMG ID="slideshowPicturePlaceholder" src="/_layouts/images/GEARS_AN.GIF" style="display:none"/>
<style type="text/css">
/*--Main Container--*/
.main_view {
    float: left;
    position: relative;
}
/*--Window/Masking Styles--*/
.window {
    height:286px;   width: 790px;
    overflow: hidden; /*--Hides anything outside of the set width/height--*/
    position: relative;
}
.image_reel {
    position: absolute;
    top: 0; left: 0;
}
.image_reel img {float: left;}

/*--Paging Styles--*/
.paging {
    position: absolute;
    bottom: 40px; right: -7px;
    width: 178px; height:47px;
    z-index: 100; /*--Assures the paging stays on the top layer--*/
    text-align: center;
    line-height: 40px;
    background: url(paging_bg2.png) no-repeat;
    display: none; /*--Hidden by default, will be later shown with jQuery--*/
}
.paging a {
    padding: 5px;
    text-decoration: none;
    color: #fff;
}
.paging a.active {
    font-weight: bold;
    background: #920000;
    border: 1px solid #610000;
    -moz-border-radius: 3px;
    -khtml-border-radius: 3px;
    -webkit-border-radius: 3px;
}
.paging a:hover {font-weight: bold;}
</style>
<center><div id="slideshowContentArea" style="display:none; width:255px;">    
<div class="main_view">
    <div class="window">
        <div class="image_reel">
         </div>
    </div>
    <div class="paging">
        <a href="#" rel="1">1</a>
        <a href="#" rel="2">2</a>
        <a href="#" rel="3">3</a>
        <a href="#" rel="4">4</a>
    </div>
</div>

</div></center>

<script type="text/javascript" src="_layouts/jquery/jquery-1.6.1.min.js"></script>

<script type="text/javascript">

$(document).ready(function() {

    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>NewsList</listName>";
       soapEnv += "<query><Query><OrderBy Override='TRUE'><FieldRef Name='Created' Ascending='FALSE' /></OrderBy></Query></query>";
       soapEnv += "<viewFields><ViewFields><FieldRef Name='Title'/><FieldRef Name='ows_FileLeafRef'/><FieldRef Name='NewsLink'/><FieldRef Name='Description'/></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;
       // Change the below to point to your image library
       var imageURL = window.location.protocol + "//" + window.location.hostname + port + L_Menu_BaseUrl + "/Splash Image Rotator/";
       var itemURL = window.location.protocol + "//" + window.location.hostname + port + L_Menu_BaseUrl + "/Splash Image Rotator/Forms/DispForm.aspx?ID=";

       // $("#slideshowContentArea").html("")
       $(xData.responseXML).find("z\\:row").each(function ()
       {
          var title = $(this).attr("ows_Title");
          var headlines = $(this).attr("ows_Description");
          var imageLink = imageURL + $(this).attr("ows_FileLeafRef").substring($(this).attr("ows_FileLeafRef").indexOf('#') + 1);
          // // var itemLink = itemURL + $(this).attr("ows_ID");
          var itemLink = $(this).attr("ows_NewsLink");
          var liHtml = "<div><a href='" + itemLink + "' target='_blank' border='0'><img width='200' height='200'  src='" + imageLink + "'/></a><p align='center'>" + title + " - " + headlines + "</p></div>";
          $("#image_reel").append(liHtml);

          // Show the paging and activate its first link
          $(".paging").show();
          $(".paging a:first").addClass("active");

          // Get size of the image, how many images there are, then determin the size of the image reel.
          var imageWidth = $(".window").width();
          var imageSum = $(".image_reel img").size();
          var imageReelWidth = imageWidth * imageSum;

          // Adjust the image reel to its new size
          $(".image_reel").css(
          {
             'width' : imageReelWidth
          }
          );


        // Paging  and Slider Function
        rotate = function ()
        {
           var triggerID = $active.attr("rel") - 1;
           // Get number of times to slide
           var image_reelPosition = triggerID * imageWidth;
           // Determines the distance the image reel needs to slide

           $(".paging a").removeClass('active');
           // Remove all active class
           $active.addClass('active');
           // Add active class (the $active is declared in the rotateSwitch function)

           // Slider Animation
           $(".image_reel").animate(
           {
              left : - image_reelPosition
           }
           , 500);

        }
        ;

        // Rotation  and Timing Event
        rotateSwitch = function ()
        {
           play = setInterval(function ()
           {
              // Set timer - this will repeat itself every 7 seconds
              $active = $('.paging a.active').next();
              // Move to the next paging
              if ($active.length === 0)
              {
                 // If paging reaches the end...
                 $active = $('.paging a:first');
                 // go back to first
              }
              rotate();
              // Trigger the paging and slider function
           }
           , 7000);
           // Timer speed in milliseconds (7 seconds)
        }
        ;

        rotateSwitch();
        // Run function on launch

        // On Hover
        $(".image_reel a").hover(function ()
        {
           clearInterval(play);
           // Stop the rotation
        }
        , function ()
        {
           rotateSwitch();
           // Resume rotation timer
        }
        );

        // On Click
        $(".paging a").click(function ()
        {
           $active = $(this);
           // Activate the clicked paging
           // Reset Timer
           clearInterval(play);
           // Stop the rotation
           rotate();
           // Trigger rotation immediately
           rotateSwitch();
           // Resume rotation timer
           return false;
           // Prevent browser jump to link anchor
        }
        );

       });
       }

GetAllImages();
});

</script>

Answer 1

У вас есть

<div class="image_reel">

Но затем вы пытаетесь получить доступ к элементу, как если бы он был id="image_reel"

$("#image_reel").append(liHtml);

Вы должны использовать класс, как в других местах:

$(".image_reel").append(liHtml);

Answer 2

Я подозреваю, что вы не видите никакого контента, потому что вы никогда не показываете () slideshowContentArea Div (он скрыт вашим встроенным CSS).

Добавьте следующее в самом конце processQueryResults Метод:

$('#slideshowContentArea').show();