Jump to content
Natasha Din-Gabisi

Image slider help

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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.



  • Similar Content

    • By Dawn Spears
      Hi,
      I'm not sure of the best way to access the assets within my widgets assets folder. For example, if I have an image that I want to display on a canvas, I can use the following:
      imageObj.src = "https://disraeli-bucks.frogos.net/app/file/resource/10E354602003064E38AADFB27ECC0A08B6D928AC51D3E2CA?1506677717";
      To reference the image and it will display correctly. However if I use something like
      imageObj.src = "assets/rhino.jpg";
      nothing will display.
       
      Is it necessary to use the full URL each time or am I being a bit daft?
×
×
  • Create New...