Jump to content
Chay

Embedding Slideshows

Recommended Posts

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 

  • Like 1
Link to comment
Share on other sites

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

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

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

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.

 

  • Like 1
Link to comment
Share on other sites

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

 

  • Like 2
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.



×
×
  • Create New...