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

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

лайтбокс

В ворд прессе есть замечательный плагин - 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
лайтбокс

Похожие статьи

Сборка городского портала на InstantCMS V2.7.2

Шаблон ночного клуба Violette для InstantCMS 1.10.4

Шаблон "Город онлайн" для instantcms 10.1-10.3

Как сделать, чтобы при регистрации уже стоял город по-умолчанию.

Компонент "Гараж" для instantcms

Плагины "Похожие статьи с картинками и анонсами" и "Похожие записи в блогах с картинками" для instantsmc 10.3 и выше

Вторая ветка instant cms более коммерческая для ее создателей, чем первая?

Модуль "Праздники" (на 2015 год) для instantcms