Jump to content

File Drop Slideshow


Dawn Spears

Recommended Posts

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:

 59c2684b3b164_filedrop1.thumb.JPG.339149cba215afe90407ee4c26583374.JPG

 

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

59c26849daac8_filedrop2.JPG.9761a61ab33264e0f6d249602cba5a3b.JPG

 

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

59c2684900ac9_filedrop1afteraccessingfiledrop1.JPG.4212ed3bc7188a3e37993635c5c5d8d2.JPG

 

 

Any ideas?

 

Kind regards

 

Dawn

Edited by Dawn Spears
Link to comment
Share on other sites

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>

 

Link to comment
Share on other sites

  • 6 months later...
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 by Simon Law
update for Sue
  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 O.o

@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.

 

 

Link to comment
Share on other sites

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

 

 

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...