Если Вам нужно вставить замещающее изображение в Joomla, или добиться увеличения изображения про клику на нем, можно конечно установить какой-нибудь коммерческий плагин, типа Mouse Over Zoom Pro. Но Joomla - прекрасная и мощная CMS, добиться нужного эффекта можно и ее встроенными средствами! Итак, для того чтобы вставить замещающее изображение в материал сайта на Joomla нужно сделать следующее: - Переключить редактор TiniMCE в расширенный режим (Расширения - Менеджер плагинов - выбираете TinyMCE - в Параметрах плагина переключаете режим с "обычный" на "расширенный", сохраняете.
- Далее создаете два изображения. Если нужно, чтобы изображение увеличивалось, значит одно и то же изображение в разных размерах, например одно, размером 120х75 пикселей для непосредственной вставки в статью, другое размером 600х375 пикселей, в зависимости от ожидаемого эффекта при нажатии или наведении.
- Оба изображение загружаете на сайт.
- Вставляете первое изображение в нужное место Вашей статьи.
Далее Если Вы хотите, чтобы изображение увеличивалось по клику, делаете следующее: Кликаете правой кнопкой на вставленное уже в статью изображение, выбираете "Insert/edit link" ("Вставить/редактировать ссылку"), в появившемся окне в строке "Адрес ссылки" прописываете путь ко второму (увеличенному) изображению: /images/stories/1_1.png. В строке "цель" выбираете будет-ли ваше изображение открываться в этом же окне или в новом, и жмём кнопку "Insert" ("Вставить")
Сохраняете статью. Если Вы хотите вставить замещающее изображение (чтобы изображение увеличивалось, или менялось при наведении курсора), делаете так: Для увеличения изображения при наведении (замещения изображения), кликаем правой кнопкой на вставленное уже в статью изображение, выбираем "Insert/edit image" ("Вставить/редактировать изображение"), в появившемся окне идём во вкладку "Advanced" ("Дополнительно"), ставим галочку "Alternative image" ("Альтернативное изображение"), в строке "for mouse over" ("При наведении курсора") прописываем путь к нашему увеличенному файлу, в строке "for mouse out" ("При отведении курсора") прописываем путь к исходному файлу (если этого не сделать, то после того, как вы уберете курсор от картинки, она так и останется большой), жмём "Обновить"
В разных версиях Joomla и в разных локализациях вид окошка редактора может несколько отличаться, но смысл остается тот же  Сохраняете материал. Проверяете. Если Вам нужно вставить не замещающее, а просто увеличивающееся изображение в Joomla, то можно сделать, чтобы это происходило плавно и красиво при помощи Java Script. Для этого Вам надо: Первое - создать файл Java Script со следующим кодом: if (document.images){
(function(){
var cos, a = /Apple/.test(navigator.vendor), times = a? 20 : 40, speed = a? 40 : 20;
var expConIm = function(im){
im = im || window.event;
if (!expConIm.r.test (im.className))
im = im.target || im.srcElement || null;
if (!im || !expConIm.r.test (im.className))
return;
var e = expConIm,
widthHeight = function(dim){
return dim[0] * cos + dim[1] + 'px';
},
resize = function(){
cos = (1 - Math.cos((e.ims[i].jump / times) * Math.PI)) / 2;
im.style.width = widthHeight (e.ims[i].w);
im.style.height = widthHeight (e.ims[i].h);
if (e.ims[i].d && times > e.ims[i].jump){
++e.ims[i].jump;
e.ims[i].timer = setTimeout(resize, speed);
} else if (!e.ims[i].d && e.ims[i].jump > 0){
--e.ims[i].jump;
e.ims[i].timer = setTimeout(resize, speed);
}
}, d = document.images, i = d.length - 1;
for (i; i > -1; --i)
if(d[i] == im) break;
i = i + im.src;
if (!e.ims[i]){
e.ims[i] = {im : new Image(), jump : 0};
e.ims[i].im.onload = function(){
e.ims[i].w = [e.ims[i].im.width - im.width, im.width];
e.ims[i].h = [e.ims[i].im.height - im.height, im.height];
e (im);
};
e.ims[i].im.src = im.src;
return;
}
if (e.ims[i].timer) clearTimeout(e.ims[i].timer);
e.ims[i].d = !e.ims[i].d;
resize ();
};
expConIm.ims = {};
expConIm.r = new RegExp('\\bexpando\\b');
if (document.addEventListener){
document.addEventListener('mouseover', expConIm, false);
document.addEventListener('mouseout', expConIm, false);
}
else if (document.attachEvent){
document.attachEvent('onmouseover', expConIm);
document.attachEvent('onmouseout', expConIm);
}
})();
}
Даем ему название, например imagesize.js Второе - погружаем его в файл header.php: <script src="/ПУТЬ К ФАЙЛУ/imagesize.js" type="text/javascript"></script>
Третье - необходимо прописать свойство css для данной функции (его можно добавить в любой файл css вашего шаблона, например в template.css) :
img.expando { border: none; vertical-align: bottom; } Четвертое - при размещении изображения в материале, прописываем следующий код: <div><img class="expando" src="/ПУТЬ К ФАЙЛУ/img.jpg" border="0" width="150" height="110" /></div> Размер изображения надо указывать не реальный, а тот каким, Вы, хотите видеть его в миниатюре.
Источник: http://studio.effective-it.ru/ |
Блог
