Jump to content
Sign in to follow this  
Dawn Spears

File Drop Slideshow

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

Share this post


Link to post
Share on other sites

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 

  • Haha 1

Share this post


Link to post
Share on other sites
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!!!

Share this post


Link to post
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>

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

@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

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
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 :)

Share this post


Link to post
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.

Share this post


Link to post
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.

 

 

Share this post


Link to post
Share on other sites

@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

Share this post


Link to post
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

 

 

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
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.

Sign in to follow this  

  • Similar Content

    • By Sean_M
      Is there a bit of html I can add to a page to autoplay videos in the Media widget on page load?
       
      Many thanks
      Sean
    • By Graham Quince
      Some of you have already spotted this tutorial, but we've just updated it to reflect feedback from schools.
      You can now use the same code 'hack' a menu to open external links, subpages and even sites
      https://www.frogeducation.com/community/tutorials/frogcode-tutorials/external-links
    • By Graham Quince
      Hey everyone,
      Thanks to @Chris.Smith and @Simon Law for updating the Slideshow Carousel code to cope with multiple instances of galleries on different sites and nested pages.  It's great to see this tutorial in use, but I'll be honest, I never anticipated the different ways it would be used.
      You can get the updated code here:
      https://www.frogeducation.com/community/tutorials/frogcode-tutorials/file-drop
    • By K.Ermit
      Hi,
      I have been provided with this code from Linguascope, but it doesn't work in the HTML widget.   
      <script language="javascript" src="http://www.linguascope.com/link/login/linguascope_login250x250.js"></script> Can anyone help please?
    • By K.Ermit
      Every time I add in a text widget,, I have to resize the text, as it starts too small, is there a way of setting the size be default?
×
×
  • Create New...