Take the 2-minute tour ×
SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It's 100% free, no registration required.

Now I dont get any error(s). But the content editor wp is blank (well, except for the gear image). Any idea(s)??

<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>
share|improve this question
    
Have you confirmed your webservice call comes back ok with the data you need in it? –  James Love May 28 '11 at 18:14
    
yes: web services is bringing data. –  Robert G May 28 '11 at 21:56
add comment

2 Answers 2

up vote 1 down vote accepted

You have

<div class="image_reel">

But then you try to access element, as if it was id="image_reel"

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

You have to use class as in other places:

$(".image_reel").append(liHtml);
share|improve this answer
    
You are correct. After changing it your suggested code I can now atleast the image. However, I only see part of the 1st image. I dont see page numbers and pictures that should slideshow. –  Robert G May 29 '11 at 15:13
add comment

I suspect that you don't see any content because you never show() the slideshowContentArea div (it's hidden by your inline CSS).

Add the following at the very end of the processQueryResults method:

$('#slideshowContentArea').show();
share|improve this answer
    
Agreed. I don't see any other references in the code for #slideshowContentArea –  Tim Gabrhel May 29 '11 at 3:50
    
Thanks for pointing that out. I have now added show to this div and hiding the busy image div. However, firebug still coming up with this error $v_0 is null [Break On This Error] var $v_1 = $v_0.parentElement(); and there for magic is happening. –  Robert G May 29 '11 at 4:32
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.