как выравнять содержимое страницы по всей ширине и как вставить несколько фото с превью?

голоса: 0

Здравствуйте. Сайт - http://geoteacher.info/.  Вопросы:  

  1. Как выравнить содержимое страниц по всей ширине страницы? Так, что бы справа не оставалось пустого пространства.  
  2. Как вставить фото на страницу с превью (превью уменьшенное - при наведении надпись "нажмите для просмотра" - по клику открывается полное изображение). И самое главное: как вставить несколько таких фотографий одной строкой, т.е. чтобы фото шли не столбиков, а построчно (на сколько позволяет ширина страницы).
Адрес сайта http://geoteacher.info/
| Автор: | Категория: Дизайн сайта
Изменение категории | | Автор: Yuri_Geruk

Ответов: 1

Голоса: +1
  1. В стилях ищем строку номер 15, находим значение width:1300px; где 1300 как пример заменяем на 1450 в общем экспериментируйте с данным значением и первый вопрос решится.
  2. Пользуйтесь визуальным редактором https://www.ucoz.ru/help/start/vizualnyj-redaktor#imgs он позволяет вставлять картинки друг возле друга.

И далее добавить в глобальный блок нижняя часть сайта в самый низ такой скрипт:

<script type="text/javascript">
$("#textBlock img").each(function() {
$(this).wrap("<a href='" + this.src + "'/>");
$('a[href$=".jpg"], a[href$=".jpeg"], a[href$=".gif"], a[href$=".png"]').addClass('ulightbox').attr("data-fancybox-group", "ultbx");
});
</script>

после сможете увеличивать эти фото по клику.

| Автор:

1) #textBlock {overflow:auto;width:1350px;text-align:left;margin-left:auto;margin-right:auto;} Эту строчку изменил на 1350, 1400 и даже 1450 - без результата.

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

Честно говоря, и сам HTML код, при помощи которого вставлял картинки с превью, я не смог найти.

 

Антон Жохов,
  1. Кеш в браузере чистить нужно https://ukit.com/ru/help/kak-ochistit-cahe а если не очистите то ничего не поможет. И да, вы эту строчку в стили не добавили.
  2. Хотите использовать фото с превьюшкой, тогда крепите системным доп полем Изображения http://joxi.ru/GrqjMbEHQv4dqm после между текста статьи вставляйте подобный код $IMAGE1$ это для первого фото, у каждого нового будет свой другой айди вместо 1 и такие фото будет каждое с превью. Размер превью вы сразу можете настраивать при прикреплении фото http://joxi.ru/52ag1aOc4pEqgr если будете крепить доп поле Изображения, тогда скрипт выше не используйте.
  3. В данном случае чтобы фото были рядом, их достаточно установить вот так:

$IMAGE1$ $IMAGE2$ $IMAGE3$ $IMAGE4$

это если прикреплено 4 фото, айди прописываем свой вместо 1-2-3-4

Yuri_Geruk,

Спасибо.   Фотографии загрузил. Получилось как хотел, есть одно НО: как заменить текст при наведении на фото "Нажмите для просмотра в полном размере..." на свой текст (при этом на оригинальный текст для каждого фото)? Ни в визуальном редакторе странице, ни в html коде нет таких настроек.

на редактирование материал. в списке картинок должны быть шестеренки настроек картинок. вам нужно прописать title к картинкам

webanet,
Дело в том, что у меня нет таких строчек-настроек. Только размер фото-превью и фото-максимального размера.
читайте внимательно. материал или страницу надо поднять на редактирование. а вы где ищете сделайте скриншот
webanet,

Что значит "поднять на редактирование"? 

тогда только исходником ставить. но в вашем случае не надо, так как вы пользуетесь визуальным редактором, попытки вставить хтмл код может привести к порче страницы
webanet,
А где эти настройки вообще включаются? У вас и само изображение аватаркой небольшой просматривается...
это в модулях. там ничего включать не надо оно и так есть. у вас же созданные отдельные страницы
...