Совет 1: Как сделать всплывающее фото

Всплывающее изображение – это один из «инструментов», используемых для эффективных онлайн-продаж. И это не пустые слова. Как правило, прежде чем что-то купить, человек должен товар рассмотреть, а поскольку пощупать предлагаемый интернет-магазином товар покупатель не может, поэтому для него очень важно качественное фото. Но чтобы изображение не занимало много места на странице, его делают уменьшенным с возможностью последующего увеличения при нажатии на него.
Инструкция
1
Скачайте плагин JCE Mediabox. Установите его через менеджер расширений Joomla, а затем активируйте. После этого откройте менеджер изображений JCE и добавьте на страницу фотографию, которая и будет выступать в роли превью, то есть, мини-изображения. Затем выделите добавленное фото и кликните по инструменту добавления гиперссылки. Следом за этим, с помощью браузера файлов JCE укажите путь к изображению, которое должно появиться после нажатия на превью. Затем откройте вкладку «Дополнительно» и в разделе «Список классов» выберите «jcepopup».
2
Создайте всплывающее изображение при помощи визуального редактора, который встроен в систему управления сайтом Ural CMS. Такое изображение при клике на превью увеличивается до больших размеров. С этой целью воспользуйтесь функцией «Вставить», расположенной на панели инструментов, после чего в открывшемся окне установите галочку напротив поля «Создать превью» и загрузите фотографию. Когда изображение загрузится на сайт, выберите его в «списке загруженных» и кликнете по нему.
3
После этого в окне вставки выберите «Внешний вид» и измените размеры фото: в идеале они должны быть 150-250 пикселей в ширину, ведь именно таких размеров превью. После внесения всех изменений нажмите «Вставить». В результате получится кликабельное изображение.
4
Скачайте плагин JCE HsExpander. Установите его через менеджер расширений. После установки в JCE в радиаторе появится особенная кнопка: кликните по ней и окно откроется. Появившееся на экране окно состоит из двух частей: Popup Image и Thumbnail Image. В первом задайте параметры всплывающего изображения, а во втором укажите размеры и альтернативный текст для превью. После того как внесете все необходимые изменения, нажмите «Вставить изображение», а затем «Сохранить».

Совет 2: Как сделать всплывающую страницу

При создании сайтов очень часто используются всплывающие окна в качестве меню, рекламных текстов и т.п. К тому же компактный вид позволяет экономить место на странице. Все, что нужно – это написать правильный код.
Инструкция
1
Создание всплывающих страниц может производиться на основе JavaScript. Тем не менее, есть более простой вариант – использование языка разметки гипертекста HTML и языка таблиц CSS. Удобство заключается в том, что созданные таким образом окна будут поддерживаться большинством браузеров вне зависимости от того, поддерживают ли они JavaScript.
2
Подобный код размещается в двух сроках, в первой строке содержится ссылка, которая отвечает за открытие окошка, вторая строка – по сути, и является всплывающим окном, атрибут onmouseover говорит о том, что будет отражаться стандартный при наведении на строку ссылки тип курсора, onclick указывает на то, что после щелчка скрытое окно станет видимым:

<a onmouseover='this.style.cursor="pointer" ' onfocus='this.blur();' onclick="document.getElementById('PopUp').style.display='block'"><span style="text-decoration: underline;">Нажать здесь!</span></a>
3
Вам потребуется указать размеры окна, цвет и размер текста, фон и рамки. Все эти параметры вы можете указать в атрибуте style. Цветa указывается по кодовой таблицe rgb. В стандартном инструменте Paint в окне «Изменение цветов», в можете найти код нужного оттенка, где R – красный, G – зеленый, В – синий (голубой). Так черный цвет имеет код rgb(0,0,0), белый rgb(255,255,255), серый rgb(126,126,126).

<div id='PopUp' style='display: none; position: absolute; left: 50px; top: 50px; border: solid black 1px; padding: 10px; background-color: rgb(255,255,225); text-align: justify; font-size: 12px; width: 135px;'> Сообщение или текст во всплывающем окне</div>

Селектор display с указанным значением none делает ваше окно невидимым.
4
Теперь вам нужно разместить две эти строчки между тегами вашей страницы <body> и </body>. После этого всплывающее окно готово к работе.
5
Однако при данном наборе вы получите постоянно открытое окно. Так что, если вам нужно, чтобы всплывающее окно можно было закрыть, добавьте ссылку, которая будет отвечать за это действие, перед тегом </div>:

<br /><div style='text-align: right;'><a onmouseover='this.style.cursor="pointer" ' style='font-size: 12px;' onfocus='this.blur();' onclick="document.getElementById('PopUp').style.display = 'none' " ><span style="text-decoration: underline;">закрыть</span></a></div>
6
Вероятно, вы захотите сделать окно, всплывающее не по щелчку, как описано выше, а при наведении курсора. Тогда первая строчка должна быть записана так:

<a onmouseover="document.getElementById('PopUp').style.display = 'block' " onmouseout="document.getElementById('PopUp').style.display = 'none' " onfocus='this.blur();'><span style="text-decoration: underline;">наведите мышку сюда!</span></a>
7
Таким образом, HTML-код всплывающего окна вы получили, и знакомы со структурой его составления. Все что осталось – оформить внешний вид и содержимое, что, естественно, будет зависеть от ваших умений, цели и фантазии. Но надо помнить, что это простейший вариант создания всплывающего окна. Если вы владеете достаточным навыком программирования в JavaScript (MooTools, jQuery, Prototype и пр.), вы можете создать более красивую и интересную страницу.
Видео по теме
Обратите внимание
Сохраняйте все внесенные изменения, иначе создать всплывающее фото не получится!
Полезный совет
Все вышеперечисленные плагины бесплатные: скачать их можно на сайте разработчика.
Источники:
  • 33 Mootools, jQuery, Phototype плагина для отображения галерей изображений во всплывающем блоке
Поиск
ВАЖНО! Проблемы сердца сильно "помолодели". Потратьте 3 минуты на просмотр ролика. Защитите себя и близких от страшных проблем.
Совет полезен?
Добавить комментарий к статье
Осталось символов: 500