Using Jquery to render content

help
1

I’m trying to use the Supersized jquery plugin (http://buildinternet.com/project/supersized/faq.html)

And so far I’m having trouble getting it to render photos in a slideshow.

Right now I am using the .onRendered function in the template I want, like this:

Template.homeLayout.onRendered(function onRendered() {
  Meteor.defer(function() {
    $.supersized({
        // Functionality
        slide_interval: 3000,       // Length between transitions
        transition: 1,          // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
        transition_speed: 700,        // Speed of transition

        // Components
        slide_links: false,    // Individual links for each slide (Options: false, 'num', 'name', 'blank')

        slides: [           // Slideshow Images
            {image: '/images/2-7148.tif'},
            {image: '/images/2-7244.tif'}
        ]

    })
});
});

However, the images are not displaying. When I click view source, the supersized plugin doesn’t show up as a script, is this normal for Jquery plugins used in Meteor?

Would there be any other common reasons why the images are not being displayed? I don’t get any error messages in the console on the page, just an endless spinner. When I inspect the page as well, it sees the images in the html where they should be, yet still nothing is being displayed.

2

A repo that reproduces the issue you are having would be nice.

Some other questions:

  • What does your homeLayout look like?
  • How are you including this jquery plugin in your meteor app?
  • When you inspect in the browser do you see something like <ul id="supersized" class="quality" style="visibility: visible;"> inserted as a child of <body>
  • screenshot of this endless spinner?
3

Hi thanks for the reply! Here’s what homeLayout looks like:

<template name="homeLayout">
    {{> sliderControls}}
</template>

I extracted the slider controls into their own template, and am rendering them in the home route right now so I can test how images are being loaded (and because the homepage will probably feature a generic slideshow).

And here is how I’m including the jquery plugin in client/compatibility:

Here’s what it looks like when I inspect the browser for the ul element (+ a shot of the spinner):

994×175 28.7 KB

I tried manually changing the “hidden” status to “visible”, but no change.

As far as I can tell, it looks like the jquery plugin is loaded correctly and has the files in needs in client/compatibility in order to run. So I’m having trouble determining why these images aren’t being loaded. The end goal here is to allow users to upload images into a certain collection, which will then be displayed if the user is on the right url path. So for now I’m just trying to get images to display in the slideshow.

4

The <div id="supersized-loader> , visibility: hidden , and image-loading class all seem like symptoms of an issue on the loading side of things.

Looking at the core lib the supersized-loader div is loaded on $(document).ready and then removed later on in the base.launch function.

base.launch is called by the handler passed to img.load a few lines earlier

If I was a betting man I would guess that img.load never succeeds and the issue can be found by investigating why this fails. Here’s what I would do to investigate:

  1. Check your images are in a /public/images folder within your project
  2. Switch to using publicly available images as a baseline like the demo which uses:
    http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-2.jpg
  3. drop in the non-minified version of the lib instead of the minified and set a breakpoint in the base._start and base.launch functions. Step through the code to see where it breaks

Also also, I see that img.load is deprecated. It has a section dedicated to “Cavetas of the load event when used with images” which includes “doesn’t work consistently cross-browser” among other ominous warnings. Could try in another browser if you haven’t yet.

5

Woah… per your suggestion I switched out my local image in public/assets/whatever for that link, and like magic it came to life! But now my question is… why?? For the slider controls and various other things, images are correctly loaded from that resource directory. This is good though, this might be a good sign that my strategy for using cloudinary image urls and injecting those into the appropriate collection’s array of images will succeed!

6

try using some other image format other than .tif to see if that bisects your problem space or try using a URL accessible .tif