What is preventing images from displaying in my slider within baguetteBox?

Currently, I am in the process of incorporating a slider into my website using the baguetteBox library. After consulting the documentation, I successfully implemented an example that is functioning smoothly without any issues. In order to display a series of images, I am leveraging PHP and iterating through an array.

<div class="gallery">
   
     '; foreach ($dataFotos['fotos'] as $key) { echo '
       <a href="https://1.bp.blogspot.com/-79DdxzZkDog/T76QV6v5IuI/AAAAAAAAAEY/6DzpGZzsmfA/s320/homerocatolico_456_336.jpg">
            <img src="' . $key['foto'] . '" alt="Second image">
      </a>
        '; } echo '
</div>

Everything functions as expected when I use a URL with this format:

 <a href="https://1.bp.blogspot.com/-79DdxzZkDog/T76QV6v5IuI/AAAAAAAAAEY/6DzpGZzsmfA/s320/homerocatolico_456_336.jpg">

The slider displays the images seamlessly. However, I encountered an issue when attempting to showcase images hosted on Google Drive. The link generated by Google follows this format:

  <a href="https://lh3.googleusercontent.com/2IYYQLR38oxMnF51zCAGHDeUXlCk69gJBsXogjO-AM-eR-fQwWrnE8XEZt8iSViFBUuDJE5AQQzrS1hX3VPLpU5cSzmuXE07JT9UIJawi0Sp">

Regrettably, the images do not appear and the slider ceases to function properly at this point.

javascripthtmlcssreactjsslider

Answer №1

Simply add ?.jpg at the end of the link to make it function properly

https://lh3.googleusercontent.com/2IYYQLR38oxMnF51zCAGHDeUXlCk69gJBsXogjO-AM-eR-fQwWrnE8XEZt8iSViFBUuDJE5AQQzrS1hX3VPLpU5cSzmuXE07JT9UIJawi0Sp?.jpg

Answer №2

  • It did the trick for me

baguetteBox.play('.exhibition', {
  sort: /.*/i
});

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

Once a WordPress user includes a php file

For the past three days, I've been grappling with this issue... calling on all experts for assistance! I manage four distinct Wordpress membership sites, each with its own branding. My goal is simple - to have a .wav file play the plan's name wh ...

javascriptphpajaxwordpress

Passing form data to PHP using AJAX in CodeIgniter Framework

I'm facing an issue with my HTML structure which is as follows: <form method="POST"> Name : <input id="asgname" type="text"> <br> Description : <input id="asgdescription" type="text"> <br> <a href="#" id=" ...

javascriptajaxcodeigniterjquery

The significance of passing attributes in Webgl2

I'm currently learning about three.js and working my way through the documentation. I'm struggling to understand the meaning behind the following explanation, could someone provide some assistance? When you manually create the WebGL 2 renderin ...

javascriptthree.js

Encountering errors while testing a NUXT.js and Vue.js application using Jest, specifically seeing messages like '[vuex] module namespace not found in mapState()' and '[vuex] unknown action type'

Despite NUXT's automatic namespacing feature, I am encountering difficulties testing or referencing the store in my testing modules. Can anyone offer advice on how to edit the namespacing property in a Nuxt app? Below is the code for the component, s ...

javascriptvue.jsjestjsvuexnuxt.js

The values in my JavaScript don't correspond to the values in my CSS

Is it possible to retrieve the display value (display:none; or display:block;) of a div with the ID "navmenu" using JavaScript? I have encountered an issue where I can successfully read the style values when they are set within the same HTML file, but not ...

javascripthtmlcss

Angular Chart.js is throwing an error: "Uncaught SyntaxError: Cannot use import statement outside a module"

Upon opening the page, an error in the console related to Chart.js 4.2.1 is being displayed. Description of first image. Description of second image. Is it possible that this issue solely lies with Chart.js? How can it be resolved? To address the proble ...

javascriptangularchartssyntax-error

Utilize CSS exclusively on the "Theme Options" page within a Wordpress website

