We Keep Coding

Javascript faceted search

I have this page I'm working on, I'm trying to make a facted search for it. (only issue is I have no json as I'm looping through via django.)
What I currently have is this:
var wood = []
$(".checkbar").click(function() {
id = this.id
$('.spe_' + id).toggleClass("filteredlabel");
$('.flr').addClass("hide");
$('.flr_spe_' + id).removeClass("flr hide").addClass("flrcheck");
if (this.classList[1] == 'checked') {
if (wood.length > 0) {
debugger;
$('.flr_spe_' + this.id).removeClass("hide").addClass("flr");
for (var i = 0; i < wood.length; i++)
if (wood[i] === this.id) {
if (wood.length > 1) {
$('.flr_spe_' + this.id).addClass("hide");
}
if (wood.length == 1) {
$('.flr').removeClass("hide");
}
wood.splice(i, 1);
break;
}
}
$(this).toggleClass("checked");
} else {
$(this).toggleClass("checked");
wood.push(this.id)
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkbar" id="1">
<div class="row">
<div class="box"></div>
<div class="tick"><i class="fas fa-check"></i></div>
Oak (1)
</div>
</div>
<div class="checkbar" id="2">
<div class="row">
<div class="box"></div>
<div class="tick"><i class="fas fa-check"></i></div>
Pine (1)
</div>
</div>
<div class="col-md-4 flr flr_spe_1 flr_rg_1">
<div class="card">
<div class="card-body" align="center">
<div class="flrimagecontainer">
<img class="flrimg" src="/media/images/wood/st_tobacco2x.png" alt="Logo" />
<div class="flrafter">
<p class="spectitle">SPECIES</p>
<p class="spec">Oak</p>
<p class="spectitle">RANGE</p>
<p class="spec">Old Wood</p>
<p class="spectitle">STYLE</p>
<p class="spec">Herringbone</p>
<p class="spectitle">TEXTURE</p>
<p class="spec">Prme</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 flr flr_spe_2 flr_rg_1">
<div class="card">
<div class="card-body" align="center">
<div class="flrimagecontainer">
<img class="flrimg" src="/media/images/wood/straightwood_CfuTJb4.png" alt="Logo" />
<div class="flrafter">
<p class="spectitle">SPECIES</p>
<p class="spec">Pine</p>
<p class="spectitle">RANGE</p>
<p class="spec">Old Wood</p>
<p class="spectitle">STYLE</p>
<p class="spec">Herringbone</p>
<p class="spectitle">TEXTURE</p>
<p class="spec">Prme</p>
</div>
</div>
</div>
</div>
</div>
The problem is when I have to start adding more checkboxes to filter on. If i add another set of checkboxes for range, how would I go about making this so that they filter correctly together?
e.g. if I check Old Wood, And then Check Pine, How can I get just the results that have "Old Wood" and "Pine" and not return Oak?
Many Thanks

How to pass variable to total in script

I have the following code to use but i don't know how to pass the [TOTAL] variable which holds the shopping cart total to the total in the paypal script below. Otherwise the buyer will always be able to buy whatever for $1 which obviously is incorrect.
<script>
var $total = document.getElementById("balancePrice");
paypal.Button.render({
env: 'production', // Or 'sandbox'
client: {
sandbox: 'AYdNDf4q9a-V8p8kcVe885AytuFfmXcwfAn7--tEkgV4UMK7k_QroOJsktMpp6v_Y9r2bKz9OUi6cSFi',
production: 'AfNogtQ4SAPFsVEZIA_KUbMnuN0uNR3cALoL5PsJHlpuV5tMDxwnty2-Ceu11d82KiqnRmEi_Ykap6fP'
},
commit: true, // Show a 'Pay Now' button
payment: function(data, actions) {
return actions.payment.create({
payment: {
transactions: [
{
amount: { total: $total, currency: 'GBP' }
}
]
}
});
},
onAuthorize: function(data, actions) {
return actions.payment.execute().then(function(payment) {
// The payment is complete!
// You can now show a confirmation message to the customer
});
}
}, '#paypal-button');
</script>
Here is the html of the checkout. [BALANCE] is what displays the total cost of the order after shipping etc and what i'd like to be passed to the paypal code.
<div class="divOrderTotal">
<div class="header">
<h3 class="checkout-headers">[checkout3_orderTotal]</h3>
<div class="clear"></div>
</div>
<div id="total_div" name="total_div" class="pad10 boxShadow">
<!--START: total_template_noshipping-->
<div class="totalinstructions pad10 boxShadow">[checkout3_totalinstructions]</div>
<!--END: total_template_noshipping-->
<!--START: total_template-->
<div class="total_items">[itemCount] Item(s)</div>
<div class="total_subtotal">[SUBTOTAL]</div>
<div class="clear"></div>
<!--START: DISCOUNTS-->
<div class="total_discount-detail">[shoppingcart_discount]: (details)</div>
<div class="total_discount">- [DISCOUNT]</div>
<div class="clear"></div>
<!--START: PROMOTIONS-->
<div id="divDiscountDetails" name="divDiscountDetails" style="display:none;">
<div class="total_promotion">Promotion Name</div>
<div class="clear"></div>
<!--START: DISPLAY_PROMOS-->
<div class="total_promotion-name">[promotion_name]</div>
<div class="button right"><!--START: REMOVE_PROMO-->Remove<!--END: REMOVE_PROMO--></div>
<!--END: DISPLAY_PROMOS-->
<div class="clear"></div>
</div>
<div class="clear"></div>
<!--END: PROMOTIONS-->
<!--END: DISCOUNTS-->
<!--START: BUYSAFE-->
<div class="total_buysafe-logo"><img src="assets/templates/common/images/buysafe.gif" alt="" /></div>
<div class="total_buysafe">[buysafe_totalbondcost]</div>
<div class="clear"></div>
<!--END: BUYSAFE-->
<!--START: HANDLING-->
<div class="total_handling-item">[handling_itemname]</div>
<div class="total_handling-price">[handling_price]</div>
<div class="clear"></div>
<!--END: HANDLING-->
<div class="total_cart-shipping">[shoppingcart_shipping]</div>
<div class="total_shipping">[SHIPPING]</div>
<div class="clear"></div>
<div class="total_cart-taxes">[shoppingcart_taxes]</div>
<div class="total_taxes">[TAX]</div>
<div class="clear"></div>
<div class="total_cart-total">[shoppingcart_total]</div>
<div class="total_total">[TOTAL]</div>
<div class="clear"></div>
<!--START: GIFTCERTS-->
<div class="total_cart-giftcerts">[shoppingcart_giftcertificate]: (details)</div>
<div class="total_giftcerts">-[GIFTCERTS]</div>
<div id="divGiftCertDetails" name="divGiftCertDetails" style="display:none;">
<div class="total_giftcerts-details">
<div class="giftcerts-name">Gift Code</div>
<div class="giftcerts-amount">Amount</div>
<div class="giftcerts-balance">Balance</div>
<div class="clear"></div>
</div>
<!--START: GIFTCERTS_DETAILS_ITEMS-->
<div class="total_giftcerts-details-items">
<div class="giftcerts-name">[certificate_name]</div>
<div class="giftcerts-amount">[discount_amount]</div>
<div class="giftcerts-balance">[discount_balance]</div>
<div class="button">Remove</div>
<div class="clear"></div>
</div>
<!--START: GIFTCERTS_DETAILS_ITEMS-->
</div>
<!--END: GIFTCERTS-->
<div id="divBalance">
<div class="total_cart-balance">[shoppingcart_balance]</div>
<div id="balancePrice">[BALANCE]</div>
<div class="clear"></div>
</div>
<!--START: apply_coupon-->
<div id="divApplyCoupon">
<div class="coupon-header">[viewcart_coupon-header]</div>
<div class="coupon-field">
<input id="coupon" onchange="clearContent(this);" maxlength="30" size="15" value="" name="coupon_code" class="txtBoxStyle" />
<input type="button" onclick="applyCoupon(this.form.coupon_code.value);" value="Apply" class="btn" onmouseover="this.className='btn_over'" onmouseout="this.className='btn'" />
</div>
<div class="clear"></div>
<div class="coupon-message">[viewcart_coupon-message]</div>
<div name="divInvalidCoupon" id="divInvalidCoupon" style="display:[invalidCouponDisplay]; color:#F00;">[viewcart_coupon-invalid]</div>
<div class="coupon-applied">[divCouponApplied]</div>
</div>
<div class="clear"></div>
<!--END: apply_coupon-->
<!--END: total_template-->
</div>
</div>
</div>
<div class="clear"></div>
The following errors happen
ppxo_unhandled_error {stack: "Error: TypeError: Cannot read property 'textConten…://www.paypalobjects.com/api/checkout.js:3080:13)", errtype: "[object Error]", timestamp: 1516799614450, windowID: "f18cf37d7c", pageID: "2f88e8f682", …}
And this
types.js:119 Uncaught Error: TypeError: Cannot read property 'textContent' of null
When i do the following in the google console i get
var a = document.getElementById("balancePrice");
var b = a.textContent;
console.log(b)
Results in
$5.64
undefined

Updated with html code. The total output is coming from the variable [BALANCE] which is said to be undefined when i use it
I guess that means calling
//[...]
amount: { total: '[BALANCE]', currency: 'USD' }
//[...]
doesn't do the trick.
Try the following:
var $total = document.querySelector("#balancePrice");
var total = $total.textContent.replace(/[^\d.-]/g, "");
paypal.Button.render({
env: 'production', // Or 'sandbox'
client: {
sandbox: 'test',
production: 'test'
},
commit: true, // Show a 'Pay Now' button
payment: function(data, actions) {
return actions.payment.create({
payment: {
transactions: [
{
amount: { total: total, currency: 'USD' }
}
]
}
});
},
onAuthorize: function(data, actions) {
return actions.payment.execute().then(function(payment) {
// The payment is complete!
// You can now show a confirmation message to the customer
});
}
}, '#paypal-button');
I did grabbing for the total-value in the variables above so i don't have to write a long line of code inside the payment() function.

Javascript Uncaught SyntaxError: Unexpected Identifier (vue.js)

I'm having a frustrating time trying to get this to work, Chrome keeps displaying an Uncaught Syntax error, but being a beginner to Vue, I have no idea where to look. Im at the part of the tutorial where it says Adding the listing area. Also here is a link to the tutorial as well. Any help or pointers would be appreciated. Thank you!
new Vue({
el: '#events',
data: {
event: {
name: "",
description: "",
date: ""
},
events: []
ready: function() {
// When the application loads, we want to call the method that initializes
// some data
this.fetchEvents();
},
fetchEvents: function() {
var events = [{
id: 1,
name: "TIFF",
description: "Toronto International Film Festival",
date: "2015-09-10"
},
{
id: 2,
name: "The Martian Premiere",
description: "The Martian Comes to Theatres.",
date: "2015-10-02"
},
{
id: 3
name: "SXSW",
description: "Music, film and interactive festival in Austin, TX.",
date: "2016-03-11"
}
];
this.$set("events", events);
},
addEvent: function() {
if (this.event.name) {
this.events.push(this.event);
this.event = {
name: "",
description: "",
date: ""
};
}
}
}
})
<!doctype html>
<head>
<meta charset="utf-8">
<title>Vue</title>
<!---CSS-->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
</head>
<body>
<!--Nav bar-->
<nav class="navbar navbar-default">
<div class="container fluid">
<a class="navbar-brand"><i class= "glyphicon glyphicon-bullhorn"></i> Vue Events Bulletin Board</a>
</div>
</nav>
<!--main body of our application-->
<div class="container" id="events">
<!--add an event form-->
<div class="col-sm-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3> Add An Event</h3>
</div>
<div class="panel-body">
<div class="form-group">
<input class="form-control" placeholoder="Event Name" v-model="event.name">
</div>
<div class="form-group">
<textarea class="form-control" placeholder="Event Description" v-model="event.description"></textarea>
</div>
<div class="form-group">
<input type="date" class="form-control" placeholoder="Date" v-model="event.date">
</div>
<button class="btn btn-primary" v-on="click: addEvent">Submit</button>
</div>
<div class="list-group" <a href="#" class="list-group-item" v-repeat="event in events">
<h4 class="list-group-item-heading">
<i class="glyphicon glyphicon-bullhorn"></i>
</h4>
<h5>
<i class="glyphicon glyphicon-calender" v-if="event.date"></i>
</h5>
<p class="list-group-item-text" v-if="event.description"> </p>
<button class="btn btn-xs btn-danger" v-on="click: deleteEvent($index)">Delete</button>
</div>
<!--show the events-->
<div class="col-sm-6">
<div class="list-group">
</div>
</div>
</div>
<!--JS-->
<script src="node_modules/vue/dist/vue.js"></script>
<script src="node_modules/vue-resource/dist/vue-resource.js"></script>
<script src="app1.js">
< /script < /
body > <
/html>

You're missing a comma in one of your object declarations
{
id: 3 // <- missing comma here
name: "SXSW",
description: "Music, film and interactive festival in Austin, TX.",
date: "2016-03-11"
}
It's plain Javascript, it has nothing to do with Vue

Issue when using Vuejs with computed filter

I am writing a filter application by using Vuejs with checkboxes. It works well when I use single checkbox. However, it removes the results when I check more than than 2 checkboxes.
For example, when I check Green and Red, it should show the Title 1 and Title 2.
Or when I check Green, Red, Active, Completed, it should show the Title 1 and Title 2.
You can check my code at: https://jsfiddle.net/dalenguyen/xLcvdy0n/1/
HTML code:
<div class="content">
<div class="row">
<div class="col-md-3 col-sm-4">
<div class="box box-info">
<div class="box-header with-border">
<h3 class="box-title">Filter by</h3>
</div>
<!-- /.box-header -->
<!-- form start -->
<div class="box-body">
<div class="box box-success box-solid">
<div class="box-header with-border">
<h3 class="box-title">Health</h3>
<!-- /.box-tools -->
</div>
<!-- /.box-header -->
<div class="box-body" style="display: block;">
<div class="form-group col-md-12">
<input type="checkbox" id="green" value="Green" v-model="checkedHealths" name="Healths">
<label for="green">Green</label>
</div>
<div class="form-group col-md-12">
<input type="checkbox" id="red" value="Red" v-model="checkedHealths" name="Healths">
<label for="red">Red</label>
</div>
<div class="form-group col-md-12">
<input type="checkbox" id="yellow" value="Yellow" v-model="checkedHealths" name="Healths">
<label for="yellow">Yellow</label>
</div>
</div>
<!-- /.box-body -->
</div>
<div class="box box-success box-solid">
<div class="box-header with-border">
<h3 class="box-title">Status</h3>
<!-- /.box-tools -->
</div>
<!-- /.box-header -->
<div class="box-body" style="display: block;">
<div class="form-group col-md-12">
<input type="checkbox" id="active" value="Active" v-model="checkedStatuses" name="Statuses">
<label for="active">Active</label>
</div>
<div class="form-group col-md-12">
<input type="checkbox" id="completed" value="Completed" v-model="checkedStatuses" name="Statuses">
<label for="completed">Completed</label>
</div>
<div class="form-group col-md-12">
<input type="checkbox" id="cancelled" value="Cancelled" v-model="checkedStatuses" name="Statuses">
<label for="cancelled">Cancelled</label>
</div>
</div>
<!-- /.box-body -->
</div>
<button type="button" class="btn btn-block btn-info" v-on:click="resetFilter">Reset</button>
</div>
<!-- /.box-body -->
</div>
</div>
<div class="col-md-9 col-sm-8">
<div class="col-md-4" v-for="project in filteredProjects">
<div class="box collapsed-box">
<div class="box-header with-border">
<h4 class="box-title">{{project['title']}}</h4>
<!-- /.box-tools -->
</div>
<!-- /.box-header -->
<div class="box-body">
<table class="table table-striped">
<tr>
<td>Status</td>
<td>{{project['Status']}}</td>
</tr>
<tr>
<td>Health</td>
<td>{{project['Health']}}</td>
</tr>
</table>
</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
</div>
</div>
</div>
</div>
Vuejs code:
var app = new Vue({
el: '.content',
data: {
projects: [
{
"title": "Title 1",
"Status": "Active",
"Health": "Green",
},
{
"title": "Title 2",
"Status": "Completed",
"Health": "Red",
},
{
"title": "Title 3",
"Status": "Cancelled",
"Health": "Yellow",
},
]
,
checkedHealths: [],
checkedStatuses: []
},
computed: {
filteredProjects: function(){
let filterProjects = this.projects;
$.each(this.checkedHealths, function(value, key){
filterProjects = filterProjects.filter(function(project){
return project.Health == key;
})
});
$.each(this.checkedStatuses, function(value, key){
filterProjects = filterProjects.filter(function(project){
return project.Status.includes(key);
})
});
return filterProjects;
}
},
mounted: function(){
jQuery('input').iCheck({
checkboxClass: 'icheckbox_square-green',
radioClass: 'iradio_square-green',
increaseArea: '20%' // optional
});
jQuery('input').on('ifChecked', function(e){
if($(this).attr('name') === "Healths")
app.$data.checkedHealths.push($(this).val());
if($(this).attr('name') === "Statuses")
app.$data.checkedStatuses.push($(this).val());
});
jQuery('input').on('ifUnchecked', function(e){
if($(this).attr('name') === "Healths"){
let data = app.$data.checkedHealths;
app.$data.checkedHealths.splice(data.indexOf($(this).val()),1);
}
if($(this).attr('name') === "Statuses"){
let data = app.$data.checkedStatuses;
app.$data.checkedStatuses.splice(data.indexOf($(this).val()),1);
}
});
},
methods: {
resetFilter: function(){
$('input').iCheck('uncheck');
}
}
})

Your filterProjects method should look something like this.
filteredProjects: function(){
let filterProjects = this.projects;
if (this.checkedHealths.length > 0){
filterProjects = filterProjects.filter(project => {
return this.checkedHealths.includes(project.Health);
})
}
if (this.checkedStatuses.length > 0){
filterProjects = filterProjects.filter(project => {
return this.checkedStatuses.includes(project.Status)
})
}
return filterProjects;
}
Updated fiddle.
Essentially, your old filter code was checking each filter individually, where you needed to handle them all at once. The above code loops through the projects and checks if the project's value is in the selected filter values.
You're also using a lot of jQuery where you could just be using native methods and Vue.

Adding descriptions inside a blueimp gallery

I am using a BlueImp Gallery to add lightboxes to my image gallery. So, when you click on an image thumbnail, it launches a lightbox with a larger version of the image etc.
I also want to add in some descriptive text and a button to each slide of the lightbox, but I am having trouble making it work. It won't show the placeholder descriptions that I have added in.
Here's what I have so far;
HTML:
<div id="blueimp-gallery" class="blueimp-gallery">
<!-- The container for the modal slides -->
<div class="slides"></div>
<!-- Controls for the borderless lightbox -->
<h3 class="title"></h3>
<p class="description"></p>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="close">×</a>
<a class="play-pause"></a>
<ol class="indicator"></ol>
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" aria-hidden="true">×</button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body next"></div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left prev">
<i class="glyphicon glyphicon-chevron-left"></i>
Previous
</button>
<button type="button" class="btn btn-primary next">
Next
<i class="glyphicon glyphicon-chevron-right"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<div id="links">
<div class="row prints">
<div class="col-md-4">
<div class="thumbnail">
<div class="caption">
<a href="http://farm3.staticflickr.com/2843/10406026526_4cd1b56391.jpg" title="Ballooning" data-description="This is a banana." data-gallery>
<img src="http://farm8.staticflickr.com/7389/10404414563_0914b69e0e.jpg" alt="Ballooning">
</a>
<h3>Ballooning</h3>
<p>from $18.00</p>
<p>Find out more</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<div class="caption">
<a href="http://farm6.staticflickr.com/5547/10406009404_c197c2221b.jpg" title="Clearing" data-description="This is a apple." data-gallery>
<img src="http://farm6.staticflickr.com/5490/10404414523_745ea3065d.jpg" alt="Clearing">
</a>
<h3>Clearing</h3>
<p>from $18.00</p>
<p>Find out more</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<div class="caption">
<a href="http://farm6.staticflickr.com/5510/10406026066_7f95a075ee.jpg" title="Sky/Sea" data-description="This is a cherry." data-gallery>
<img src="http://farm4.staticflickr.com/3769/10404249505_d767f7c420.jpg" alt="Sky/Sea">
</a>
<h3>Sky/Sea</h3>
<p>from $18.00</p>
<p>Find out more</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<div class="caption">
<a href="http://farm4.staticflickr.com/3678/10406009004_5c625e2028.jpg" title="Lights" data-description="This is a grapefruit." data-gallery>
<img src="http://farm3.staticflickr.com/2814/10404249395_9e4cae5bc7.jpg" alt="Lights">
</a>
<h3>Lights</h3>
<p>from $18.00</p>
<p>Find out more</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<div class="caption">
<a href="http://farm6.staticflickr.com/5538/10406019875_8424fbee11.jpg" title="Silhouettes" data-description="This is a orange." data-gallery>
<img src="http://farm8.staticflickr.com/7343/10404255766_d808d1902d.jpg" alt="Silhouettes">
</a>
<h3>Silhouettes</h3>
<p>from $18.00</p>
<p>Find out more</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<div class="caption">
<a href="http://farm4.staticflickr.com/3682/10406009134_3b666324ff.jpg" title="Sway" data-description="This is a kiwi." data-gallery>
<img src="http://farm6.staticflickr.com/5516/10404249545_7efb481042.jpg" alt="Sway">
</a>
<h3>Sway</h3>
<p>from $18.00</p>
<p>Find out more</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<div class="caption">
<a href="http://farm8.staticflickr.com/7425/10406019935_1def1e0c09.jpg" title="Sunset" data-description="This is a grape." data-gallery>
<img src="http://farm3.staticflickr.com/2810/10404249465_0124b7f3e5.jpg" alt="Sunset">
</a>
<h3>Sunset</h3>
<p>from $18.00</p>
<p>Find out more</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<div class="caption">
<a href="http://farm6.staticflickr.com/5532/10406009324_4cd1b56391.jpg" title="Lighthouse" data-description="This is a strawberry." data-gallery>
<img src="http://farm6.staticflickr.com/5543/10404240054_6261498220.jpg" alt="Lighthouse">
</a>
<h3>Lighthouse</h3>
<p>from $18.00</p>
<p>Find out more</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<div class="caption">
<a href="http://farm4.staticflickr.com/3747/10406026506_6a4dbf2df0.jpg" title="Slabs"data-description="This is a pineapple." data-gallery>
<img src="http://farm8.staticflickr.com/7345/10404249655_7512bf6565.jpg" alt="Slabs">
</a>
<h3>Slabs</h3>
<p>from $18.00</p>
<p>Find out more</p>
</div>
</div>
</div>
</div>
</div>
CSS:
.blueimp-gallery > .description {
position: absolute;
top: 30px;
left: 15px;
color: red;
display: none;
}
.blueimp-gallery-controls > .description {
display: block;
}
JS:
blueimp.Gallery(
document.getElementById('links'),
{
onslide: function (index, slide) {
var text = this.list[index].getAttribute('data-description'),
node = this.container.find('.description');
node.empty();
if (text) {
node[0].appendChild(document.createTextNode(text));
}
}
}
);
And in my body (gallery.js is the file where I've added the above JS):
<script src="//code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="lib/fancybox/jquery.fancybox.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://blueimp.github.io/Gallery/js/jquery.blueimp-gallery.min.js"></script>
<script src="js/bootstrap-image-gallery.min.js"></script>
<script src="js/gallery.js"></script>
Any pointers on where I've gone wrong would be much appreciated!

You can pass any needed data on a element, and then display it in the gallery.
I spend a lot of time trying to find an answer, so I'll leave it here.
Here is an example:
HTML:
<div id="blueimp-gallery" class="blueimp-gallery">
<div class="slides"></div>
<h3 class="title"></h3>
<p class="description"></p>
<p class="example"></p>
...
</div>
------
<div id="links">
Banana
Apple
</div>
JS:
document.getElementById('links').onclick = function (event) {
event = event || window.event;
var target = event.target || event.srcElement,
link = target.src ? target.parentNode : target,
options = {
index: link, event: event,
onslide: function (index, slide) {
self = this;
var initializeAdditional = function (index, data, klass, self) {
var text = self.list[index].getAttribute(data),
node = self.container.find(klass);
node.empty();
if (text) {
node[0].appendChild(document.createTextNode(text));
}
};
initializeAdditional(index, 'data-description', '.description', self);
initializeAdditional(index, 'data-example', '.example', self);
}
},
links = this.getElementsByTagName('a');
blueimp.Gallery(links, options);
};
CSS:
You can use .scss to refactor it, but it's just for example
.blueimp-gallery > .description, .blueimp-gallery > .example {
position: absolute;
top: 30px;
left: 15px;
color: #fff;
display: none;
}
.blueimp-gallery-controls > .description, .blueimp-gallery-controls > .example {
display: block;
}

Sorry if to late but I find a way to do this, only change the JS from:
blueimp.Gallery(
document.getElementById('links'),
{
onslide: function (index, slide) {
var text = this.list[index].getAttribute('data-description'),
node = this.container.find('.description');
node.empty();
if (text) {
node[0].appendChild(document.createTextNode(text));
}
}
}
);
to this:
blueimp.Gallery(
document.getElementById('links'),
{
onslide: function (index, slide) {
var text = this.list[index].getAttribute('data-description'),
node = this.container.find('.description');
node.empty();
if (text) {
node[0].innerHTML = text;
}
}
}
);

blueimp.Gallery(
document.getElementById('links'), {
onslide: function (index, slide) {
var text = this.list[index].getAttribute('data-description'),
node = this.container.find('.description');
node.empty();
if (text) {
node[0].appendChild(document.createTextNode(text));
}
}
});
http://jsfiddle.net/2B3bN/25/
Have a look at this one, it is a working one.
Just check what you've done wrong compared to mine.

use
document.getElementById('links').getElementsByTagName('a') or .children()

That works only for the first link...
I am trying to get it to work with html in the data-description. I have it working and pulling in the decsription text, but how do you parse the html to work as a link?
http://jsfiddle.net/LXp76/
<img src="http://lorempixel.com/80/80/" alt="" >
here it is working with FancyBox, http://jsfiddle.net/yShjB/2/
but I would much rather use the BlueImp Gallery..