How can I enlarge a picture in the middle of the screen using JQUERY?

Looking to achieve animation of an image and maintain it centered in the active window. I have attempted the code below, but it's not functioning properly. Any suggestions on how I can enhance the code for successful execution?

   // determine image dimensions
   var h = $(this).height();
   var w = $(this).width();

    // retrieve div dimensions
    var div_h =$('#imgContainer').height();
    var div_w =$('#imgContainer').width();

    var  pY = Math.round((div_h - h) / 2) + 'px';
    var  pX = Math.round((div_w - w) / 2) + 'px';

    $(this).animate({
        opacity:"1", 
        top: pY+"px",
        left: pX+"px",
        zoom: '500%'
    }, 'medium')
javascriptjqueryhtmlcss

Answer №1

To determine the ideal approach, consider your overall HTML structure. Here is how I successfully implemented your code:

(view the demonstration)

HTML:

<div id="imgContainer">
<img src="your-image.jpg">
</div>​

CSS:

html, body, #imgContainer {
    width:100%; height:100%;
}
#imgContainer > img {
    position:absolute; top:0; right:0; bottom:0; left:0;
    margin:auto;
    width:200px;
    max-width:100%;
    max-height:100%;
}

jQuery:

$('#imgContainer > img').on('click',function(){
   var h = $(this).height();
   var w = $(this).width();

    //retrieve div dimensions
    var div_h =$('#imgContainer').height();
    var div_w =$('#imgContainer').width();

    var  pY = Math.round((div_h - h) / 2) + 'px';
    var  pX = Math.round((div_w - w) / 2) + 'px';

    $(this).animate({
        opacity:"1", 
        zoom: '500%'
    }, 1000)

});

Answer №2

If you want to add a zoom effect to your images, you can try using the jQuery zoom plugin from jacklmoore.com. Here is an example of how you can use it:

// Example:
$(document).ready(function(){
    $('a.image').zoom({url: 'image-big.jpg'});
});

// Enhancing Zoom with ColorBox
$(document).ready(function(){
    $('a.image').zoom({
        url: 'image-big.jpg', 
        callback: function(){
            $(this).colorbox({href: this.src});
        }
    });
});

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

In Internet Explorer, the list items are overlapping, while functioning perfectly in all other web browsers

I've encountered a strange issue with my list item in Internet Explorer. Despite working perfectly in Chrome and other browsers, it fails to function properly in IE. I've built this application using the Vue framework and have faced various probl ...

javascripthtmlcssinternet-explorervue.js

Tips for circumventing CORS in an ajax request using various browser extensions or add-ons

I am encountering a cross-origin problem with my WCF service. Despite adding an extension in chrome to bypass CORS, the issue persists. Is there any other extension/add-on/plugin available to test the service locally and bypass the CORS problem? Edit Aft ...

javascriptasp.netajaxwcfcors

Is it possible to customize my selectbox by adding a logo to each item in the dropdown menu?

Looking to customize my select box with app logos next to the options. Any suggestions or tips would be greatly appreciated! ❤️ <select class="selectdiv2" id="selection2" name="platform" required> <option valu ...

htmlcss

Activate the HTML drop-down option upon selecting the radio button, or the other way around

I'm attempting to accomplish a task. Below is the code snippet I am working with: <form> <input type='radio' name='radio_flavour' checked/>Unique flavour<br/><input class='double-flavoured' type=&apo ...

javascriptjquery

Is there a way to align my icons at the center of the page with the text positioned below the icons?

Is there a way to perfectly align my icons in the center of the screen with the text positioned below them? I've already spent several hours attempting this using Flexbox, but haven't found a solution that works flawlessly yet. It would be ideal ...

htmlcsscenter

The table is too wide for its parent mat-nav-list, stretching to 100%

Here is the code snippet I am using to display a table inside a mat-nav-list: <mat-nav-list> <table> <tr>Node Information</tr> <tr> <td>Name</td> <td *ngIf="activeNod ...

