Sue Busher Posted February 7, 2017 Share Posted February 7, 2017 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 Link to comment Share on other sites More sharing options...
Graham Quince Posted February 7, 2017 Share Posted February 7, 2017 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. Link to comment Share on other sites More sharing options...
Sue Busher Posted February 7, 2017 Author Share Posted February 7, 2017 It is still doing if Graham, Despite changing this. Would you mind jumping on and having a look? Site called Governor Dashboard Link to comment Share on other sites More sharing options...
Sue Busher Posted February 7, 2017 Author Share Posted February 7, 2017 @Graham Quince Link to comment Share on other sites More sharing options...
Graham Quince Posted February 8, 2017 Share Posted February 8, 2017 Sorry @Sue Busher - i'm out of the office until Friday. @Edd are you around? Link to comment Share on other sites More sharing options...
Guest Edd Posted February 9, 2017 Share Posted February 9, 2017 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. Link to comment Share on other sites More sharing options...
ADT Posted February 9, 2017 Share Posted February 9, 2017 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..... 1 Link to comment Share on other sites More sharing options...
Graham Quince Posted February 9, 2017 Share Posted February 9, 2017 3 hours ago, ADT said: Never mind banging on about Dickens... release the thing..... Yeah @Edd, hurry up and release it Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now