Найти на сайте

Увеличение картинок по клику

+34
4.67K
  2. Блоги
  3. Увеличение картинок по клику
При переходе с WordPress на Instant я лишился одного замечательного плагина для увеличения картинок по клику без перезагрузки страницы — auto-highslide. Решил реализовать эту полезность для своих статей и на Инстанте.
1. В файле /components/content/frontend.php после
  1. $article_content = $cfg['readdesc'] ? $article['description'].$article['content'] : $article['content'];
добавить
  1. $pattern = "/<a(.*?)href=('|\")([^>]*).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>(.*?)<\/a>/i";
  2. $replacement = '<a$1href=$2$3.$4$5 class="highslide-image" onclick="return hs.expand(this);"$6>$7</a>';
  3. $article_content = preg_replace($pattern, $replacement, $article_content);
2. В файле template.php используемой темы оформления в head добавить
  1. <link rel="stylesheet" href="/highslide/highslide.css" type="text/css" />
  2. <script type="text/javascript" src="/highslide/highslide-with-html.packed.js"></script>
  3. <script type="text/javascript">
  4. 	hs.graphicsDir = "/highslide/graphics/";
  5. 	hs.outlineType = "rounded-white";
  6. 	hs.outlineWhileAnimating = true;
  7. 	hs.showCredits = false;
  8. </script>
3. Разархивировать и положить в корень сайта highslide.zip
Можно положить и не в корень, но тогда поменяйте пути до файлов в пункте 2.

Буду рад, если кому-то пригодится.

UPD: метод, описанный выше, работает только если при вставке картинки указывать в качестве ссылки — ее оригинал. Если подобное вас не совсем устраивает, и на своем сайте вы привыкли просто вставлять картинки, задавая размеры уменьшенной копии, то используйте ниже описанный способ (сразу хочу предостеречь тех, кто на своем сайте размещает кнопки или баннеры на другие ресуры — способом, описанным ниже, вы отрежете себе такую возможность, ссылки на баннерах будут вызывать javascript, поэтому при нажатии будет осуществлен не переход по ссылке, а увеличение картинки):

1. В файле /components/content/frontend.php после
  1. $article_content = $cfg['readdesc'] ? $article['description'].$article['content'] : $article['content'];
добавить
  1. $pattern = "/<img(.*?)src=('|\")([^>]*).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>/i";
  2. $replacement = '<a href=$2$3.$4$5 class="highslide-image" onclick="return hs.expand(this);"><img$1src=$2$3.$4$5 $6></a>';
  3. $article_content = preg_replace($pattern, $replacement, $article_content);
2. В файле template.php используемой темы оформления в head добавить
  1. <link rel="stylesheet" href="/highslide/highslide.css" type="text/css" />
  2. <script type="text/javascript" src="/highslide/highslide-with-html.packed.js"></script>
  3. <script type="text/javascript">
  4. 	hs.graphicsDir = "/highslide/graphics/";
  5. 	hs.outlineType = "rounded-white";
  6. 	hs.outlineWhileAnimating = true;
  7. 	hs.showCredits = false;
  8. </script>
