Enhance image with Fancybox on mouse click

I need to display several images in the content area of a page, and when a user clicks on an image, it should enlarge using fancybox.

If an image is large, the user should be able to click on it to view an enlarged version in a fancy box.

Both the thumbnail and the larger version of the image must be the same.

I attempted to add inline styling to the image so that it displays at 200px in the content area and enlarges when clicked. However, this does not seem to be working as the image remains the same size in the fancy box.

<div class="wrapper">

  <p><img src="http://farm4.staticflickr.com/3864/14420515212_9999c800b4_b.jpg" style="float:right; padding:5px; width:200px;" class="zoom"></p>

Vivamus nisi neque, finibus quis ex et, lacinia aliquam ipsum. Nullam ut malesuada nulla, vel pulvinar arcu. Nulla accumsan dolor sed faucibus accumsan. Aliquam non nulla lectus. Sed</p>
</div>

http://codepen.io/anon/pen/ZQmrOb

javascriptjquerycssfancyboxfancybox-2

Answer №1

To implement fancybox on your images, all you need to do is include the special attribute data-fancybox-href within your img tag like this:

<img data-fancybox-href="http://farm7.staticflickr.com/6201/1234567890_abcd1234ef_c.jpg" src="http://farm7.staticflickr.com/6201/1234567890_abcd1234ef_c.jpg" style="float:left; padding:10px; width:250px;" class="lightbox" />

It's important to note that both the src and data-fancybox-href attributes point to the same image. However, data-fancybox-href allows fancybox to display the image without the constraints of the img tag.

See Demo on CodePen

Additionally, you can enhance the user experience by adding closeClick: true to your fancybox initialization script so that clicking the opened image will close the box.

$(".lightbox").fancybox({
    closeClick: true
});

Answer №2

Here is the latest version. It meets all your specifications.

New HTML

<a class="click-to-expand" href="http://farm4.staticflickr.com/3864/14420515212_9999c800b4_b.jpg">
    <img src="http://farm4.staticflickr.com/3864/14420515212_9999c800b4_b.jpg" style="" class="enlarge">
</a>

Live Demo Here

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

A guide to setting up checkbox input in Vue 3 so that it toggles between checked and unchecked states when an

I'm in the process of creating a div container that will contain both an image and a checkbox input element. The checkbox input has a click handler that passes a value to a function, as well as a :value binding which sends the value to an array named ...

javascriptvue.jscheckboxvuejs3v-model

Node scripts and node bins are causing errors in Vue.js when running npm

While attempting to run my Vue project with the command npm run serve I encountered an error message that read: [email protected] serve /home/numan/Desktop/vue-getting-started/07-accessing-data/begin/vue-heroes vue-cli-service serve sh: 1: vue- ...

javascriptnode.jsvue.jsnpmvuejs2

Error in table layout caused by asynchronous .get jQuery function

