Advanced Search

Results 1 to 8 of 8

Thread: Placeholder for .js Slideshow While It Loads

  1. #1
    Join Date
    Jan 2008
    Location
    Los Angeles
    Posts
    97
    Thanks
    31
    Thanked 2 Times in 2 Posts

    Default Placeholder for .js Slideshow While It Loads

    Hi,

    I found this slideshow to incorporate in my website, but I can't figure out how to place an image on top of it (or under it) that will disappear when it loads.
    http://www.slidesjs.com/

    Right now, the page has no images (slideshow) on it until they load, and then everything jumps around to accommodate the images (slideshow) that appear.

    I believe I tried what they suggest here, but it didn't work (this is some days ago, so I forgot a bit):
    http://stackoverflow.com/questions/1...-image-to-load
    The placeholder image wouldn't end up on top of the slideshow, or under it, but before it, so the slideshow would end up lower down after this image.

    Someone else has asked the same question on the slideshow developer's site a month or more ago and it wasn't answered.

    I'm sure it has nothing to do with his slideshow script, but rather some simple HTML coding.

    Thanks!
    Last edited by questions; 05-23-2013 at 10:38 PM.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,684
    Thanks
    43
    Thanked 3,128 Times in 3,094 Posts
    Blog Entries
    12

    Default

    This is really two separate things:

    1) How to prevent the slideshow from causing the page layout to jump around while the slideshow and the page are loading.

    2) How to introduce a loading image as a visual indicator that the slideshow is loading that will become unseen once the slideshow has loaded.

    The first looks fairly easy. If you look at the actual markup on the page we see something like so:

    Code:
      <!-- SlidesJS Required: Start Slides -->
      <!-- The container is used to define the width of the slideshow -->
      <div class="container">
        <div id="slides">
          <img src="img/example-slide-1.jpg" alt="Photo by: Missy S Link: http://www.flickr.com/photos/listenmissy/5087404401/">
          <img src="img/example-slide-2.jpg" alt="Photo by: Daniel Parks Link: http://www.flickr.com/photos/parksdh/5227623068/">
          <img src="img/example-slide-3.jpg" alt="Photo by: Mike Ranweiler Link: http://www.flickr.com/photos/27874907@N04/4833059991/">
          <img src="img/example-slide-4.jpg" alt="Photo by: Stuart SeegerLink: http://www.flickr.com/photos/stuseeger/97577796/">
          <a href="#" class="slidesjs-previous slidesjs-navigation"><i class="icon-chevron-left icon-large"></i></a>
          <a href="#" class="slidesjs-next slidesjs-navigation"><i class="icon-chevron-right icon-large"></i></a>
        </div>
      </div>
      <!-- End SlidesJS Required: Start Slides -->
    That container has no defined height, so will be zero height until something with either layout height or specified height fills it. The script does that at some point, but I'm guessing, not soon enough for your layout.

    You can define a css pixel height for the container class or for that element individually using an id you could assign to it or inline. It should be the height of the images + the height of the navigation/pagination. That is if those controls appear above or below the slideshow. If they're on the sides or superimposed upon the slideshow, then their height should not be included.

    Adding a loading image might be as simple as setting a small animated GIF loading image as the background image for that same division. Set it to center no-repeat. With any luck it will appear as the slideshow is loading and simply be covered by the slideshow once it loads:

    Code:
    .container {
    height: ###px; /* set ### to the desired height */
    background: url(loading.gif) center no-repeat;
    }
    But the slides division might have background, a color at least. If it does, the loading image should be applied as background to it instead. Overriding style with the !important keyword might need to be used:

    Code:
    .container {
    height: ###px; /* set ### to the desired height, include height of navigation/pagination if appropriate */
    }
    #slides {
    height: ###px; /* set ### to the desired height, this time only the height of the images */
    background: white url(loading.gif) center no-repeat !important;
    }
    And even that might not show up. If it doesn't I would have to see the page once you have it set up. One thing that would be good is to preload the loading image so that it can in theory be seen as soon as possible, even by first time visitors to the page:

    Code:
    <script>
    ;(function(){
    var img = new Image();
    img.src = 'loading.gif';
    })();
    </script>
    Put that after the styles in the head of the page.

    If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    questions (05-24-2013)

  4. #3
    Join Date
    Jan 2008
    Location
    Los Angeles
    Posts
    97
    Thanks
    31
    Thanked 2 Times in 2 Posts

    Default

    Oh, I see, thanks!
    I will give it a try and post results.

  5. #4
    Join Date
    Jan 2008
    Location
    Los Angeles
    Posts
    97
    Thanks
    31
    Thanked 2 Times in 2 Posts

    Default

    The first method works, where I assign the container a height.
    But I cannot use it, because I want the area to resize when I resize the page, which the slides currently do (they must be set to 100% width/height or something like that).
    If I give the container a height in px, then it stays that height while the slides shrink.

    Height auto or Height=100% also didn't work.

    The second method of loading a gif as the background doesn't work at all.

    Code:
    background: white url(loading.gif) center no-repeat !important;
    It doesn't load the loading.gif. I made that image to be the height and width of the slideshow, but it doesn't show up at all, even with putting the javascript code in the head of the page. In fact, I even changed the background color to test it (from white) and it didn't show up either.

  6. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,684
    Thanks
    43
    Thanked 3,128 Times in 3,094 Posts
    Blog Entries
    12

    Default

    On the first issue, you might not be able to have your cake and eat it too. Meaning that if you want the page to adjust to the size of the images and the images to adjust to the size of the window, you may have to put up with a bit of jumpiness in the layout as the page loads. Or not, I'd have to see it to really tell. Something might be able to be worked out on that. Pointless to speculate without seeing the page.

    On the second issue, it's unclear to me if you tried all the options as I laid them out, or even if you did, if you applied them as I had envisioned. Even if you did, I said on that one that more might be required to get it to work. Again, I would have to see the page to determine why the background image is not showing up.

    So for both issues it's now a case of seeing what you have.

    If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

    If you don't have a live page yet, put one up. It obviously doesn't have to work as desired. It just has to show me the general layout and how you're using the slideshow. Set it up with the slide images 100% width/height.

    Without that I cannot really help further.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. The Following User Says Thank You to jscheuer1 For This Useful Post:

    questions (05-28-2013)

  8. #6
    Join Date
    Jan 2008
    Location
    Los Angeles
    Posts
    97
    Thanks
    31
    Thanked 2 Times in 2 Posts

    Default

    Sure, here is one page:
    (Updated a few days later: I have removed the link because spammers started posting on this thread, plus, it's not necessary any longer.)

    Code:
        <script>
        ;(function(){
        var img = new Image();
        img.src = '../loading.png';
        })();
        </script>
    And the css:
    (Updated a few days later: I have removed the link because spammers started posting on this thread, plus, it's not necessary any longer.)

    Code:
    		#slides {
    			width: 100%;
    			background: #fff url(../loading.png) center no-repeat !important;
    			/* display: none; was there, but I took it out because I saw no use*/
    		}
    I called it loading.png - it's just orange so I can check if it shows up.

    I was also wondering if there is another way of placing one object on top of another, in the same spot, so I could have the background image as an element that shows up there. first, and then the slides load exactly on top of it.

    Thanks!
    Last edited by questions; 05-30-2013 at 07:45 AM. Reason: I have removed the links because spammers started posting on this thread, plus, they're not necessary.

  9. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,684
    Thanks
    43
    Thanked 3,128 Times in 3,094 Posts
    Blog Entries
    12

    Default

    I'm not sure about the layout jumpiness visa vis the 100% width/height on the images yet. As I said, you might not be able to do both things there.

    And there could also be other problems, but at least one problem with the loading image is that it's a 404 Not Found. That's because relative paths for images in a css file are relative to the css file, not to the page that is using the images. So, since the background image is in the same folder as the css file, the css should be:

    Code:
    		#slides {
    			width: 100%;
    			background: #fff url(loading.png) center no-repeat !important;
    			/* display: none; was there, but I took it out because I saw no use*/
    		}
    When in doubt you can always use the absolute path to the image.

    If you do get it to show up, it's too big. But you probably know that and are just using it at that size to see if you can get it to show up at all.

    What I had in mind is something more like:

    Name:  loading.gif
