Jump to content

File Drop Slideshow

Dawn Spears

By Dawn Spears
in Coding

 Share

Recommended Posts

Dawn Spears Newbie

Dawn Spears

Posted
Posted (edited)

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
ADT Mentor

ADT

Posted
Posted
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!!!

Graham Quince Grand Frogger

Graham Quince

Posted
Posted

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>

 

  • 6 months later...
Sue Busher Contributor

Sue Busher

Posted
Posted (edited)

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

.5ad4ce9aea1fe_Mobilescreengrab.thumb.PNG.9d8dc18a8ffd59653942e9155b9467ad.PNG5ad4ce94407aa_Desktopscreengrab.thumb.PNG.6bc0e2b192cbc57e62d9a6de27423891.PNG Screen

Edited by Sue Busher
Simon Law Contributor

Simon Law

Posted
Posted (edited)
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
Simon Law Contributor

Simon Law

Posted
Posted
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 :)

Graham Quince Grand Frogger

Graham Quince

Posted
Posted

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 Contributor

Simon Law

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

 

 

Sue Busher Contributor

Sue Busher

Posted
Posted (edited)

@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 by Sue Busher
Simon Law Contributor

Simon Law

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

 

 

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
 Share
Go to topic listing
×
×
  • Create New...