I am facing a challenge in populating a timetable with specific information for each cell from a database. The table is being dynamically refreshed using the following function: function refreshTable() { //Form values var park = $('#Park&apos ...

javascriptjqueryajaxasynchronous

Is there a way to access the data attribute value from one component in another component without relying on an event bus mechanism?

In the 'App.vue' component, there is a data attribute called 'auth' that indicates whether the user is logged in. If it is empty, the user is not logged in; if it contains 'loggedin', then the user is authenticated. Now, let& ...

javascriptnode.jsvue.js

Innovative JavaScript function

Seeking a solution for my JavaScript function that should only be executed when the browser screen width exceeds 1024px. if ($(window).width() > 1024) { An issue arises when a user initially loads the webpage on an 800px browser screen and then resize ...

javascriptjqueryhtml

Removing HTML DOM elements from a string using JavaScript: A step-by-step guide

Hey there, I'm currently working on my angular application. When it comes to inserting the first 100 characters of content into the "description" meta tag for Facebook sharing, I've run into an issue. The description ends up including the HTML el ...

javascripthtmlangularjsdommeta-tags

Toggle the visibility of a div based on the id found in JSON data

I am looking to implement a JavaScript snippet in my code that will show or hide a div based on the category ID returned by my JSON data. <div id="community-members-member-content-categories-container"> <div class="commun ...

javascripthtmlcss

what is the best way to showcase a nested ordered list with varying list-style-types using ckeditor 4?

Dealing with a legacy application that features CKEDITOR 4 integration has presented me with a challenge involving the display of a nested ordered list. The issue arose when a user added an ordered list using the bullet list plugin. I encourage you to tak ...

javascripthtmljquerycssckeditor

Using JavaScript code to dynamically display the value of the variable MyProperty in HTML

Are there any limitations when using this construction in JavaScript? In my codeBehind, there is a property with intricate logic in the get method. It calls other methods and despite debugging showing a good value, it returns an empty string. I'm curi ...

javascriptasp.net

Using react to load a base64 string texture in three.js

Currently, I am utilizing a server to generate base64 string representation of charts. These are then loaded into a React component by fetching data via POST request. The data successfully loads into the React state but the scene renders before the textu ...

javascriptreactjsthree.jsrender-to-texture

Using Jquery to add new HTML content and assign an ID to a variable

Here is some javascript code that I am having trouble with: var newAmount = parseInt(amount) var price = data[0]['Product']['pris']; var id = data[0]['Product']['id']; var dat ...

javascriptjqueryhtml

Can you explain the distinction between using call and apply?

Can you explain the distinction between utilizing Function.prototype.apply() and Function.prototype.call() to execute a function? const func = function() { alert("Hello world!"); }; func.apply() compared to func.call() Do performance dispar ...

javascriptfunctionperformance

Using an XMLHttpRequest to obtain a response from a servlet

Running a jetty server to respond to GET requests has been successful so far. When accessing the request through a browser using localhost:8080/sp or 127.0.0.1:8080/sp, the correct data is returned. public void doGet(HttpServletRequest request, HttpServle ...

javascriptajaxxmlhttprequestjetty

Continuing the process of uploading the file

In my development of a single page application that allows users to upload photos, I have encountered a dilemma. What happens if a user is uploading multiple photos and then closes the browser? When they log back in, I want the browser to automatically c ...

javascriptangularreactjsfile-upload

What is the best way to ensure that any words exceeding the line length automatically move to the next line?

My webpage width is currently set to 100vw and adjusts responsively as the viewport size changes. However, there seems to be a slight issue where certain words overflow without being pushed to the next line, causing a small horizontal scroll: https://i.s ...

htmlcssoverflowword-wrap

Evaluating text presence with Nightwatch and Selenium by checking for single quotes in an element

I need to verify if an element includes text with an apostrophe. I attempted: 'PROGRAMMA\'S' or "PROGRAMMA'S", such as .assert.containsText('element', 'PROGRAMMA\'S') However, neither method seems t ...

javascriptseleniumnightwatch.js

Is there a way to retrieve a comprehensive list of all anchors that contain the data-ng-click attribute

I am currently working on a web application built with asp.net and angularjs. My goal is to specifically retrieve all anchor tags that have the attribute data-ng-click assigned to them. Is there a way to achieve this? If so, how can it be done? I a ...

javascriptasp.netangularjs

Incorporating Isotope into AngularJS for Dynamic Filtering

I am attempting to utilize Angular to dynamically load div elements for use with isotope layouting. However, I am encountering an issue where I cannot use ng-repeat to generate the divs. When I manually create the div like this, everything works smoothly: ...

jqueryangularjsjquery-isotope

Troubleshooting: Bootstrap CSS Bottom Class Issue

I'd like the text to sit right on top of the background image, with the message fixed in place at the bottom of the container. I've tried setting 'bottom: 0;' but it doesn't seem to work. The layout needs to be responsive, so I can ...

csstwitter-bootstrapposition

AngularJS and Rails causing page to refresh when removing an image

I am a newcomer to AngularJS and encountering an issue with page reloading when removing images. If I delete images while maintaining the stack order, everything works fine. However, if I remove an image from in between others, the page reloads. Snippet o ...

jqueryruby-on-railsangularjs