Скрипт "Нажмите, чтобы увеличить" предлагаю в двух вариантах:
1) Написан на javascript. Плюсы - не использует свойство стилей "display: none;",
работает без перезагрузки страницы и одного скрипта хватит для всех картинок на сайте.
Минус - пользователи иногда отключают выполнения javascript.
Состоит из ссылки и самого javascript из двух функций, одна создает блок для полного
изображения, а вторая его удаляет.
Вот изображения в ссылке :
// HTML
<a href="#" onclick=" var imgname; bigimg('bigimg.png');">
<img width="265px" alt="Нажмите, чтобы увеличить" title="Нажмите, чтобы увеличить"
src="/images/bigimg.png"></a>
Перед использованием выпрямите строку от переменной "imggross" и не забудьте одному из
верхних тегов контента присвоить индекс - id="imgbig". Подключить скрипт можно любым
способом. Показ работы на этой странице.
Вот сам javascript код:
// 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) Написан на PHP. Плюсы - не использует свойство стилей "display: none;",
работать может один скрипт для всех картинок на сайте.
Минус - работает с каждым действием перезагружает заново страницу.
Для вызова показа полного изображения миниатюру вставим в ссылку с параметрами:
имя полного изображения и код данной страницы, так как я один скрипт использую на
несколько страниц.
Показ работы скрипта на странице Php скрипт Zip распаковщик
Вот изображения в ссылке :
// HTML
<a href="?grosfoto=bigimg&tit=grossimg">
<img width="265px" alt="Нажмите, чтобы увеличить" title="Нажмите, чтобы увеличить"
src="/images/bigimg.png"></a>
Вот сам PHP код:
<?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 '<!-- Увы! -->';
}
}
? >
Чтобы не пришлось для каждой картинки делать миниатюру и потом закачивать
на сайт оба изображения: полную и миниатюру.
Можно уменьшить полную картинку под размер для статьи с помощью HTML , с
атрибутом - "width" или "height" , одним из них, иначе будет искажения картинки.
Каким именно - тем атрибутом, от которого требуется более точный размер.
Но для тяжелых изображений, которые весят более 1 Mb, лучше закачать оба
варианта, чтобы не тормозить загрузку страницы тяжелым полным вариантом.
Скрипт бесплатный и устанавливать можете на любое количество ваших сайтов,
но распространять можно только с присутствием ссылки на этот сайт,
с места распространения. Удачи! Алексей.
Вы наверняка хотите узнать почему я скрипты в основном предлагаю скачать, кстати
с моего хранилище (никаких посмотрите рекламу, и.т.д.), да потому что они готовы к
практическому применению. От начала какой-то формы, до конечного результата.
Внешний вид и цвета всегда можно изменить. Главное что-бы скрипт работал и был
защищен от взлома.
А в интернете зачастую копируют один у одного, у него другой и.т.д. Даже с ошибками
в коде, распространяют с этими ошибками. Конечно проще скопировал и преподнес как
свое, с чужими ошибками.
А люди которые сами пишут статьи и коды, они знают сколько трудов и времени на
это надо.
Скрипт слайдера | Zip распаковщик | Скрипт счетчик | Скрипт Обр. связи | Нажмите, чтобы увеличить
Ротатор рекламных материалов AVL | Сколько сейчас на сайте | Онлайн (online) подсветка программного кода
Скрипт для подсветки программного кода | Форма для загрузки нескольких изображений
Два примера кода формы для загрузки нескольких изображений | Php обработчик загрузки нескольких изображений на сервер
Ваш комментарий или вопрос
Если нашу ссылку вставите себе на сайт по адресу написанному вами в
комментарии, то ваш адрес тоже станет ссылкой!