Everything is running smoothly with my current PHP code, which controls the design of my "Theme Options" page under the WP API Appearance menu. However... The issue is that the CSS stylesheet is affecting all other menus in the WP dashboard as well, like ...

phphtmlcsswordpresswordpress-theming

What is the best way to enclose a bootstrap row within a clickable link generated by the twitch.tv API?

Recently, I completed a JSON/JavaScript project for Free Code Camp that retrieves streamer information like their logo, current status, and display name. My goal is to enclose entire Bootstrap 3 rows in hyperlinks linked to the streamers' pages, elim ...

javascriptjqueryjsontwitter-bootstrap-3

What strategies can I employ to speed up the slow build times in next.js?

Having thoroughly explored the Next JS documentation and delved into related inquiries like Slow page build time in development with Next.js and TypeScript (although that pertains to TypeScript specifically - this concern revolves around JavaScript without ...

javascriptnode.jsnext.js

Customizing error messages to display validation errors instead of default text errors in the Django UserCreationForm

I'm encountering an issue with the registration form on my website. The form itself is straightforward, but I'm facing a problem where if a username is already taken or if the two password fields don't match, Django doesn't respond afte ...

pythonhtmlcssdjango

Display item upon hovering and for an extended period upon clicking using jQuery

I am looking to create a functionality where hovering over an area displays item 2 for a certain duration, which is currently working fine with the existing code. However, I also want it to remain visible for a longer period if clicked, but this does not ...

jqueryhtmljquery-hover

Using Node.js to import modules that have been webpacked

I'm faced with the challenge of managing a multitude of files that come along when installing various modules using npm install, each with its own dependencies. To simplify this process, I am considering consolidating all required libraries using web ...

javascriptnode.jsnpmwebpacknode-modules

Tips for effectively grouping a JavaScript object array with the help of Lodash

I have an array of objects in JavaScript that looks like this: [{ day : "August 30th", id: 1, message : "lorem ipsum1" },{ day : "August 30th", id: 2, message : "lorem ipsum2" },{ day : "August 31th", id: 3, message : " ...

javascriptarrayslodash

Monitoring and recording user's browsing activities while excluding server-side scripting

Currently, I am working on creating a registration form which will direct users to a "Thank you" page once completed. However, I want to include a button on this confirmation page that will take users back to the previous page they were on before registeri ...

javascriptformsbrowser-history

Why does my Div seem to be ignoring the height inherited from the html or body elements?

Is there a way to make the landing-wrapper div expand to fill 100% of the screen on a landing page? Many suggestions advise setting the html/body height to 100%. I've already tried that, but it doesn't seem to be working. I'm using React and ...

htmlcssreactjs

Interacting between Angular controllers and directives while maintaining separation of concerns

In my AngularJS project, I've implemented a directive within a module named ThreeViewer that displays WebGL scenes based on the specified source file. The code snippet below outlines the basic functionality: angular.module('ThreeViewer', [] ...

javascriptangularjsseparation-of-concerns

Modal containing ReduxForm

I'm utilizing ReactJS and aiming to integrate reduxForm into a modal. The modal is powered by the reactstrap library, designed as bootstrap 4 for React. For form validation, I rely on reduxForm. I've been assigned the task of adding a form modal ...

reactjsreduxredux-form

React Modal Open to Display Information on Clicked Target

After generating a list of icons from a JSON object that includes both an image and name value, I am now looking for a way to make them clickable. When clicked, I want a modal to open displaying more details about the selected icon. While there are numerou ...

reactjssimplemodal

Sort the observable data by a value returned from an API request

I am completely new to using RxJS and any assistance offered would be greatly appreciated! Within my component's HTML template, I am looking to create a radio button list. The values for this list are fetched from an observable using the async pipe. ...

javascriptangulartypescriptasynchronousobservable

Using AJAX to Transfer Numerical Data

I am new to javascript and I am trying to implement a LIKE button on my website. <a href="" onClick="likePost(<?php echo $post->ID; ?>); return false;">LIKE</a> Additionally, here is the function that I am using: function likePost( ...

javascriptajaxjquery