Jump to content

Image slider help


Natasha Din-Gabisi

Recommended Posts

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.

Link to comment
Share on other sites

Hi Natasha

Welcome. If you need the images to cycle through automatically, I think the best thing is to use the 'Image Carousel' widget. The widget displays photos which have been sent to the site's timeline. When you place this widget on your page there is an option to show images with specific tags, if you wish to control certain images displayed, leave blank to show all.

You can send an image from FrogDrive to a site, click on the file, then the gear icon at the top right of the FrogDrive window, and choose 'Send Copy to...'

Start typing the site's name in the 'Where to send it' box (should search and auto-complete) click the site, then click the blue send button.

  • Thanks 1
Link to comment
Share on other sites

2 hours ago, Sean_M said:

You can send an image from FrogDrive to a site, click on the file, then the gear icon at the top right of the FrogDrive window, and choose 'Send Copy to...'

Start typing the site's name in the 'Where to send it' box (should search and auto-complete) click the site, then click the blue send button.

You can now also use the site timeline widget to bulk upload images

 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...