0

I am working on a public website in Office 365. I have a jquery-based image slideshow program that works fairly well, but if I add or remove images from the slideshow I occasionally get the dreaded red-X-in-the-corner missing image. I also have previous images that won't go away: For example: I load image1, decide it's too big, rename it image2 and resize it, drop image1 from the rotation and add image2, and image2 keeps showing in the slide show.

I think it has something to do with clearing the image cache on the server, but I can't find the command to do so in Site Settings. I have tried clearing the browser cache to no avail, and this happens on multiple browsers. Any suggestions?

UPDATE: Here is the script I used to run the slider:

<script type="text/javascript">

    $(function(){
      $("#slides").slidesjs({
        width: 380,
        height: 570,
        play: {
        active: true,
        auto: true,
        interval: 3000,
        swap: true
        }
      });
    });

</script>

Which cycles through the images in this div:

<div class="container">
  <div id="slides">​ 
  </div>
</div>

​ Finally, here is the code that populates the div:

<script type="text/javascript">
$(document).ready(function() {
  $().SPServices({
    operation: "GetListItems",
    async: false,
    listName: "Photos",
    CAMLViewFields: "<ViewFields Properties='True' />",
    CAMLQuery: "<Query><Where><Contains><FieldRef Name='Keywords' /><Value Type='Text'>Events</Value></Contains></Where></Query>",
    completefunc: function (xData, Status) {
      $(xData.responseXML).SPFilterNode("z:row").each(function() {
        var objImg = "<img src='/Lists/Photos/" + $(this).attr("ows_LinkFilename") + "' alt=''/>";
        $("#slides").append(objImg);
      });
    }
  });
});
</script>
  • 1
    How do you add or remove images in the slideshow? By editing the js or by some Ajax call? Chances are it is actually the old js you are served, or a cached response from an Ajax call – Robert Lindgren Mar 4 '14 at 18:30
  • I use SPServices to pull the images from the library. I updated my post to show the code. – CigarDoug Mar 5 '14 at 2:56
  • I think you may need to add cache:false to your spservices parameters – Robert Lindgren Mar 5 '14 at 6:00
1

Try this, added $.ajaxSetup({ cache: false });

$(document).ready(function() {

  $.ajaxSetup({ cache: false });

  $().SPServices({
    operation: "GetListItems",
    async: false,
    listName: "Photos",
    CAMLViewFields: "<ViewFields Properties='True' />",
    CAMLQuery: "<Query><Where><Contains><FieldRef Name='Keywords' /><Value Type='Text'>Events</Value></Contains></Where></Query>",
    completefunc: function (xData, Status) {
      $(xData.responseXML).SPFilterNode("z:row").each(function() {
        var objImg = "<img src='/Lists/Photos/" + $(this).attr("ows_LinkFilename") + "' alt=''/>";
        $("#slides").append(objImg);
      });
    }
  });
});
0

The trick with image caching wich is done by the browser is to always use a unique URL. To do this you add a piece of data (usually a time stamp) to the image URL as a query parameter.

Here is the piece of code from your sample above with the additional param:

    var objImg = "<img src='/Lists/Photos/" + $(this).attr("ows_LinkFilename") + "?_" + (new Date()).getTime() + "' alt=''/>";

This always makes the URL unique. I would suggest that you initiate a variable with the time stamp before the loop and then use it inside the loop - saves on having to generate it many times.

  • That makes sense if it was a browser cache, but as I said in my post, the broken image remains after clearing the browser cache, AND when using different browsers and computers. The caching is at the server, which I cannot clear because this is a Office 365 public website. – CigarDoug Mar 6 '14 at 12:32
  • Above, you say 'I drop it from the rotation'. Who's does that mean? Did you delete that image from the document library (photos)? – Paul T. Mar 6 '14 at 15:12
  • I removed the keyword 'Events' from one of the pictures. I am using similar coding on different pages, each one keys off of a keyword. That way, I can assign one or more keywords to a picture to make it show in a slideshow on a specific page, without changing the code. – CigarDoug Mar 6 '14 at 16:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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