3. Разархивировать и положить в корень сайта highslide.zip
Можно положить и не в корень, но тогда поменяйте пути до файлов в пункте 2.
Переход к комментарию после его публикации
highslideкартинкиувеличение
0
WALTERZ WALTERZ 13 лет назад #
+
Превью вещица хорошая
можно взглянуть на демо?
0
del del 13 лет назад #
У меня его нет) просто сейчас как раз переношу сайт с WP на инстант, попутно прикручиваю нужные вещи. Можно пока что глянуть на new.linux-easy.ru (на linux-easy.ru сейчас пока что WP, но там тоже стоит auto-highslide).
Ну, вот, например, тут картинки в статье есть: http://new.linux-easy.ru/blog/articles/pervyj-test-ustanovki-lmde.html
0
imprint imprint 13 лет назад #
так у тя это в блогах размещено...или без разницы...
0
del del 13 лет назад #
Это не блоги, это статьи. Ссылку можно обозвать как угодно, просто на WP у меня была категория articles, и тут получилось бы не совсем красиво, если б выглядело как /article/articles, а все ссылки со старого блога я сохраняю полностью функциональными.
0
imprint imprint 13 лет назад #
ничего не изменилось....картинки в статьях не увеличиваются....
0
del del 13 лет назад #
Хм... А где Вы пытаетесь увеличить картинки по клику? Просто я это делал только для статей, для остальных компонентов нужно также прописывать в фронтенды, но я не использую их, поэтому не делал... Вроде бы все указал, что делал... Распаковали все в директорию highslide в корень сайта?
0
imprint imprint 13 лет назад #
пытаюсь увеличить в статье... в разделе...пример...
+1
del del 13 лет назад #
Так ведь у них нет ссылок на оригинал картинки, что там увеличивать то? Highslide же не масштабирует картинку, он берет оригинал и загружает его без перезагрузки страницы. Соответственно, у Вас должны быть картинки вставлены примерно так:

Код PHP:
<a href="http://linux-easy.ru/images/lmde_setup_1.png">
<img style="width: 350px; height: 197px;" src="http://linux-easy.ru/images/lmde_setup_1.png" alt="">
</a>
После отработки Highslide это превращается в:
Код PHP:
<a class="highslide-image" onclick="return hs.expand(this);" href="http://linux-easy.ru/images/lmde_setup_1.png">
<img style="width: 350px; height: 197px;" src="http://linux-easy.ru/images/lmde_setup_1.png" alt="">
</a>
0
imprint imprint 13 лет назад #
так это на каждую картинку отдельно прописывать ссылку?
0
del del 13 лет назад #
Зачем прописывать это на каждую картинку? Если картинка маленькая, какой смысл ее увеличивать? Если картинка большая, то при вставке ее в статью Вы прописываете ширину и высоту меньше (какую нужно), и указываете ссылку на оригинал (там же, при вставке картинки).
0
del del 13 лет назад #
Записал видео, как примерно вставлять картинки: http://www.youtube.com/watch?v=KgLgBebGWqE
0
del del 13 лет назад #
ссылку скопировать и вставить вручную, при редиректе с сайта инстанта видео не открывается.
0
imprint imprint 13 лет назад #
я уже реализовывал такой прибамбац...не прокатило....пользователь не будет запариваться ссылками... у меня в основном пользователи создают контент....я отказался от той приблуды....
0
del del 13 лет назад #
Хм, ну если пользователи не вставляют больших изображений, то это и не нужно совершенно. Просто я вставляю скриншоты, а они крупные, и чтобы полностью их посмотреть, нужно открывать картинку в отдельном окне. Highslide решает эту проблему. В Вашем же случае это абсолютно не имеет смысла, т.к. все картинки имеют достаточно малые размеры.
0
imprint imprint 13 лет назад #
я такое делал....для отображений сертификатов и лицензий предприятий...помогает при определенных нужд....все равно спасибо...
0
Юрий Юрий 13 лет назад #
Аналогично, коллега. Изменений никаких.
0
del del 13 лет назад #
Юрий, у Вас получилось реализовать?
0
Юрий Юрий 13 лет назад #
C дополнительными ссылками получается лишний геморрой. Я не стал заморачиваться, а ПЛЮС все равно ставлю, кому-то эта модификация должна пригодиться.
0
del del 13 лет назад #
Вы поймите, без ссылок получатся, что вставлена просто картинка, и увеличивать по сути нечего. Это будет полезно только тем, кто ставит миниатюры, а к ним ссылки на оригинальные большие картинки. Иначе просто нечего увеличивать, т.к. оригинал и вставляется, а не миниатюра.
0
del del 13 лет назад #
Получается*
Простите, с телефона пишу.
0
Юрий Юрий 13 лет назад #
Я все понял, спасибо. Но тут ситуация такова: при загрузке картинки мы загружаем оригинал и в статье выводим тоже его, но с уменьшенными параметрами высоты и ширины. То есть получается, что ссылка на изображение и есть ссылка на оригинал. А дублирование адресов при загрузке картинок в статью будет утомлять))))
0
del del 13 лет назад #
Ну, под миниатюрой я именно это и имел в виду)) То есть Вы просто вставляете картинку, задав ей уменьшенные параметры ширины и высоты, при этом в самой статье ее нельзя просмотреть в оригинальном размере. Я же всегда вставляю ссылку на оригинальное изображение, иначе на скриншотах в уменьшенном размере с шириной в 350 пикселей ничего рассмотреть не удастся. Соответственно, при нажатии на ссылку у меня открывалась картинка, но чтобы вернуться к статье, нужно было нажать "назад". Вот этого недостатка я избежал с помощью Highslide =)
0
del del 13 лет назад #
В принципе, теоретически, можно доработать эту вещь и под Ваши нужды...
Принцип:
- Ищем все выражения вида:
Код PHP:
<img ... src="somelink" ...>
- Берем из него то, что указано в:
Код PHP:
src="somelink"
- Заменяем выражения, найденные в первом пункте, на выражения:
Код PHP:
<a href="somelink"><img ... src="somelink" ...></a>
И уже к этому подключаем Highslide. Тогда все вставленные изображения будут "увеличиваться". Почему в кавычках написал - потому что если размеры оригинала и миниатюр равны, увеличения как такового происходить не будет, будет только появляться прямоугольник вокруг картинки.
0
Серёга Серёга 13 лет назад #
А вот с этого момента можно по подробнее?
0
del del 13 лет назад #
Что конкретно?smileНужно просто поработать с регуляркой (регулярными выражениями) побольше. Задать pattern и preg_replace не только для ссылок, но и для самих картинок, т.е. обработать текст внутри тега img.
0
Серёга Серёга 13 лет назад #
можно пожалуйста по пунктам если вас не затруднит?
0
del del 13 лет назад #
Ну, как сказать... я сам php не изучал) все, что я смог сваять сам с нуля на php - это сайт линуксоиды.рф, с использованием библиотеки GD для наложения текста на картинку =)
Чтобы доработать скрипт, мне нужно посидеть и практически методом тыка (конечно же, с использованием мануалом по preg_replace) написать правильный шаблон поиска и замену найденного. Если время будет, займусь.
0
Серёга Серёга 13 лет назад #
Спасибо огромное!
0
del del 13 лет назад #
Да не за что пока...
Сделал, проверяйте...

