Hi all
I am new to this forum and am trying to modify the masonary gallery so that it displays the images in a slideshow but I'm having real problems. Go easy on me I'm a newbie! So my first approach is this but it doesn't work
My second approach would be to upload a slider.js . I tried uploading the file to the widget but I can't so where do I upload it?
widget.js
Com.Frog.Controllers.Widget.extend('Widget.Carousel', {
}, {
prefs: {
selectFolder: {
type: "sharedfolder",
defaultValue: "|"
}
},
packageID: '5974C4D12001B59B10329F5A6600A10004F91B0C18A6DDA8',
/**
* Constructor. Runs when the widget is first loaded.
*
* @method init
*/
init: function() {},
/**
* Event fired by the Site Controller.
*
* @event 'widget.live'
*/
'widget.live': function(el, ev, data) {
this.element.html(
this.view('main.ejs')
);
var selectedFolderUUID = this.prefs.selectFolder.value;
selectedFolderUUID = selectedFolderUUID.substring(0, selectedFolderUUID.indexOf('|'));
if (selectedFolderUUID !== '') {
Frog.Model
.api('resources.getOfType', {
sources: ["native","site"],
type: 'personal',
author: 'true',
root_folder: 'EDAAA0E92002F81B92C2DFCD917CAC05E532634CEE5FEBD9',
folder: selectedFolderUUID,
filter: null,
exclude_templates: 'true'
}).done(function(response) {
var fileArray = $.map(response.data.resources, function(el) { return el; });
$.each(fileArray, function(index, value){
if (value.attachment.file.mime.type === 'image') {
var newImg = $('<div class="img-item ' + '" data-image-title="' + value.attachment.name + '" data-updated-at="' + value.attachment.updated + '"> <img src="file/asset/' + value.uuid + '.' + value.attachment.file.mime.ext + '?height=800&width=800&scale_mode=fill"></div>');
thisElement.find('.slide').append( newImg );
}
});
$('#right-arrow').click(function() {
var currentSlide = $('.slide.active');
var nextSlide = currentSlide.next();
currentSlide.fadeOut(3000).removeClass('active');
nextSlide.fadeIn(3000).addClass('active');
if(nextSlide.length == 0) {
$('.slide').first().fadeIn(3000).addClass('active');
}
});
$('#left-arrow').click(function(){
var currentSlide = $('.slide.active');
var prevSlide = currentSlide.prev();
currentSlide.fadeOut(3000).removeClass('active');
prevSlide.fadeIn(3000).addClass('active');
if(prevSlide.length == 0){
$('.slide').last().fadeIn(3000).addClass('active');
}
});
},
main.ejs
<div class="content">
<div id ="slide">
<div class="slide"></div>
</div>
<p id ="left-arrow"> Next </p>
<p id="right-arrow"> Prev </p>
</div>
Thanks in advance for your help.