Slideshow HTML HELP!

[Sue Busher]

I am trying to get this sclide show to work on our governors portal but can't see to get the images to fit. They are all 150 pixels wide but appear to stretch. Here's the HTML I am using:

<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 = 'C1FF4FDD2002884A006A9F9562E31C084E913E0C945116C4';
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>

 

Any help would be much appreciated. Roll on when Dickins brings the slideshow in

[Graham Quince]

Hi @Sue Busher

Here's the problem code:

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

The minimum width is set to 300px.  If you change that to 150px, it should stop them stretching.

[Sue Busher]

It is still doing if Graham, Despite changing this. Would you mind jumping on and having a look? Site called Governor Dashboard

[Sue Busher]

@Graham Quince

[Graham Quince]

Sorry @Sue Busher - i'm out of the office until Friday.

@Edd are you around?

[Guest Edd]

I jumped on but can't seem to resolve the problem by altering the code I'm afraid. Can you take a look @Graham Quince when you're back in? The new Image Carousel widget in Dickens should essentially replace the need for this custom HTML hopefully.

 

[ADT]

45 minutes ago, Edd said:

I jumped on but can't seem to resolve the problem by altering the code I'm afraid. Can you take a look @Graham Quince when you're back in? The new Image Carousel widget in Dickens should essentially replace the need for this custom HTML hopefully.

 

Never mind banging on about Dickens...  release the thing.....

[Graham Quince]

3 hours ago, ADT said:

Never mind banging on about Dickens...  release the thing.....

Yeah @Edd, hurry up and release it