Код 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);
0
del del 13 лет назад #
Это подставить вместо аналогичных строчек из самого поста.
Честно говоря, у меня на это ушло всего 2 минуты, сам не ожидал. Если работать будет, отпишитесь, я дополню сам пост, внесу в него и этот способ.
0
Серёга Серёга 13 лет назад #
Спасибо огромное!!! Все фото, которые были уменьшенны пувеличиваются, и прописовать не чего не надо! Вообщем огромный плюс!!!!!!!!!!!
0
del del 13 лет назад #
Ну, рад, что кому-то пригодилось)
0
imprint imprint 13 лет назад #
спасибо...отлично....работает...+
0
imprint imprint 13 лет назад #
что то del забыл указать....однозначно...
0
Серёга Серёга 13 лет назад #
del всё указал, только мне кажется пользователи не будут так морочиться, если только админ. А так огромный плюс!!!
0
del del 13 лет назад #
Возможно. Просто у меня на сайте статьи пишут постоянные пользователи, и после них я всегда проверяю и редактирую статьи.
0
Игорь Игорь 13 лет назад #
Отличное добавление. Так показывать оригинальное фото гораздо приятнее.
0
del del 13 лет назад #
Так, пардон, во втором скрипте скобки не хватало закрывающейся:
Код PHP:
<img$1src=$2$3.$4$5 $6</a>
В статье уже исправил:
Код PHP:
<img$1src=$2$3.$4$5 $6></a>
0
imprint imprint 13 лет назад #
что то не работает...может из за обновления джиквери?
0
del del 13 лет назад #
Вы же не меняли ничего, что было в архиве, значит все должно работать. У меня работает все без проблем: http://linux-easy.ru
P.S. У Вас же сейчас сделано увеличение при наведении.
0
Александр Александр 13 лет назад #
можете помочь, у меня если картинка больша то есть же отправить сообщение пользователю, там она очень огромная, а так скрип отлично работает всё увеличивается)) больше вам спасибо))
под аватаркой отправить сообщение там))) *
+1
del del 13 лет назад #
Не понял ничего из вышесказанного. Если зададите вопрос по-русски, возможно, отвечу.
+1
Профмаркет Профмаркет 11 лет назад #
Для версии сайта 1.10.1
вместо строки
Код PHP:
$article_content = preg_replace($pattern, $replacement, $article_content);
нужно писать
Код PHP:
$article['content'] = preg_replace($pattern, $replacement, $article['content']);

