The script "Click to enlarge" is offered in two versions:
1) Written in javascript . Pros - does not use the "display: none;" style property,
it works without reloading the page and one script is enough for all the images on the site.
Negative-users sometimes disable javascript execution.
Consists of a link and the javascript itself of two functions, one creates a block for the full
images, and the second one deletes it.
Here are the images in the link :
// HTML
<a href="#" onclick=" var imgname; bigimg('bigimg.png');">
<img width="265px" alt="Нажмите, чтобы увеличить" title="Нажмите, чтобы увеличить"
src="/images/bigimg.png"></a>
Before using, straighten the string from the "imggross" variable and don't forget to use one of the
assign an index to the top content tags - id= "imgbig". You can connect the script with any
method. Showing work on this page.
Here is the javascript code itself:
// javascript
function bigimg(imgname) {
var imggross = '<div id="skrinbig" style=" display: block; position: absolute;
top: 100px; left: 200px; width: 1200px; height:auto; background: rgba(0, 0, 0, .8);
z-index: 100; border:1px solid #0002ff; -moz-border-radius: 7px; -khtml-border-radius: 7px;
-webkit-border-radius: 7px; border-radius: 7px; list-style-type: none;">
<p style=" display:block; position: relative; left: -10px;" align="right">
<a href="#" onclick=" bigclose();">
<img alt="закрыть" title="закрыть" src="/images/cross.png">
</a></p><p align="center" id="skrinimg">
<img alt="скриншот" title="скриншот" src="/images/' + imgname + '"></p></div>';
document.getElementById("imgbig").innerHTML+=imggross;
}
function bigclose() {
var imgclos = "";
document.getElementById("skrinbig").outerHTML= imgclos;
}
2) written in PHP. Pros - does not use the "display: none;" style property,
one script can work for all images on the site.
Minus-works with every action reloads the page again.
To display the full image, insert the thumbnail in the link with the parameters:
the name of the full image and the code of this page, since I use one script on
multiple pages.
Showing the script on the page Zip unpacker
Here is the image in the link :
// HTML
<a href="?grosfoto=bigimg&tit=grossimg">
<img width="265px" alt="Нажмите, чтобы увеличить" title="Нажмите, чтобы увеличить"
src="/images/bigimg.png"></a>
Here is the PHP code:
<?php // php
if ($_GET['grosfoto']) {
$grosfoto = htmlspecialchars($_GET['grosfoto']);
$grosfoto = preg_replace("/[^a-zA-Z0-9_]/", "", $grosfoto);
if (file_exists($_SERVER['DOCUMENT_ROOT'] . '/images/' . $grosfoto . '.png')) {
echo '<div id="skrinshot" style=" display: block; position: absolute; top: 100px; left: 200px;
width: 1200px; height:auto; background: rgba(0, 0, 0, .8); z-index: 100;
border:1px solid #0002ff; -moz-border-radius: 7px; -khtml-border-radius: 7px;
-webkit-border-radius: 7px; border-radius: 7px;">
<p style=" display:block; position: relative; left: -10px;" align="right">
<a href="?tit=grossing" ><img alt="закрыть" title="закрыть" src="/images/cross.png"></a></p>
<p align="center" id="skrinimg"> <img alt="скриншот" title="скриншот" src="/images/' . $grosfoto . '.png">
</p></div>';
}
else {
echo '<!-- Увы! -->';
}
}
? >
So that you don't have to make a thumbnail for each image and then upload it
both images are sent to the site: the full image and the thumbnail image.
You can reduce the full image to the size of the article using HTML, with
the attribute is "width" or "height" , one of them, otherwise the image will be distorted.
Which attribute is the one that requires a more accurate size.
But for heavy images that weigh more than 1 Mb, it is better to upload both
to avoid slowing down page loading with a heavy full version.
The script is free and can be installed on any number of your sites,
but you can only distribute it with a link to this site,
from the distribution site. good Luck! Alexey.
You probably want to know why I mainly offer scripts < strong>download , by the way
with my storage (no look ads, etc.), Yes because they are ready for
practical application. From the beginning of a form to the end result.
The appearance and colors can always be changed. The main thing is that the script would work and be
protected from hacking.
And on the Internet often copy one from one, he has another, etc. Even with errors
in the code, distribute with these errors. Of course easier copied and presented as
your own, with other people's mistakes.
And people who write articles and codes themselves, they know how much work and time is spent on
this is necessary.
The slider script | Zip unpacker | The script hit counter | Feedback script | Click to enlarge
AVL advertising materials rotator | How much is currently on the site. | Online program code highlighting
The script for the highlighting of program code | Form for uploading multiple images
Two examples of form code for uploading multiple images | Php handler for uploading multiple images to the server
Your comment or question
If you insert our link to your site at the address you wrote in the
comments, then your address will also become a link!