File Drop Slideshow

[Dawn Spears]

Hi,

 

I have set up a sildeshow, using a file drop as detailed in the tutorial below:

http://www.frogcommunity.com/app/os#!filedrop/slideshow

 

My first slideshow was working correctly, and I could add/remove files to the drop and the correct pictures were showing.

I then tried to add another slideshow (on a new tab within the site), so set up a new file drop, got the new ID and created the HTML again as per the tutorial, however the second file drop won't work as expected. The pictures from the second file drop show up in the first slideshow, despite them having completely different IDs. If I set up a list of file names for the second file drop, the files are correct, but they are showing on the wrong page. Sometimes they appear as part of the slideshow, and other times the new pictures are above the first pictures. I will attach some screenshots so that hopefully you can see what I mean.

Additionally, the first file drop will work correctly until I try and look at the second file drop, then when I go back to the first I have the problem (caching issue maybe?).

First file drop showing Micky Mouse correctly:

 

 

2nd file drop showing only the file name (testing) widget. The file drop arrows show up but no pictures.

 

Now, I go back to the first tab and Goofy is showing despite him being on the other file drop.

 

 

Any ideas?

 

Kind regards

 

Dawn

Edited September 20, 2017 by Dawn Spears

[pconkie]

Hi @Dawn Spears

I blame the author of the tutorial you have followed @Graham Quince !

It has not been designed with multiple widgets on the same page in mind.  I made some suggested alterations a while back which should fix the problem

Thanks

Paul 

[ADT]

2 hours ago, pconkie said:

Hi @Dawn Spears

I blame the author of the tutorial you have followed @Graham Quince !

It has not been designed with multiple widgets on the same page in mind.  I made some suggested alterations a while back which should fix the problem

Thanks

Paul 

Bloody rogue coders!!!

[Dawn Spears]

Thank you @pconkie it's all working and in time for today's photos to go on in the new way!

 

Got to love those rogue coders!

 

 

 

[Graham Quince]

Here's code i user now, with Find-and-replace in mind, replacing '_1' with new codes for each instance

<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_1" class="carousel slide carousel-fade col-lg-8 col-offset-2">
    <ol id="filedrop-slide-show-count_1" class="carousel-indicators">
    </ol>
    <div id="filedrop-slide-show-img_1" role="listbox" class="carousel-inner">
    </div>
    <!-- Left and right controls -->
    <a class="left carousel-control" href="#Carousel_1" data-slide="prev">
        <span class="carousel-arrow-left"></span>
    </a>
    <a class="right carousel-control" href="#Carousel_1" data-slide="next">
        <span class="carousel-arrow-right"></span>
    </a>
</div>

<script type="text/javascript">
$('.carousel').carousel();
var baseURL = Frog.Utilities.getBaseUrl(),
    // Change fileDropUuid to the UUID of your file drop widget
    fileDropUuid_1 = '405FA7B9200288C5F9C48F0DBDF39E050EA9502CCF1A395D';
Frog.Model
    .api('filedrop.get', {
        filedrop: fileDropUuid_1
    }).done(function(filesResponse) {
        var $fileList_1 = $('#filelist_1'),
            $slideShowCount_1 = $("#filedrop-slide-show-count_1"),
            $slideShowImageContainer_1 = $("#filedrop-slide-show-img_1"),
            fileCount_1 = 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) {
            //alert(file.file.uuid);
                $slideShowCount_1
                    .append(
                        $('<li>')
                        .attr('data-target', 'Carousel')
                        .attr('data-slide-to', fileCount_1)
                        .addClass(function() {
                            if (fileCount_1 === 0) {
                                return 'active';
                            }
                        })
                    );
                $slideShowImageContainer_1
                    .append(
                        $('<div>').addClass('item')
                        .addClass(function() {
                            if (fileCount_1 === 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_1++;
            }
        });
    });
</script>

 

[Sue Busher]

I am struggling to get images within this code to resize for mobile. Anyone got any coding suggestings that will make it fit?

Thanks in advance

[Simon Law]

Hi @Sue Busher, which site is it and what is the visible problem (screenshot would be nice)

 

Thanks

S

[Sue Busher]

@Simon LawIt is our new website ' Kennet School' which I am building. Graham Quince has helped me work out the table issues but I can't seem to get the slideshow on the home page to work. Screengrabs below:

. Screen

Edited April 16, 2018 by Sue Busher

[Simon Law]

2 hours ago, Sue Busher said:

ok, I'll have a look 

The issue was the height setting on the image element, I have changed it to use max-height instead.

There still seems to be an issue with the carousel-indicators though

Edited April 16, 2018 by Simon Law
update for Sue

[Simon Law]

14 hours ago, Simon Law said:

There still seems to be an issue with the carousel-indicators though

and maybe a little bit of css fixes the indicators

[Sue Busher]

@Simon Law Was that in the code then Simon? Or something I could'should have done with the images?

I am still seeing this on mobile 

 

 

[Graham Quince]

I think the problem is probably this bit of code:

.carousel-inner img {
    max-width: 100%;
    height: 300px;
    margin-left: auto;
    margin-right: auto;
    min-width: 300px;
}

probably needs to be:

.carousel-inner img {
    max-width: 100%;
    max-height: 300px;
    margin-left: auto;
    margin-right: auto;
    min-width: 300px;
}

 

Although, now that the site timeline has the ability to upload multiple photos directly, I'd be tempted to suggest swapping out the html widget for the image carousel.  The file drop slideshow is nice, but was about solving a problem.  With the updated widget, i think this problem will start to disappear.

[Simon Law]

40 minutes ago, Sue Busher said:

@Simon Law Was that in the code then Simon? Or something I could'should have done with the images?

I am still seeing this on mobile 

@Sue Busher I think you are still seeing the old CSS styling on your mobile.

As graham said above, the replacement of the height for max-height solves the image sizing.

 

 

[Simon Law]

That's on my Samsung Galaxy Note 3

[Sue Busher]

@Simon Law @Graham Quince  The code has changed but I am still seeing the stretching of the images on my iphone. I haven't used the new image carosuel as not really got to grips with it. Is there any training videos? As you say, at least it would be supported.

 

 

Edited April 17, 2018 by Sue Busher

[Simon Law]

26 minutes ago, Sue Busher said:

@Simon Law @Graham Quince  The code has changed but I am still seeing the stretching of the images on my iphone. I haven't used the new image carosuel as not really got to grips with it. Is there any training videos? As you say, at least it would be supported.

ok, your iphone is probably caching the css, I have changed the html widget to use 'carousel_davids' instead of 'carousel_david', this should be enough for the iphone to not use the cached css

 

 

[Sue Busher]

@Simon Law

Nope . 

[Simon Law]

16 minutes ago, Sue Busher said:

@Simon Law

Nope . 

Hmm, just tested on iphone 6, safari, all good. what are you using? phone/app

[Sue Busher]

I am using iphone 6 on safari. As you say, perhaps it is a caching issue. How do I remove that from the phone and retest?

[Graham Quince]

Hi Sue,

Here's the release information for the image carousel

https://www.frogcommunity.com/image-carousel