Спасибо del что помог разобраться
+1
GoodNet GoodNet 11 лет назад #
del, помогите разобраться.

У меня в файле /components/content/frontend.php нет такой строки $article_content = $cfg['readdesc'] ? $article['description'].$article['content'] : $article['content'];

Версия CMS 1.10.
Так же еще один вопрос, этот скрипт будет увеличивать картинки на форуме, в объявлениях или только в статьях?
+1
del del 11 лет назад #
1. Вы не можете посмотреть на комментарий выше своего?
2. Правки касаются компонента content, как Вы могли догадаться по месту расположения файла, а значит кроме статей эти правки ничего не затрагивают.
+1
del del 11 лет назад #
По первому пункту уточню... В новой версии, видимо, изменился вид переменных, поэтому нужно заменить их аналогично старой версии, но с новыми именами.

P.S. Я не использую новую версию движка, поэтому не могу помочь разобраться в данном вопросе более детально.
0
GoodNet GoodNet 11 лет назад #
Понял. Спасибо.
Строк, как в посте выше тоже нет, поэтому и спрашивал..
0
Shishlena Shishlena 11 лет назад #
Спасибо за первый способ, именно то, что нужно было
0
Mikhail Mikhail 11 лет назад #
Добрый день!
Все работает, но у меня такой вопрос, картинка открывается в отдельном окне, а как сделать чтобы она увеличивалась в том же?
0
del del 11 лет назад #
Смотреть настройки своего сайта. Видимо, у Вас присутствует атрибут target="_blank", либо картинки на внешнем домене.
0
Thanatognozija Thanatognozija 10 лет назад #
А можно ли это чудо прикрутить к блогу?
0
Thanatognozija Thanatognozija 10 лет назад #
Я хочу добавить, что прописываю в блоге картинки через БД, поэтому у меня получается обыкновенная ссылка, как в статьях, маленькая картинка со ссылкой на большую. Пробовал вставить этот код, но не получается почему-то. :(
0
del del 10 лет назад #
Ну, если код вставляли именно так, как написано, и переменную $article_content не заменяли, то не удивительно. А вообще, код блогов не смотрел, но уверен, что и туда прикрутить не проблема.
0
inside inside 8 лет назад #
а на 1.10.7 как сделать?)
0
del del 8 лет назад #
Давно не использую InstantCMS, попробуйте адаптировать самостоятельно.
0
Jestik Jestik 8 лет назад #
Так вроде вкорбке есть увеличение

Еще от автора

Переход к комментарию после его публикации

Переход к комментарию после его публикации

После добавления комментария к статье в инстанте стоит редирект к началу всех комментариев.
0

InstantCMS Team

Связь с нами
Email dev@instantcms.ru

Делаем полезные Интернет проекты с 2008 года 💫

О проекте

Поддержка

Дополнения

Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.