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 Building
function 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 object
var 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.