Jump to content

Search the Community

Showing results for tags 'carousel'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • Support
    • Support
    • Common Questions
  • General
    • The Frog Academy
    • General chat
    • Showcase
    • Webinars
  • Technical Forums (How do I...?)
    • Learn / Play / Progress
    • Coding

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


School

Found 1 result

  1. 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.
×
×
  • Create New...