"Enhance an image's focus by centering and zooming in on it with the click

I created a custom jQuery function to implement image zoom functionality. The code starts by hiding all images and ends by zooming the current image. In between, there is logic written to display the image in the center of the screen. However, the code is not working as expected. Can anyone offer assistance? 

     $("img").animate({opacity: "0.001", left: '0px'})

     var imgPosX = ( $(window).width() - $("this").width() )/2; 
     var imgPosY = ( $(window).height() - $("this").height() )/2; 

     $(this).css({"top": imgPosY+"px", "left": imgPosX+"px"}); 
     $(this).animate({opacity:"1", zoom: '150%'}, 'medium');},
jqueryhtmlcss

Answer №1

Get rid of the "s that are around this:

 var imgPosX = ( $(window).width() - $(this).width() )/2;
 var imgPosY = ( $(window).height() - $(this).height() )/2;

The this is a reserved word in JavaScript, not a string.

Answer №2

My recommendation would be to consider utilizing a jQuery plugin as they offer a wide range of features and are easily accessible. Check out this demo for a potential option. One benefit is the ability to incorporate thumbnails and load full-size images on hover, which prevents the need to download all large images simultaneously.

Answer №3

Consider using margin-left and margin-right instead of adjusting top and left properties.

Answer №4

check out this functional DEMO

$(function(){

    $("img").css({opacity: "0.001", left: '0px'});

    objthis= $("img").eq(0);
     var imgPosX = ( $(window).width() - objthis.width() )/2; 
     var imgPosY = ( $(window).height() - objthis.height() )/2; 

     objthis.css({"position":"relative","top": imgPosY+"px", "left": imgPosX+"px"}); 
     objthis.animate({opacity:"1", zoom: '150%'}, 'medium'); 
});

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

Reassigning Click Functionality in AJAX After Initial Use

Encountering an issue with a click event on an AJAX call. The AJAX calls are nested due to the click event occurring on a div that is not present until the first AJAX call is made. Essentially, I am fetching user comments from a database, and then there ar ...

phpjavascriptjquerymysqlajax

Is there a way to turn off step navigation in bootstrap?

Displayed below is a visual representation of the bootstrap step navigation component. Presently, there is an unseen 'next' button located at the bottom of the page. When this 'next' button is pressed, it transitions from 'step-1 ...

javascriptjqueryhtmlcsstwitter-bootstrap

Utilizing Django's jQuery Ajax form functionality to either download a file or display the incorrect form

Is there a way to make a Django-created form jQuery/Ajax-submitted and download a file upon successful submission, while returning the Django form if it's invalid? I experimented with modifying the Django form for jQuery/Ajax functionality like this: ...

ajaxdjangojquerydjango-forms

Learn the method for showing and hiding a div element in AngularJS

There is a loader on my screen that stays visible until the page finishes loading or encounters an error. Within a div, I have the loader... <div id:loader class="loading"> ...and I want to toggle its visibility based on the page loading status. ...

c#htmlangularjsmodel-view-controller

There appears to be an incorrect or invalid referrer in the request header

I manage two UI applications (one using Node.js and the other utilizing EJS server-side rendering). Let's consider www.example.com and www.abc.com My process involves redirecting users from Application A to Application B using a simple button with a ...

htmlnode.jsexpressbrowserhttp-referer

The process of organizing and arranging the content that appears on a webpage is in

Seeking a solution to achieve a similar effect like this example. Wanting the sections to transition nicely when clicked on. Should I use a Jquery plugin or implement it with CSS? ...

javascriptjqueryhtmlcss

Expanding the height of Bootstrap 4 cards

I'm having an issue with Bootstrap 4's card columns where the height of the shorter card ends up stretching to match the one beside it. This only occurs when I add the 'row' class to the parent div. If I remove the 'row' class ...

htmlcsstwitter-bootstrapbootstrap-4bootstrap-cards

Looking to display an alert message upon scrolling down a specific division element in HTML

In the midst of the body tag, I have a div element. <div id="place"> </div> I'm trying to achieve a scenario where upon scrolling down and encountering the div with the ID "place", an alert is displayed. My current approach involves che ...

javascriptjquery

Struggling with pinpointing the specific element

I'm struggling to select an element within a nested <ul>. In this code snippet, my goal is to pinpoint the <a> tag that follows the parent <li> <ul class="wc-block-product-categories-list wc-block-product-categories-list--dept ...

css

Issue with Google Adsense - adsbygoogle.push() error: Pages can only support one AdSense head tag. The additional tag will be disregarded

After adding my script tag to the navbar component, I encountered an error on my site during the next js build: Google Adsense error -adsbygoogle.push() error: Only one AdSense head tag supported per page. The second tag is ignored <Head> ...

javascripthtmlnext.js

What causes the vertical scroll bar to shift on its own?

I'm puzzled by the behavior of the vertical scroll bar when clicking on "Line 9" - it automatically moves to the top position and subsequent clicks don't affect it. Can someone shed light on why this happens and how to resolve it? I am using Fire ...

javascriptjqueryhtmlcssfirefox3.6

Creating specific CSS classes for individual slides in a basic slider framework

So, I have a rather simple slider that is created using only CSS. Each slide has unique labels for navigation buttons. The main question here is: how can I dynamically add or remove classes to specific items on the slide only when that particular slide is ...

javascriptjqueryhtmlcss

Extract the raw text content from nested elements

Working with highlight.js to include a custom CSS code, however, this library automatically adds span tags around the desired text For example: <pre> <code class="language-css hljs" contenteditable="true" id="css-code&quo ...

javascripthtmlcss

Aligning the content in the center of a div with inline display

Hi there, I have a quick question for the experts out there. I'm new to all of this so please bear with me :) I'm attempting to center an inline social sharing div on my website, but it's proving to be quite challenging. The div is nested w ...

javascriptjqueryhtmlcss

The absence of a label or div element on a JavaScript checkbox change event is causing issues

Currently, I am constructing a webpage utilizing ASP.NET web forms in combination with JavaScript and jQuery. The main objective is to create a functionality for a checkbox that reacts to a change event as follows: when the checkbox is checked, display thr ...

javascriptjqueryasp.net

The result of calling addEventListener is undefined

My issue lies with the addEventListener function, as it is not working correctly. I've created a function that requires an event listener to track scrolling and then execute a callback function. window.addEventListener("scroll", checkPosition); Unf ...

javascripthtmldom

Transfer an HTML file object between two <input type="file"> elements

I am looking to integrate a multi-file uploader into a form that allows users to prioritize the files they upload using draggable and sortable jQuery tools. One way I have added a multi-file input is: <input type = "file" multiple> When I select m ...

javascriptjqueryhtml

Stopping a velocity.js animation once it has completed: is it possible?

For the pulsating effect I'm creating using velocity.js as a fallback for IE9, refer to box2 for CSS animation. If the mouse leaves the box before the animation is complete (wait until pulse expands and then move out), the pulsating element remains vi ...

javascriptjquerycssanimationvelocity.js

Troubleshooting issues with JavaScript events in order to effectively implement popovers

I am facing an issue on a webpage that contains a significant amount of JavaScript. The Twitter bootstrap's popover widget is not functioning as expected. Specifically, when I hover over the icon that should trigger the "popover," nothing happens. I h ...

javascriptjquerytwitter-bootstrap

Directing a webpage to a particular moment within that page

Is it possible to automatically redirect users to a new page at a specific time? I would like visitors to be redirected to a new site starting from 12:00AM on December 31st, without allowing them to access the current site after that time. Is there a way ...

javascriptphpjqueryhtml