Chay Posted February 16, 2017 Share Posted February 16, 2017 Hi all, I'm brand new to the forum. I just wanted to ask a quick question regarding slideshows and embedding. My school will be moving from Frog3 to Froglearn in a couple of weeks, our public website is built in Frog3, I've always found trying to embed anything can sometimes be quite restrictive, and my coding isn't good enough to do anything particularly fancy on my own. Does anybody have any advice as to putting in a nice looking slideshow or something similar, and will it be easier to do using Froglearn? I'm sure I'll know more once Froglearn is activated but I just thought I'd throw it out there! I've looked at a couple of sites that seem to do the heavy lifting such as 'wowslider' and 'googleslide', in theory, could I get these kinds of things embedded and working on a Frog page? Many thanks Chay 1 Link to comment Share on other sites More sharing options...
Graham Quince Posted February 16, 2017 Share Posted February 16, 2017 Hi @Chay The Dickens release of FrogLearn includes an Image Carousel widget: https://www.frogcommunity.com/image-carousel But if you don't want to wait for that, then there is a tutorial on the Community: https://www.frogcommunity.com/filedrop which itself is based on the Bootstrap CSS carousel: https://www.w3schools.com/bootstrap/bootstrap_carousel.asp Hope that helps and welcome to the forums Graham Link to comment Share on other sites More sharing options...
Chay Posted February 17, 2017 Author Share Posted February 17, 2017 Thanks Graham, that's very helpful Chay 1 Link to comment Share on other sites More sharing options...
Angeliki Messari Posted April 4, 2017 Share Posted April 4, 2017 Hi guys This is Angeliki, new girl on the forum. Quick question if I may: can I change the transition speed on the carousel? Every little trick I tried sadly failed... Link to comment Share on other sites More sharing options...
ADT Posted April 4, 2017 Share Posted April 4, 2017 1 hour ago, Angeliki Messari said: Hi guys This is Angeliki, new girl on the forum. Quick question if I may: can I change the transition speed on the carousel? Every little trick I tried sadly failed... Id agree I cant see a way to change the speed either!! Good point though... why not put it on the Idea Portal?? https://ideas.frogcommunity.com/ Link to comment Share on other sites More sharing options...
Graham Quince Posted April 4, 2017 Share Posted April 4, 2017 Hi @Angeliki Messari, If you're talking about the image Carousel, the controls are built into the side as Transition Delay. If you mean the HTML widget, then adding data-interval="1000" changes the speed to 1000 ms, e.g: <div id="Carousel" data-interval="1000" class="carousel slide carousel-fade col-lg-8 col-offset-2"> Link to comment Share on other sites More sharing options...
ADT Posted April 4, 2017 Share Posted April 4, 2017 (edited) Whoops... thats what I get for looking at something while teaching!! Edited April 4, 2017 by ADT Link to comment Share on other sites More sharing options...
Angeliki Messari Posted April 4, 2017 Share Posted April 4, 2017 1 hour ago, Angeliki Messari said: Hi @Graham Quince I meant the html widget, sorry. Actually data-interval is one thing I did try. Exactly as you show it. It doesn't seem to make a difference changing the setting of the data-interval attribute... What I would like to control is how long the image stays on screen before being succeeded by the next. It is currently too slow. Link to comment Share on other sites More sharing options...
Graham Quince Posted April 4, 2017 Share Posted April 4, 2017 data-interval should do it. Looks like this variation of the code, which creates fades rejects this stuff, but if you add {interval: 500} to the line $('.carousel').carousel(); to get: $('.carousel').carousel({interval: 500}); You can use the jQuery function to pass the interval over. 1 Link to comment Share on other sites More sharing options...
Angeliki Messari Posted April 5, 2017 Share Posted April 5, 2017 Hurrah! It works brilliantly! Thank you Graham. You are a star! 1 Link to comment Share on other sites More sharing options...
Angeliki Messari Posted May 21, 2017 Share Posted May 21, 2017 Hi Graham Quick question please: In my pages when I try to use two sets of HTML / File Drop widgets to create two carousels it glitches and it messes up the page completely. Is it that only one "manually" made carousel should be set up per page? Cheers Link to comment Share on other sites More sharing options...
pconkie Posted May 23, 2017 Share Posted May 23, 2017 Hi @Angeliki Messari here are my suggested changes so that you can have multiple carousels on the same page. The issue is with the use of $("") and the fact that both carousels have the same ID. <style> .carousel-fade .carousel-inner .item { opacity: 0; -webkit-transition-property: opacity; -moz-transition-property: opacity; -o-transition-property: opacity; transition-property: opacity; } .carousel-fade .carousel-inner .active { opacity: 1; } .carousel-fade .carousel-inner .active.left, .carousel-fade .carousel-inner .active.right { left: 0; opacity: 0; z-index: 1; } .carousel-fade .carousel-inner .next.left, .carousel-fade .carousel-inner .prev.right { opacity: 1; } .carousel-fade .carousel-control { z-index: 2; } .carousel-inner img { max-width: 100%; height: 300px; margin-left: auto; margin-right: auto; min-width: 300px; } .carousel-arrow-left, .carousel-arrow-right { top: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-width: 15px; margin-top: -15px; } .carousel-arrow-right { left: 35%; border-left-color: #FFFFFF; } .carousel-arrow-left { right: 35%; border-right-color: #FFFFFF; } </style> <div id="Carousel" class="carousel slide carousel-fade col-lg-8 col-offset-2"> <ol id="filedrop-slide-show-count" class="carousel-indicators"> </ol> <div id="filedrop-slide-show-img" role="listbox" class="carousel-inner"> </div> <!-- Left and right controls --> <a class="left carousel-control" href="#Carousel" data-slide="prev"> <span class="carousel-arrow-left"></span> </a> <a class="right carousel-control" href="#Carousel" data-slide="next"> <span class="carousel-arrow-right"></span> </a> </div> <script type="text/javascript"> var unique_name = makeid(); this.element.find('#Carousel').attr("id",unique_name); var $carousel = this.element.find('#'+unique_name); $carousel.find('.carousel-control').attr("href",'#'+unique_name); $carousel.carousel({interval: 500}); var baseURL = Frog.Utilities.getBaseUrl(), // Change fileDropUuid to the UUID of your file drop widget fileDropUuid = '223DFB4C20028F362EC85F27258F050F3505A2BC8F1561F1'; Frog.Model .api('filedrop.get', { filedrop: fileDropUuid }).done(function(filesResponse) { var $fileList = $carousel.find('#filelist'), $slideShowCount = $carousel.find("#filedrop-slide-show-count"), $slideShowImageContainer = $carousel.find("#filedrop-slide-show-img"), fileCount = 0; filesResponse.data.resources.forEach(function(file, index) { // Check whether the file is one of these filetypes; Want to add more? Add to the array if (['jpg', 'jpeg', 'gif', 'png'].indexOf(file.file.ext.toLowerCase()) > -1) { $slideShowCount .append( $('<li>') .attr('data-target', 'Carousel') .attr('data-slide-to', fileCount) .addClass(function() { if (fileCount === 0) { return 'active'; } }) ); $slideShowImageContainer .append( $('<div>').addClass('item') .addClass(function() { if (fileCount === 0) { return 'active'; } }) .append( $('<img />').addClass('img-responsive') /* ?width=400&height=500 this addition creates a new image on your Frog server at 400 pixels wide by 500 pixels high. This prevents the gallery from serving much larger pictures than required - which can cause your Frog to slow down */ .attr('src', baseURL + '/app/file/resource/' + file.file.uuid + '?width=400&height=500') .attr('align', 'center') ) ); fileCount++; } }); }); function makeid() { var text = ""; var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"; for( var i=0; i < 6; i++ ) text += possible.charAt(Math.floor(Math.random() * possible.length)); return text; } </script> Hopefully you can spot the lines I have changed and the bits I have added. Let me know if you have any problems, and don't forget to change the file widget uuid back to match yours. Paul 2 Link to comment Share on other sites More sharing options...
Angeliki Messari Posted May 24, 2017 Share Posted May 24, 2017 Lovely. Thank you Paul. I will check that out and report back to you. Kind regards Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now