ПолезностиКак сделать, чтобы картинки в статьях увеличивались по клику

Главные вкладки

лайтбокс

В ворд прессе есть замечательный плагин - auto-highslide, с помощью которого можно не размещать в статье рисунок в полную величину, а только его превью. Но пользователь, кликнув на превьюшке, увеличивает ее до удобочитаемого размера. Два нижеуказанных способа позволят сделать нечто подобное и в Instantcms.

Но наша свалка не была бы свалкой, если бы эти способы не имели недостатков .

Минус первого способа в том, что если вы на своем сайте размещаете кнопки или баннеры на другие ресурсы, то они перестанут работать обычным способом. По клику на эти ссылки пользователь будет переходить не на другой сайт, а просто увеличит баннер))) Вранье - на своих сайтах проверял и баннеры ведут себя как положено и ссылки работают нормально!!!!

Минус второго способа - при размещении рисунка необходимо будет вставлять ссылку на оригинал вручную, что мало кому из пользователей понравится.

Кого не испугали эти нюансы, начнем.

Как сделать, чтобы рисунки увеличивались по клику на них.

СПОСОБ ПЕРВЫЙ.

1.В файле /components/content/frontend.php после
 
Код PHP:
 
$article_content = $cfg['readdesc'] ? $article['description'].$article['content'] : $article['content'];
добавляем
 
Код PHP:
 
$pattern = "/<img(.*?)src=('|\")([^>]*).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>/i";
$replacement = '<a href=$2$3.$4$5 class="highslide-image" onclick="return hs.expand(this);"><img$1src=$2$3.$4$5 $6</a>';
$article_content = preg_replace($pattern, $replacement, $article_content);
2. В файле template.php вашей темы оформления в head добавляем
 
Код PHP:
 
<link rel="stylesheet" href="/highslide/highslide.css" type="text/css" />
<script type="text/javascript" rel="lightbox" src="/highslide/highslide-with-html.packed.js"></script>
<script type="text/javascript">
hs.graphicsDir = "/highslide/graphics/";
hs.outlineType = "rounded-white";
hs.outlineWhileAnimating = true;
hs.showCredits = false;
</script>

3. Скачиваем файл highslide.zip (внизу этого материала). Распакованный архив ложим в корень своего сайта.
Можно разместить и не в корневой директории сайта, но тогда придется изменить пути к файлам в пункте 2.

Готово. Теперь, загружая рисунок в статью, вы просто задаете уменьшенные размеры рисунка, а при просмотре по клику они будут увеличиваться до полного размера.

N.B. Небольшая поправка для тех, у кого версия сайта 1.10.1 
вместо строки

Код PHP:

$article_content = preg_replace($pattern, $replacement, $article_content);
нужно писать

Код PHP:

$article['content'] = preg_replace($pattern, $replacement, $article['content']);

 

СПОСОБ ВТОРОЙ.

1. В файле /components/content/frontend.php после

Код PHP:
 
$article_content = $cfg['readdesc'] ? $article['description'].$article['content'] : $article['content'];
добавляем
 
Код PHP:
 
$pattern = "/<a(.*?)href=('|\")([^>]*).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>(.*?)<\/a>/i";
$replacement = '<a$1href=$2$3.$4$5 class="highslide-image" onclick="return hs.expand(this);"$6>$7</a>';
$article_content = preg_replace($pattern, $replacement, $article_content);
2. В файле template.php используемой темы оформления в head добавляем
 
Код PHP:
 
<link rel="stylesheet" href="/highslide/highslide.css" type="text/css" />
<script type="text/javascript" rel="lightbox" src="/highslide/highslide-with-html.packed.js"></script>
<script type="text/javascript">
hs.graphicsDir = "/highslide/graphics/";
hs.outlineType = "rounded-white";
hs.outlineWhileAnimating = true;
hs.showCredits = false;
</script>

3. Скачиваем файл highslide.zip (внизу этого материала). Распакованный архив ложим в корень своего сайта.
Можно разместить и не в корневой директории сайта, но тогда придется изменить пути к файлам в пункте 2.

Готово. Теперь, вставляя большой рисунок в статью, указываете ее уменьшенные размеры и тут же ссылку на оригинал (не забудьте, иначе ничего не будет).

 

Скачать: 
Категория: 
Хаки для Instantscms
лайтбокс