I have this piece of script which is to show cinema listings.
The top half is html. The bottom half is
?
How would all this be added to a block? (Requires an API key)
<div>
<label>Cinema</label>
<select id="cineworld_cinemas"></select>
</div>
<div id="cineworld_selected_cinema">
<div class="address"></div>
<div class="postcode"></div>
<div class="telephone"></div>
<a class="link">See all performances at this cinema</a>
</div>
<div>
<label>Film</label>
<select id="cineworld_films"></select>
</div>
<div id="cineworld_selected_film">
<div>
<a class="link"><img class="large poster" /></a>
</div>
<div>
<img class="still" />
</div>
<div>
<a class="link"><span class="title"></span></a>
<span class="classification"></span>
</div>
<div>
<span class="advisory"></span>
</div>
</div>
<div>
<label>Date</label>
<select id="cineworld_dates"></select>
</div>
<div id="cineworld_selected_date">
</div>
<div>
<ol id="cineworld_performances"></ol>
<ul id="cineworld_legend"></ul>
</div>
Javascript Source
$(document).ready(function() {
var widget = new $.widget('your developer key');
widget.cinemas({
settings: {
favourite: 33
},
labels: {
favouriteGroup: 'Your favourite cinema',
otherGroup: 'All other cinemas'
}
});
// Don't forget to call init() after widget configuration
widget.init();
});