Displaying identical images with a touch of elegance: Fancybox duplic

I'm encountering a problem with the functionality of Fancybox on my website.

In my layout, I have nine different divs, each containing unique images. However, when I attempt to click on any image, it consistently displays the same image. For example, clicking on the second image results in the first image being shown, which is the case for all other divs as well.

<a id="single_3" href="Foto's/symposium1_groot.png" title="Test">
<div id="symposium1"> <img src="Foto's/symposium1.jpg" alt="" /></div></a>

<a id="single_3" href="Foto's/symposium2_groot.png" title="Test">
<div id="symposium2"> <img src="Foto's/symposium2.jpg" alt="" /></div></a>
javascripthtmlcssfancybox

Answer №1

To ensure uniqueness, it is important to make the ids unique. Additionally, having two closing </a> tags for the first block may not be beneficial.

Consider the following revision:

<a id="single_3" href="Photos/symposium1_large.png" title="Test">
    <div id="symposium1"> <img src="Photos/symposium1.jpg" alt="" /></div>
</a>

<a id="single_4" href="Photos/symposium2_large.png" title="Test">
    <div id="symposium2"> <img src="Photos/symposium2.jpg" alt="" /></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

Reach the bottom of the page using window.scrollBy

My goal is to create a page that smoothly scrolls continuously, where once it reaches the bottom, it goes back to the top and repeats the scrolling cycle. Currently, I have set up the basic structure of the page. $(document).ready(function() { var scr ...

javascriptjqueryhtmlcss

Is there a way to verify if a user taps outside a component in react-native?

I have implemented a custom select feature, but I am facing an issue with closing it when clicking outside the select or options. The "button" is essentially a TouchableOpacity, and upon clicking on it, the list of options appears. Currently, I can only cl ...

javascriptreactjstypescriptreact-native

Filtering an array of objects by their attributes

How can I efficiently filter an array of objects by a specific value that could be located in any property? Consider the following object: var x = [ { name: "one", swp: "two" }, { name: "two", swp: "three" ...

javascriptarraysobject

Retrieve the request body within the validation function of express-validator version 4

Recently, I began using express.js along with express-validator to validate input data. However, I have encountered a problem when trying to access the request body in the new check API introduced in version 4.0.0. In previous versions, it was simple to a ...

javascriptnode.jsexpressexpress-validator

Ways to eliminate submenu tooltips

Whenever I hover over a menu item with submenu pages in the wordpress backend, a "tooltip" pops up showing each submenu page. How can I remove these tooltips? I have attempted to remove the wp-has-submenu style class, which somewhat works. The tooltip no ...

javascriptjquerywordpress

Arrange the image in a way that flows smoothly with the text

I want to achieve the effect of having a picture of a Pen positioned behind the text "Create" on the left side. It looks good at full size, but the positioning gets messed up when the screen size is adjusted. How can I make it responsive so that the image ...

csshtmltwitter-bootstrap

Hunt down the key within the specified array of objects and then proceed to update the value

Exploring the implementation of multiple sorting functionality; the array that holds the field name and sorting order needs to be toggled. Example Click Sort By Name: [{"sortKey":"name","sortValue":"desc"}] Click Sort By Age: [{"sortKey":"name","sortV ...

javascriptjqueryangularjsunderscore.jsarrays

JavaScript used for making an AJAX request

Currently, I am attempting to master the art of making an AJAX call using plain JavaScript with the goal of stepping away from JQuery for a specific project. However, I seem to be encountering a roadblock when it comes to xmlhttp.onreadystatechange. If a ...

javascriptajaxxmlhttprequest

Discovering network devices using Node.js

Can anyone help me figure out how to get a list of devices that are currently connected to the local area network? I'm specifically trying to see if my printer is connected. Any assistance would be greatly appreciated! Thanks. ...

javascriptnode.js

Using regular expressions, you can eliminate a specific segment of a string and substitute

Provide a string in the following format: lastname/firstname/_/country/postalCode/_/regionId/city/addressFirst/addressSecond/_/phone I am creating a function that will extract the specified address parts and remove any extra parts while maintaining maxim ...

javascriptregextypescript

Is it possible for the `drop-shadow` shadow to be applied only to certain elements?

In the top image below, you can see how the drop-shadow effect would be drawn if applied to the top element. I am exploring the possibility of having the shadow cast only on specific objects, as shown in the bottom image. I am open to unconventional solut ...

cssdropshadowcss-filters

Issues with Laravel 8's datatable scripts causing dysfunction

In my practice with the AdminBSB template, I am facing an issue where the Jquery datatable plugin JS is not functioning properly in my blade template. I aim to achieve a datatable layout similar to this example: https://i.sstatic.net/krfPl.jpg However, t ...

javascriptphpcsslaravellaravel-blade

JQuery, Draggable delete

I created a shopping cart with drag-and-drop functionality for nodes. http://jsfiddle.net/dkonline/Tw46Y/ Currently, once an item is dropped into the bucket (slot), it cannot be removed. I'm looking to add that feature where items can be removed from ...

javascriptjqueryhtmljquery-ui

Material-UI web application experiencing crashes due to worn-out cards, resulting in element type being declared as invalid and raising an error

After reviewing numerous similar SO questions, it appears that the issue always comes down to problems with imports. Typically, these involve mistyped import destinations or missing braces, but I have double-checked and found no such issues in my code. ht ...

javascriptnode.jsreactjsmaterial-ui

What are the steps for rearranging a table column?

I am trying to show a text file in a table and allocate some code to each entry. I can display the text file. I can assign the code for each record (though this part is still under development). However, I have encountered an issue. The columns of the t ...

phphtmlcsshtml-table

Using jQuery to dynamically adjust the font size

While inspecting the main jquery.js file, I came across a reference to "fontSize". However, on one of my pages, I'm experiencing an issue where the font size is not changing despite trying different values in the CSS. Could it be that the jQuery.js fi ...

jquerycss

I am consistently encountering the error message "Invalid hook call."

While attempting to create a navbar using react.js, I encountered the following error: Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This issue may arise due to: Mismatching versions of React and the rend ...

javascriptreactjs

Using AngularJS to Create Dynamic Radio buttons through ng-repeat

I have a group of radio buttons that are generated using an ng-repeat directive, following the guidance provided in this helpful answer. However, I am struggling to understand how to integrate an ng-model into this setup. <tr ng-repeat="service in s ...

javascriptangularjsangularjs-ng-repeatangularjs-ng-model

Retrieving Changed Data from a Table Row in ReactJS

In my development project, I have a primary Table component responsible for keeping track of the table's state. Supporting this main component is a separate "dumb" component that receives props from the main one and uses them to display the table row ...

javascriptreactjs

Execute a function within a main module from a sub-module in Node.js

If I have a file named parent.js with the given source code: var child = require('./child') var parent = { f: function() { console.log('This is f() in parent.'); } }; module.exports = parent; child.target(); and ano ...

javascriptnode.js