bilcker bilcker - 6 months ago 84
jQuery Question

Google Events Calendar with Unslider.js

I am trying to create a scrollable event-list of future events using a google calendar and unslider jquery slider. I have been able to pull out the events of a google calendar into a list format. However the list items being generated by the plugin are not being recognized by The Unslider.js. When the page loads the two calendar items are just pushed off the screen. I can only get it to work If I manually put list items into the html. Here is a link to my little project so you can see for yourself http://timothybilcke.com/bspace-gcal/ I would appreciate any help as I can not seem to figure this out

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
jQuery(function ($) {
$('#eventlist').gCalReader({
// Public Google Calendar
calendarId:'ed.amdsb.ca_gs9t0pil904j11hr2qfcha1cvo@group.calendar.google.com',
// Google API KEY
apiKey:'AIzaSyAhvqdyBZZlvoO_JrU9KjyDfHGffV-GGbA',
futureEventsOnly: true,
sortDescending: true
});
"use strict";
$('.banner').unslider({
speed: 500, // The speed to animate each slide (in milliseconds)
delay: 3000,// The delay between slide animations (in milliseconds)
complete: function() {}, // A function that gets called after every slide animation
keys: true, // Enable keyboard (left, right) arrow shortcuts
dots: true, // Display dot navigation
autoplay:false,
fluid: false
} );
});
</script>
<link rel="stylesheet" href="css/unslider.css">
<link rel="stylesheet" href="css/unslider-dots.css">

<div class="banner">
<ul id="eventlist" class="list-group"></ul>
</div>

<script src="js/jquery.googlecalreader-1.1.min.js"></script>
<script src="js/unslider.js"></script>
<script src="js/events-slider.js"></script>

Answer

Essentially, the unslider is being read by the dom before the google cal events are loaded in. that's why your static li's work and the google cal ones don't.

One quick solution, but isn't the most reliable, would be to wrap a setTimeout() around your unslider plugin.

setTimeout(function(){
  $('.banner').unslider({
    speed: 500,               //  The speed to animate each slide (in milliseconds)
    delay: 3000,              //  The delay between slide animations (in milliseconds)
    complete: function() {},  //  A function that gets called after every slide animation
    keys: true,               //  Enable keyboard (left, right) arrow shortcuts
    dots: true,               //  Display dot navigation
    autoplay:false,
    fluid: false 
  });
}, 1000);

A more reliable solution would be to add an onComplete callback function to the google cal reader plugin. It doesn't look like there's a callback option, so you may have to edit the plugin and add one.

Comments