htmlcssangularangular-material

Tips for updating the class name of a specific div element during runtime

I'm trying to dynamically update the class name for a specific div at runtime, and this div also includes support for image preview using JQuery. ...

javascriptjqueryasp.netasp.net-mvc

What steps should be taken to create a two-column table from a given list of items?

I am trying to display a list of words in two columns, one word after another from left to right. Here is the desired table structure: <table id="wordTable"> <tr> <td>ac </td> <td>bd </td> </tr> ...

javascripthtml

Monitor files in different directories with the help of pm2

Can pm2 detect changes in directories outside of the current one? For example, if I have an index.js file in /home/sprguillen/workspace/node that needs to be run by pm2, but my configuration file is located outside in /home/sprguillen/workspace/config. I ...

javascriptnode.jspm2

Verify if a <select> element exists inside the main div

Is there a way for me to check if a <select> element is present within the parent div and display certain content based on its existence? Appreciate any assistance! ...

javascriptjqueryhtml

Issue with Three.js: Geometry's BoundingBox is incorrect following a scaling operation

I am facing an issue with the bounding box of a cube in my scene. The cube is being manipulated by the user using THREE.TransformControls. After these interactions, I need to calculate the bounding box of the cube. var test = new THREE.Mesh(new THREE.Cube ...

javascriptthree.js

Creating a sleek Apple-inspired image fade-in effect with jQuery

As you visit , the products displayed on the page have a fading effect. I am curious to know if there is a jQuery plugin available that can create a similar fade-in effect. ...

jqueryfadein

Steps to turn off smooth animation by specifying a constant speed in the .animate function

I am currently using the .animate method, and I have a question regarding how to set a consistent speed of movement. The example provided shows that the speed changes throughout the animation (slower at the beginning and end), but I would like to set a c ...

jquery

What is the best method to update the content of one div with content from another page using AJAX?

Having trouble achieving smoother page loads? My goal is to utilize AJAX to specifically fetch a certain div from another page and then swap out the content of a div on this current page with the response. Below is my JavaScript script that uses AJAX to r ...

javascripthtmljqueryajax

ways to clear the float on the right side of an image

So I have two images that I am trying to float, like this: img{ float:left; clear:right; } <img src='http://img1.imgtn.bdimg.com/it/u=1005212286,2432746147&fm=21&gp=0.jpg' alt=''><br> <img src ...

htmlcss

Having Trouble with My PHP Contact Form Online

My website's PHP contact form, based on a bootstrap template, is not functioning properly. I am looking for guidance on how to create or obtain the necessary PHP/AJAX scripts to ensure the form works correctly. Any suggestions or feedback about my con ...

phphtmlajaxformscontacts

How can MongoDB be used to project only the specific items queried for in an array?

In my user documents, each user is associated with an array of objects. I am tasked with finding the user whose item array contains a specific item tag from a given array of tags. Once identified, I need to return the entire user object excluding the items ...

javascriptarraysnode.jsmongodbprojection

Displaying elements of an array object using Javascript

I am currently working on counting the frequency of elements in an array using a for loop with arrays of objects. The code prints the correct output. counts = {}; counter = 0; counter_array = [50,50,0,200]; //this example array is dynamically filled for ...

javascriptarrays

Retrieve the centered element's object within a slideshow

I need to showcase a specific object's field on a dynamically transmitted slider, with the object always positioned in the center of the slider. Currently, I am utilizing vue-awesome-slider and have the following code: <v-layout> <v-f ...

javascriptvue.jsvuejs2vue-componentvuetify.js

Ensure that the texture is loaded in a class before moving forward

Explaining my issue with a simple example, I find it easy to use await async in functions to ensure textures are loaded before moving on with the program. However, when working with classes for a cleaner program structure, I am unsure how to make the con ...

javascriptthree.js