This script builds a bootstrap carousel from the images on a page whose 'alt' attribute starts with a given keyword .
If there is also one 'feature image' on the page, it will become the first image in the carousel.
(I wrote this script for a template for the Ghost blogging platform because there seemed to be no way to accomplish this server-side.)
A Pen by Aurelien Giraud on CodePen.
| <div class="site-wrapper"> | |
| <main class="content" role="main"> | |
| <div class="container post"> | |
| <div class="row"> | |
| <div class="col-md-6"> | |
| <article class="post"> | |
| <header class="post-header-left"> | |
| <img class="img-responsive" src="https://www.dropbox.com/s/2m280edf9v36vt3/landscape3.jpg?raw=1" alt="Projekt G"> | |
| <h1 class="post-title">Build Bootstrap Carousel</h1> | |
| </header> | |
| <section class="post-content"> | |
| <p>On this side, no picture has an 'alt' attribute starting with 'Picture' or 'picture'. They keep their original position in the HTML.</p> | |
| <p><img src="https://www.dropbox.com/s/l5d7jg3g2wrc8ic/1-landscape7.jpg?raw=1" alt="Project 8" /></p> | |
| <p>Omnesque probatus recusabo nec ex. Quo ea scaevola liberavisse, eum vidit periculis an. Sit quaeque dolores salutandi et. Vero albucius id vis, ea mei utamur apeirian cotidieque, eos dicit hendrerit in. Dicit interpretaris mea eu.</p> | |
| <p><img src="https://www.dropbox.com/s/1xu0lyv37xquec7/landscape4.jpg?raw=1" alt="Project 1" /></p> | |
| <p>Noster pertinacia ei usu, viris meliore eu quo. Eu vix inimicus omittantur. Eu mea saepe gubergren deterruisset. Eam et wisi magna aliquip, mel ad legere mucius adipisci. Nam ut semper fierent fastidii, eam ut sonet omnes voluptaria, sed | |
| iudicabit reprehendunt in.</p> | |
| <p><img src="https://www.dropbox.com/s/8ddsx94qk91io76/landscape5.jpg?raw=1" alt="Project 2" /></p> | |
| </section> | |
| </article> | |
| </div> | |
| <div class="col-md-6"> | |
| <article class="post"> | |
| <header class="post-header"> | |
| <img class="img-responsive" src="https://www.dropbox.com/s/2m280edf9v36vt3/landscape3.jpg?raw=1" alt="Projekt G"> | |
| <h1 class="post-title">Build Bootstrap Carousel</h1> | |
| </header> | |
| <section class="post-content"> | |
| <p>On this side, two pictures have an 'alt' attribute starting with 'Picture' or 'picture'. They are moved 'to the top' to be displayed within a carousel together with the feature image of the page.</p> | |
| <p><img src="https://www.dropbox.com/s/l5d7jg3g2wrc8ic/1-landscape7.jpg?raw=1" alt="Project 8" /></p> | |
| <p>Omnesque probatus recusabo nec ex. Quo ea scaevola liberavisse, eum vidit periculis an. Sit quaeque dolores salutandi et. Vero albucius id vis, ea mei utamur apeirian cotidieque, eos dicit hendrerit in. Dicit interpretaris mea eu.</p> | |
| <p><img src="https://www.dropbox.com/s/1xu0lyv37xquec7/landscape4.jpg?raw=1" alt="picture:Project 1" /></p> | |
| <p>Noster pertinacia ei usu, viris meliore eu quo. Eu vix inimicus omittantur. Eu mea saepe gubergren deterruisset. Eam et wisi magna aliquip, mel ad legere mucius adipisci. Nam ut semper fierent fastidii, eam ut sonet omnes voluptaria, sed | |
| iudicabit reprehendunt in.</p> | |
| <p><img src="https://www.dropbox.com/s/8ddsx94qk91io76/landscape5.jpg?raw=1" alt="Picture:Project 2" /></p> | |
| </section> | |
| </article> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> |
| /** | |
| * JS file for building an bootstrap image carousel from the images on a page | |
| */ | |
| // Creating a custom expression for case insensitive alt attribute starts with | |
| // selector. Because the default e.g. $("img[alt^='Picture']") is case sensitive. | |
| $.expr[':'].altStartsWithCaseInsensitive = function(node, stackIndex, properties) { | |
| return node.alt.toLowerCase().indexOf(properties[3]) == 0; | |
| }; | |
| // This function checks if there are images in the post content whose "alt" | |
| // attribute starts with the given keyword (here the word "Picture"). If none | |
| // are found it does nothing more. If some are found they are moved to a built | |
| // Bootstrap carousel starting with the feature image of the post, which then | |
| // replaces the feature image at the top of the page. | |
| $(document).ready(function() { | |
| var keyword = "picture"; | |
| var carousel, postImages, featureImage, carousel, imagesParent, | |
| indicatorsParent, newDiv, newLi, carouselParent; | |
| // Get the additional images that should be displayed as a carousel. | |
| postImages = $('img:altStartsWithCaseInsensitive(' + keyword + ')'); | |
| // Build the carousel only if there are images for the carousel. | |
| if (postImages.length > 0) { | |
| // Start building the carousel. | |
| imagesParent = $('<div/>', { | |
| 'class': 'carousel-inner', | |
| role: 'listbox' | |
| }); | |
| indicatorsParent = $('<ol/>', { | |
| 'class': 'carousel-indicators' | |
| }); | |
| // Add feature image and its indicator to their respective parents. | |
| featureImage = $('.post-header img'); | |
| if (featureImage.length > 0) { | |
| newDiv = $('<div/>', { | |
| 'class': 'item active' | |
| }); | |
| featureImage.appendTo(newDiv); | |
| newDiv.appendTo(imagesParent); | |
| newLi = $('<li/>', { | |
| 'data-target': '#carousel-example', | |
| 'data-slide-to': '0', | |
| 'class': 'active' | |
| }); | |
| newLi.appendTo(indicatorsParent); | |
| } | |
| // Add additional images and corresponding indicators to their parents | |
| for (var i = 0; i < postImages.length; i++) { | |
| newDiv = $('<div/>', { | |
| 'class': 'item' + ((i == 0 && featureImage.length == 0) ? ' active' : '') | |
| }); | |
| postImages.eq(i).appendTo(newDiv); | |
| newDiv.appendTo(imagesParent); | |
| //add li element to the ol of class "carousel-indicators" | |
| newLi = $('<li/>', { | |
| 'data-target': '#carousel-example', | |
| 'data-slide-to': (featureImage.length != 0 ? i + 1 : i), | |
| 'class': (featureImage.length == 0 && i == 0 ? 'active' : '') | |
| }); | |
| newLi.appendTo(indicatorsParent); | |
| } | |
| // Finish building the carousel. | |
| carousel = $('<div/>', { | |
| id: 'carousel-example', | |
| 'class': 'carousel slide', | |
| 'data-ride': 'carousel' | |
| }); | |
| carousel.append(indicatorsParent, imagesParent); | |
| // Add the carousel to the DOM. | |
| carouselParent = $('.post-header'); | |
| $('.post-header img').remove(); | |
| carouselParent.prepend(carousel); | |
| } | |
| }); |
| <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
| <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> |
| .carousel-inner { | |
| width: 320px; | |
| display: block; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| .carousel-indicators li { | |
| border-color: #8C8677; | |
| margin: 1px 8px 1px 8px; | |
| border-radius: 0; | |
| } | |
| .carousel-indicators .active { | |
| background-color: #4D5377; | |
| margin: 1px 9px 1px 9px; | |
| border-style: none; | |
| width: 10px; | |
| height: 10px; | |
| } | |
| .carousel-indicators { | |
| bottom: -50px; | |
| } | |
| .carousel { | |
| margin-bottom: 3em; | |
| } |
| <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> |