I am designing a website for a company that manages buildings/real estate.  I did not have much use for a CSS library like Bootstrap or Foundation, except on one page of the website.  This page contains a list of selected buildings.  When a user clicks on the name of a building, the building's information appears and images of the building appear in a Bootstrap image carousel.  I used AJAX to GET the images of a property and then prototyped an object for each property on the list-- easy way to replace the text on-screen.Below is the JavaScript & jQuery code that makes this happen://for bootstrap carousel$('.carousel').carousel();//stores the building currently displayed, for swap function below.var currentBuilding;//constructor for Buildingfunction Building(title, background, story, images, stats){    this.title = title;    this.background = background;    this.story = story;    //images references directory where this building's images are located:    this.images = images;     this.stats = stats;}//example objectvar azusa = new Building(    Azusa, CA,    The company purchased a building in 2006 with a 20-year loan at 2% interest.,    The lot used to be the site of a mini-mall with tenants such as McDonalds and Costco,    azusa-california,    10,000 sqft);//bind to onclick for list items. Given a Building (e.g. azusa above),//place the most recently clicked Building's information on the page.function swap(building){    event.preventDefault();    if(currentBuilding != building) {        currentBuilding = building;        $(h3:first).fadeOut(400,function(){            $(h3:first).html(building.title);            $(h3:first).fadeIn(400,function(){});        });        $(#background p:first).fadeOut(400,function(){            $(#background p:first).html(building.background);            $(#background p:first).fadeIn(400,function(){});        });        $('#carousel-container').fadeOut(400,function(){            grabImages(building.images); //see function below            $('#carousel-container').fadeIn(400,function(){});        });        $(#story p:first).fadeOut(400,function(){            $(#story p:first).html(building.story);            $(#story p:first).fadeIn(400,function(){});        });        $(#stats p:first).fadeOut(400,function(){            $(#stats p:first).html(building.stats);            $(#stats p:first).fadeIn(400,function(){});        });    }}function grabImages(folder){    var dir = img/selected-buildings-slides/+folder;    var fileextension = .jpg;    $.ajax({        //This will retrieve the contents of the folder if the folder is configured as 'browsable'        url: dir,        type: GET,        success: function (data) {            var nth = 0;            var active= active;            $('.carousel-inner').html();            //Lsit all png file names in the page            $(data).find(a:contains( + fileextension + )).each(function () {                if(nth>0){                    $('.carousel-indicators').append(<li data-target='#property-carousel' data-slide-to='+nth+'></li>)                    active=                }                else{                    $('.carousel-indicators').html(<li class='active' data-target='#property-carousel' data-slide-to='0'></li>);                }                var filename = this.href.replace(window.location.host, ).replace(http://, );                $('.carousel-inner').append(<div class='item+active+'> <img src ='+dir+filename+' alt='property photo'></div>);                nth++;            });        }    });}Now, I am sure you are looking at that grabImages() function and cringing. I know it looks messy, but it works.  Really I am looking to see if there is a way to sidestep AJAX without having to reference the explicit path to each individual image, because the image files have arbitrary names.Also, if there is a way to wait for the images to fully load in grabImages() before displaying them, that would be cool too.
jQuery for image swapping and some JS for text swapping
javascript;jquery;css;html5;twitter bootstrap