Having trouble with Fancybox loading images from an external URL?

Here is an example of functioning HTML code:

<a class="fancybox-gallery" href="http://sale.coupsoft.com/uploads/938218/logo.png">
    <img class="animate scale animated" src="http://sale.coupsoft.com/uploads/938218/logo.png" alt="Image1">
    <div class="image-hover">
        <i class="icon-zoom-in-2"></i>
    </div>
</a>

And here is an example of failing HTML code:

<a class="fancybox-gallery" href="http://wallpapercraze.com/images/wallpapers/nowallpaper-585747.jpeg">
    <img class="animate scale animated" src="http://wallpapercraze.com/images/wallpapers/nowallpaper-585747.jpeg" alt="Image1" style="height:75px">
    <div class="image-hover">    
        <i class="icon-zoom-in-2"></i>
    </div>
</a>

There seems to be an issue when trying to load images from external URLs, causing the fancybox to redirect to that URL instead of displaying the image. How can one address this problem, and what may be causing it to occur?

javascriptjqueryhtmlcss

Answer №1

My implemented code covers both scenarios.

Here's a link to the JSFIDDLE for reference.

$("a.fancybox-gallery").fancybox({
  'transitionIn': 'elastic',
  'transitionOut': 'elastic',
  'speedIn': 600,
  'speedOut': 200,
  'overlayShow': false
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>
<link rel='stylesheet' href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" />

<a class="fancybox-gallery" href="http://sale.coupsoft.com/uploads/938218/logo.png">
  <img class="animate scale animated" src="http://sale.coupsoft.com/uploads/938218/logo.png" alt="Image1">
  <div class="image-hover">
    <i class="icon-zoom-in-2"></i>
  </div>
</a>

<a class="fancybox-gallery" href="http://wallpapercraze.com/images/wallpapers/nowallpaper-585747.jpeg">
  <img class="animate scale animated" src="http://wallpapercraze.com/images/wallpapers/nowallpaper-585747.jpeg" alt="Image1" style="height:75px">
  <div class="image-hover">
    <i class="icon-zoom-in-2"></i>
  </div>
</a>

Answer №2

The issue is arising because Fancybox is unable to recognize that the URL is linked to an image, since it does not end with a .jpg or any other image file extension.

To resolve this problem, all you need to do is remove the &#10; from the end of the URLs:

<a class="fancybox-gallery" href="http://wallpapercraze.com/images/wallpapers/nowallpaper-585747.jpeg">
    <img class="animate scale animated" src="http://wallpapercraze.com/images/wallpapers/nowallpaper-585747.jpeg" alt="Image1" style="height: 75px">
    <div class="image-hover">    
        <i class="icon-zoom-in-2"></i>
    </div>
</a>

Answer №3

Eliminate the semicolon from the URL:

<a class="fancybox-gallery" href="http://wallpapercraze.com/images/wallpapers/nowallpaper-585747.jpeg&#10;">
    <img class="animate scale animated" src="http://wallpapercraze.com/images/wallpapers/nowallpaper-585747.jpeg&#10;" alt="Image1" style="height:75px">
    <div class="image-hover">    
        <i class="icon-zoom-in-2"></i>
    </div>
</a>

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

Best practices for defining module-wide constants in AngularJS

In my project, I have around 20 "modules" each with its own unique functionality but following the same structure. These modules are stored in separate files within their respective folders. For instance, the admin module is located in the modules/admin fo ...

javascriptangularjs

Discovering a value that aligns with one of the values in an array using Javascript

Just a heads up: this quiz is super simple and only has one input field for each question. This block of Javascript code is used to check if the answer entered in the input field is correct or not. In this case, it checks if the answer entered is 'en ...

javascriptjqueryarrays

Retrieve an XML document using AJAX and then convert it to JSON format without needing a server

Seeking assistance with a code snippet I'm currently working on. Unfortunately, my knowledge of AJAX and jQuery is limited. Here's the issue: I am trying to retrieve XML data from an external XML file (text.xml) and convert it into a JSON object ...

javascriptjqueryjsonajaxxml

Encountering difficulties in retrieving the JSON data from the web service

My external web service contains JSON data which has been validated using the JSON Validator website. However, I am facing an issue where the success function in the code below is not running at all. The web service necessitates that the email and password ...

javascriptjqueryjsonajax

The function .remove() fails to remove a text node in Internet Explorer

Check out the code here: http://jsfiddle.net/6nN7G/ Utilizing a shopify app for star reviews that generates div.text - my aim is to eliminate the text indicating the number of reviews such as "19 reviews" and "3 reviews" from the HTML. This action is perf ...

javascriptjquery

Dynamically access nested objects by utilizing an array of strings as a pathway

Struggling to find a solution for accessing nested object properties dynamically? The property path needs to be represented as an array of strings. For example, to retrieve the label, use ['type', 'label'] I'm at a roadblock wit ...

javascriptangulartypescript

What is the best way to change the background color of a table cell in HTML and CSS?

Trying to adjust the background image of each data cell to a selected image has been challenging. Using the method displayed below, only the top left corner of the photo appears. The code snippet demonstrates setting the background of each data cell to th ...

htmlcssimagebackgroundstyling

When working with Node.js, it is important to properly export your Oracle database connection to avoid encountering an error like "TypeError: Cannot read property 'execute

Hey there, I am a newbie when it comes to Node.js and Oracle. I've managed to create an app and establish a successful connection to the database. Now, I'm trying to figure out how to utilize the connection object throughout my application. Any s ...

javascriptnode.jsoracleexpressnode-modules

Managing dynamic input texts in React JS without using name properties with a single onChange function

Dealing with multiple onChange events without a predefined name property has been challenging. Currently, one text input controls all inputs. I have come across examples with static inputs or single input functionality, but nothing specifically addressin ...

javascriptreactjs

Extract the content within a div element and make changes to it

Here is a scenario: I need to retrieve the content of a div and then make modifications to it before inserting it into another div. See the code below: $("#loupe").on("click", function(){ $('#divBody').empty(); $('#divTitle').e ...

jqueryhtml

How can I dynamically apply an active class when clicking on a group of buttons?

Iterating through the buttons array, I retrieve three buttons. My goal is to determine which button has been clicked and apply an active class to it. import React from "react"; import { useState } from "react"; import style from "./years.module.scss"; co ...

javascriptreactjsecmascript-6

The website's favicon is mysteriously absent, particularly noticeable when using Google Chrome on my WordPress site

I recently added a favicon to my wordpress website, but for some reason it's not appearing on Chrome. If anyone could lend me a hand, I would greatly appreciate it! Any assistance would be wonderful, thank you! ...

htmlwordpresswordpress-theming

The scroll event is triggered only when scrolling upwards

I am encountering an issue with my scroll function. Currently, it only alerts when scrolling to the top instead of the bottom. How can I correct this so that it triggers the alert when reaching the bottom of the page? $(window).scroll(function() { if ...

javascriptjquery

The MessageError: expressjs is unable to read the property "image" because it is null

I am currently working on developing a shopping cart using express and mongodb. However, I encountered an error when attempting to include an image category in the form. Here is the code snippet for handling post requests in admin_product.js: router.post(& ...

javascriptnode.jsexpress

Unable to show inline within web forms application utilizing bootstrap

I am currently modifying the account registration section of a new VS 2013 web application that uses bootstrap css for formatting. I am working on creating a form on a page and struggling to get one section to display inline instead of as a block element. ...

csstwitter-bootstrap

Arranging card images in a row using semantic cards for optimal alignment

Trying to create a row of semantic-ui cards with images at the top, I ran into an issue with varying image heights causing different card title positions. The goal is to have all images be the same height while still adapting to larger screens. Although I ...

csssemantic-ui

Using getJSON to return key/value pair from local host URL in JSFiddle - A step-by-step guide

After following a tutorial on building an API using Python, Flask, SQLite, and SQLAlchemy, I have successfully tested the connection by hitting the localhost address in my browser. Now, I am curious if it is possible to test this connection and see the des ...

javascriptjsonajaxjsfiddle

Display the value of a shortened string

My Goal I aim to develop a method for determining the amount of a string visible before it gets cut off. Motivation In my project, there is a collection of items that can be chosen. A panel presents a concatenated string of the selected item names separa ...

javascripthtmlcssangular

JavaScript equivalent code to C#'s File.ReadLines(filepath) would be reading a file line

Currently in my coding project using C#, I have incorporated the .NET package File.ReadLines(). Is there a way to replicate this functionality in JavaScript? var csvArray = File.ReadLines(filePath).Select(x => x.Split(',')).ToArray(); I am a ...

javascriptnode.jslinqcsvelectron

Should you opt for returning [something] or (nothing) in Javascript with ExpressJS?

Is there a distinct contrast between returning something and returning nothing? Let's take a look at an example: user.save(function(err){ if ( err && err.code !== 11000 ) { console.log(err); console.log(err.code); res.send(&apo ...

javascriptnode.jsexpressmongoosereturn