Views: 211
Size:  1.8 KB

    Maybe a little bigger than that, but not too much bigger. You can easily design and save your own custom loading image here:

    http://www.ajaxload.info/
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  10. The Following User Says Thank You to jscheuer1 For This Useful Post:

    questions (05-29-2013)

  11. #8
    Join Date
    Jan 2008
    Location
    Los Angeles
    Posts
    97
    Thanks
    31
    Thanked 2 Times in 2 Posts

    Default

    Ah, and I suspected something like that, the wrong folder, but I didn't try it!

    Thank you so much!

    I made the background image the size of the slides because I thought a little image wouldn't hold the place (in height) of the slides that are loading, but I guess it does. My connection is too fast to check that really well, even after I clear the cache.

    That ajax website is great!

Similar Threads

  1. Resolved Fade in slideshow loads black background first in IE
    By izzysanime in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 05-19-2011, 12:43 PM
  2. Want to pause slideshow when Shadowbox video on same page loads
    By striker5 in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 08-02-2010, 06:11 PM
  3. Slideshow loads unknown numer of images
    By cabbagebnb in forum Looking for such a script or service
    Replies: 0
    Last Post: 03-17-2009, 04:30 AM
  4. night loads index2 daytime loads index1
    By llr in forum JavaScript
    Replies: 1
    Last Post: 01-29-2009, 04:37 AM
  5. Carousel image placeholder.gif *Red X
    By bgirl in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 05-20-2006, 05:04 PM

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •