Image enlargement script. Script for enlarging an image when clicked

In this article we will talk about how to make a modal window with a larger image.

Sometimes it becomes necessary to enlarge an image when you click on it in a pop-up window. As a result, we get an enlarged picture with a darkened background.

This is very easy to do using the jQuery library. We will need three files - index.html, a styles file in the css folder called template.css, and a script file popup_img.js. And three more images in the images folder

First, let's write the HTML markup of the page, don't forget to include the styles file and the jQuery library:

Page

We also add our images to the page. For each image we add the image class, with which we will access images in the script in the future.

The next step is to write a script that will add a darkened background and a larger image.

$(document).ready(function() ( // Wait for the page to load $(".image").click(function())( // Click event on a small image var img = $(this); // Get the image, which was clicked var src = img.attr("src"); // Get the path to the image from this image $("body").append(""+ //Add pop-up window markup to the body of the document ""+ // The block that will serve as a darkened background" "+ // The enlarged photo itself ""); $(".popup").fadeIn(800); // Slowly display the image $(".popup_bg").click(function())( // Click event on a darkened background $(".popup").fadeOut(800); // Slowly remove the popup window setTimeout(function() ( // Set the timer $(".popup").remove(); // Remove the popup window markings ), 800 ));

The comments describe everything here. The next step is to add styles, for which I will not describe comments, it is assumed that you know CSS well.

body ( margin:0; ) .image ( margin:30px; float:left; cursor:pointer; max-height:100px; ) .popup ( position: absolute; height:100%; width:100%; top:0; left:0; display:none; text-align:center; .popup_bg ( background:rgba(0,0,0,0.4); position:absolute; z-index:1; height:100%; width:100% ; ) .popup_img ( position: relative; margin:0 auto; z-index:2; max-height:94%; max-width:94%; margin:1% 0 0 0; )

See the result of the work on the demo page.

Images on websites are found quite often, and at the same time they can be large sizes, but website designs do not always allow it to be posted in full format. Therefore, we need to come up with a way that would allow us to increase them.

Let's start with primitive methods and end with the most the best way enlarging the image.

image-or-smaller-copy-address "/>

Explanation for example:

• - so that the link does not transfer weight to the image;
• target="_blank" - the image will open in a new tab.

The last parameter is quite important, since often due to the user’s inexperience the following situation may arise: having opened a page with a picture, he does not know how to get back and therefore simply closes the tab, which means he leaves the site completely. By specifying the last parameter, we protect him from such a case, because he will still have the initial page open.

Example of work:

Despite the ease of use, this method is far from the best, since to enlarge the image you have to open new page, but this method allows you to view images of any size. So we conclude: if you need to enlarge very large images, then this is the only sure way to do it.

The name of the method clearly reflects its essence: when you hover the mouse cursor over the image, it is automatically zoomed. The implementation of the method is elementary, but again I don’t like this method because it is impossible to simply move the cursor through the image. After all, it will always increase - this can begin to annoy the user.

The following code implements the ability to automatically zoom on hover:

Explanations for example:

• img.zoom (max-width: 150px ) - sets the width of the image before zooming;
• img.zoom:hover (max-width: none ) - sets the width of the image after zooming (the none parameter means that there is no limit on the maximum size);

This is the most common and convenient method of enlarging images. Moreover, there are many methods and implementation options. Let's look at a few of the most popular options:

After clicking on the image, it enlarges, but because of this the text moves down, so this method is far from the best. Here's a code example:

How it looks on the page:

Below is the code to implement this method

large_image "/>

small_image " id ="imagenM1 " />

How it looks on the page:

Options 3.1 and 3.2 are completely based on CSS capabilities, which means they are “light” methods, because do not load the page with unnecessary scripts. There are other options that are also based on CSS, however, they are more exotic. I won't cover them in this article because some browsers don't support such things.

This method is the most beautiful and convenient in my opinion. To connect it, you will have to tinker a little with adding various scripts, so to implement it, let’s consider a step-by-step installation:

The archive will contain one folder containing the image, two .js and one .css files.

2) Add these files to your site as they are in the archive (i.e. the imgs folder should be in the directory where the .js and .css files will be).

3) On each page of the site where image enlargement will be used, you need to connect the simplebox method and style:

Note
Instead of the address of a smaller copy of the image, you can enter the address of the main image, but at the same time apply the width attribute, in which you specify a small width (read more about).

Hello dear beginner optimizers.

In WordPress, by default, when you click on an image, the user is taken to the image page. Agree - it is very inconvenient when you are suddenly transferred to another page.

In order for the image to enlarge directly on the page on which it is located, you need to install a special script on the site.

You can see how it works in the picture above or in the pictures in the sidebar.

Finding it on the Internet is not a problem, but unfortunately all offers have one flaw. The script code, when checked in the validator, produces an error.

I had to strain a little and correct this situation, so what follows will be a script that works perfectly on all templates and is valid.

The method of installing it is accessible even to those who know nothing about scripts and programming languages ​​in general.

At the same time, with excellent results, it allows you to do without a plugin, and requires mandatory filling of the alt tag with the appropriate text, and this will have a very good effect on site optimization.

It's no secret that plugins slow down loading speed, since many of them place their scripts in the head block.

And filling out the alt tag is often simply too much time. Right there, whether you like it or not, you will have to enter the appropriate text, as it will appear as a signature under the enlarged picture.

You can simply set numbering by page if there are a lot of images.

Another feature is that the script does not enlarge everything, but only those images that you point to.

Comfortable? Comfortable. After all, if a picture in its original size fits perfectly on the page, then why enlarge it.

Let's move on to installation.

You can get the zip with the script completely free of charge by simply downloading it from my Yandex Disk. Download

After that, you need to upload it to the root of the site. The core folder is the folder that contains wp-admin, wp-content, and so on.

We download the zip via FTP, unpack it, after which three files and one folder appear in the directory.

The zip folder needs to be deleted. Also, now you need to remove, if there was, a plugin that enlarges images.

The next action needs to be done in the footer.php file. You can go through wp-content - themes - Your theme - footer.php without leaving the server.

Or you can go to the site console, then Appearance - Editor - footer.php, or Footer. And so and so is possible.

In this file, at the very end, before the tag, you need to insert the following code:

(function())(
var boxes=,els,i,l;
if(document.querySelectorAll)(
els=document.querySelectorAll("a");
Box..css");
Box..js",function())(
simplebox.init();
for(i=0,l=els.length;iImage parameters" and in paragraph " Link" choose " Media file" .

Of course, there are many ways to enlarge images. And mainly the use of scripts and plugins is used. In my opinion, such methods are justified in the case of resources with a huge number of photographs or any pictures. My blog is not like that. And, as usual, I follow the path of least expenditure of time, knowledge and resources on my site.

I offer you a way to enlarge images on a website without using any scripts, but exclusively using html.

This method of enlarging an image on a website will allow the reader to quickly see the picture, because your website will not need to additionally load scripts.

Very simple, well the simplest way, honestly. You need to add the following code to the image properties:

Onmouseover="this.style.width="Large image width px"" onmouseout="this.style.width="Small image width px""

When you hover the mouse cursor, the image enlarges.
I hope you understand that all this is done in a text editor.

The method is similar, you just need to replace onmouseover with onclick. The following code is added to the image properties:

Style="width: "width value of the small image px; border:2px solid black;" onclick="this.style.width=large image width px"" onmouseout="this.style.width="small image width px""

It will completely look like this

Here is the result and code for the pussy picture.
When you click the mouse, the image is enlarged to the size of the original image or the size you specify. To reduce the size, that is, return the picture to its original size, just click anywhere on the page.

I hope you didn’t find it difficult to use such methods - using html - to enlarge images on the site.

In general, I believe that many webmasters do not limit themselves to simply using any engine and use html codes on their sites.

Read also:

Of course, there are many ways to enlarge images. And mainly the use of scripts and plugins is used. In my opinion, such methods are justified in the case of resources with a huge number of photographs or any pictures. My blog is not like that. And, as usual, I follow the path of least expenditure of time, knowledge and resources on my site. I offer you a way to increase...

How to make a text shadow in 5 minutes

Hello, dear reader of my blog. In this article you will learn how to create a text shadow using css styles and html code in 5 minutes.

How to make up down buttons for a website

This article is written as a continuation of the article on how to make a back to top button for a website.

How to remove an entry from home page using code

Hello, dear reader of my blog. I needed to hide some articles from the main page. Not to remove it from access for readers altogether, but to remove...

Removing category entries from the main page and RSS

We continue to improve functionality and appearance site. We remove unnecessary posts from the main page and RSS.

Breadcrumbs on a WordPress site