Problem encountered with Blueimp gallery and Twitter Bootstrap

Blueimp gallery is being used to showcase a set of 8 images on a website, divided into two rows. The 5th thumbnail (first image on the second row) appears broken, even though it can be seen in the carousel presentation.

Here's the link to view the thumbnails: https://drive.google.com/file/d/0ByO6EWQ4CgAUaGwzbXhnWDlBWFU/view?usp=sharing

Below is the code snippet:

<!-- The Gallery as lightbox dialog, should be a child element of the document body -->
<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
    <div class="slides"></div>
    <h3 class="title"></h3>
    <a class="prev">‹</a>
    <a class="next">›</a>
    <a class="close">×</a>
    <a class="play-pause"></a>
    <ol class="indicator"></ol>
</div>  
    <div id="links">
<div class="row">
<div class="col-xs-2 col-xs-offset-3">
    <a href="img/117.jpg" class="thumbnail">
        <img src="img/thumbnails/117.jpg">
    </a>
</div>    
<div class="col-xs-2">
    <a href="img/119.jpg" class="thumbnail">
        <img src="img/thumbnails/119.jpg">
    </a>
</div>
<div class="col-xs-2">
    <a href="img/120.jpg" class="thumbnail">
        <img src="img/thumbnails/120.jpg">
    </a>
</div>
<div class="col-xs-2">
    <a href="img/121.jpg" class="thumbnail">
        <img src="img/thumbnails/121.jpg">
    </a>
</div>
</div>
<div class="row">
<div class="col-xs-2 col-xs-offset-3">
    <a href="img/125.jpg" class="thumbnail">
        <img src="img/tumbnails/125.jpg">
    </a>
</div>    
<div class="col-xs-2">
    <a href="img/128.jpg" class="thumbnail">
        <img src="img/thumbnails/128.jpg">
    </a>
</div>
<div class="col-xs-2">
    <a href="img/129.jpg" class="thumbnail">
        <img src="img/thumbnails/129.jpg">
    </a>
</div>
<div class="col-xs-2">
    <a href="img/130.jpg" class="thumbnail">
        <img src="img/thumbnails/130.jpg">
    </a>
</div>
</div>
</div>
<script>
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},
        links = this.getElementsByTagName('a');
    blueimp.Gallery(links, options);
};
</script>

Any idea why the 5th thumbnail may be appearing broken? Appreciate any help!

Answer №1

There is a small mistake, please modify it:

<img src="img/tumbnails/125.jpg">

Change it to (don't forget the 'h')

<img src="img/thumbnails/125.jpg">

Thank you!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to transform a string into a nested array in JavaScript

I created a list using Django and passed it to index.html. However, I encountered an issue when trying to use it in the JavaScript content. The list is being passed as a string, and although I attempted to use JSON.parse, I received an error message: Unc ...

Chrome is blocking the loading of a local image in THREE.js due to cross-origin restrictions

While working with THREE.js, I encountered an issue in the developer console: Cross-origin image load denied by Cross-Origin Resource Sharing policy. This error only occurs when I try to run my script in Chrome. The code snippet in question is as follows ...

Inquiry into AngularJS data binding

Just dipping my toes into the world of Angular today. Found a tutorial at Angular JS in 30 mins This little project involves setting up basic databinding in Angular. The code features an input box that updates with whatever is typed next to it. As someone ...

What is the process for retrieving data from a form input field?

I am currently working on a form that will dynamically populate with data from a database. Here's how it is supposed to function: the user inputs the company number, and then the form queries the database to see if the number exists. If it does, the c ...

How come it's not possible to modify the text of this button right when the function kicks off?

When I click a button, it triggers a JavaScript function. The first line of code within the function uses jQuery to change the HTML of the button. However, the button's text does not update in the browser until after the entire function has completed, ...

Simplifying the process of implementing Jquery CSS Toggles

I am planning to simplify the process of toggling visibility for 12 different divs when clicking on 12 different buttons. Instead of repeating the same code multiple times, I am considering a more efficient approach. My idea is to: Step A) Initially hide ...

Create a vibrant stroke and conclude with a circular marker beneath the content with CSS

Can you create a vibrant line with a dot underneath text using CSS, similar to the example shown in the image? The underline should begin with some spacing or padding. .underline { text-decoration: underline; text-underline-offset: 10px; displa ...

how to break out of a JSON loop when the desired data is found

I'm currently working on a code to search for data in my object and it's functioning as expected. However, I am facing an issue when displaying the results as it shows all the indexes present in my object. Is there a way to stop the looping proc ...

Dynamic Button with Jquery and CSS Grid

I have a div that includes a heading using and a Vertical Navigation menu in the same container. To ensure responsiveness, I utilized media queries along with "Display:none and position:abolute" for the Navigation Container, which worked flawlessly up to ...

I am struggling to get the images aligned properly on my HTML page. Can someone please advise on how to fix this issue?

On my HTML page, I have 2 div fields. Within each field, there are 5 images listed sideways. The issue is that the images in the div below are not lining up properly side by side. Given my limited frontend knowledge, how can I align them correctly? Here&a ...

filtering the properties of mongoose documents

I have created a schema as shown below: var UserSchema = new Schema({ firstName: { type: String, required: true }, lastName: { type: String, required: true }, email: { type: String, required: true }, location: { type: String, required: true }, p ...

Tips for adding and verifying arrays within forms using Angular2

Within my JavaScript model, this.profile, there exists a property named emails. This property is an array composed of objects with the properties {email, isDefault, status}. Following this, I proceed to define it as shown below: this.profileForm = this ...

Currently, I am expanding my knowledge of PHP and MySQL by working on a dynamic form that utilizes arrays. As I progress through the project,

One of my recent projects involved creating dynamic rows in a form using code. I managed to save the data in an array and display it using a foreach loop, but I'm facing challenges when trying to insert this data into a database. Here's a glimps ...

Identifying functions that contain dots in their names using JSHint

While running jshint on a JavaScript file, I encountered functions with dots in their names for namespacing purposes. Specifically, within the d3 library, there is a significant portion of code that resembles: d3.select("something") Should I simply disab ...

Generate a random number using the Math.random() method in Node.js/JavaScript to access a folder on the local machine

I am facing a challenge in reading a JSON file located deep within multiple folders on my local machine. The issue arises because the folder name where the file is stored changes every time, as it is generated using the Math.random() method with the prefix ...

Unplanned pathways on a node-based server

Building a server, I've utilized the following code snippet: function uniqueString(length) { var result = ''; var characters = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'; for (var i = length; i &g ...

Trouble with background image displaying on meteor platform

Hey there! I'm in the process of replicating the HBO login page without functional links, but for some reason, the background image isn't loading properly. I suspect it might be an issue with resizing the image, but I can't pinpoint the exac ...

Tips for transferring variables between two browser windows within the same session of Internet Explorer 11

Is there a way to prevent a parameter from displaying in the address bar and avoid storing it locally? For example, the parameter value is like vndfj/dfgdgdfg12/dg==. I attempted the following code, but it does not work on IE and Edge browsers: let data ...

Adding a Timepicker to a Datepicker on a jsp webpage with javascript

I am working on a JSP page that includes a date picker. I want to enhance this datepicker by adding a start time and end time within the calendar itself. How can I achieve this? Additionally, I need to implement validation ensuring that the start time is a ...

Combine the outcomes of various AJAX requests into one variable

Looking to make 2 recursive API calls to create a JQuery datatables page with data from the range of 2016-2021. The API responses are split based on year filters to bypass the 5000 item list limit set by Sharepoint Online. Struggling to combine all API re ...